记录整理日常开发中所使用的ES6语法/API,及其遇到的各种难点及教程(不定时更新)

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了记录整理日常开发中所使用的ES6语法/API,及其遇到的各种难点及教程(不定时更新)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1、变量声明letconst
在ES6之前的ES5时代,声明变量用var,但是无论声明在何处,都会被变量提升在最顶部(函数内会被提升到函数最顶部,不在函数内即在全局作用域的最顶部)。
letconst,其中最重要的两个特性就是提供了块级作用域和不再具备变量提升。
怎么理解块级作用域呢??

在一个函数内部,在一个代码块内部
说白了只要在{}大括号内的代码块即可以认为 letconst 的作用域。

例如:

// let声明变量
for(let i=0; i<10; i++) {
    console.LOG(i);
}
console.log(i); // 块外调用会报错:Uncaught ReferenceError: i is not defined

// const声明常量
const id = 123;
id = 456; // 再次修改会报错:Uncaught TypeError: Assignment to constant VARiable.

2、箭头函数=>

var f = v => v;

上面的箭头函数等同于:

var f = function(v) {
  return v;
};

3、解构赋值
解析结构是一种全新的写法,我们只需要使用一个例子,大家就能够明白解析结构到底是怎么一回事儿。

首先有这么一个对象

const PRops = {
    classname: 'tiger-button',
    loading: @H_579_126@false,
    clicked: true,
    disabled: 'disabled'
}

当我们想要取得其中的2个值:loading与clicked时:

// es5
var loading = props.loading;
var clicked = props.clicked;

// es6
const { loading, clicked } = props;

给一个默认值,当props对象中找不到loading时,loading就等于该默认值

const { loading = false, clicked } = props;

是不是简单了许多?正是由于解析结构大大减少了代码量,因此它大受欢迎,在很多代码中它的影子随处可见。

比如

// section1 
import React, { component } From 'react';

// section2
export { default } from './Button';

// section3
const { click, loading } = this.props;
const { isCheck } = this.state;

more 任何获取对象属性值的场景都可以使用解析结构来减少我们的代码量
另外,数组也有属于自己的解析结构。

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;

// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

数组以序列号一一对应,这是一个有序的对应关系。
而对象根据属性名一一对应,这是一个无序的对应关系。
根据这个特性,使用解析结构从对象中获取属性值更加具有可用性。

10、await 多个 async 函数
在使用 async/await 的时候,可以使用 Promise.all 来 await 多个 async 函数

await Promise.all([anAsyncCall(), thisIsAlSOAsync(), oneMore()])

脚本宝典总结

以上是脚本宝典为你收集整理的记录整理日常开发中所使用的ES6语法/API,及其遇到的各种难点及教程(不定时更新)全部内容,希望文章能够帮你解决记录整理日常开发中所使用的ES6语法/API,及其遇到的各种难点及教程(不定时更新)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。