ECMAScript6（ES6）知识积累

目录

ECMAScript6（ES6）

let命令

多行字符串 `...`

展开语法 ...

Object.assign

模板字符串 ${name}

Map 和 Set

iterable

promise

super

箭头函数

---

ECMAScript6（ES6）

注意：浏览器不一定支持最新的ES6标准。

let命令

var声明的变量只能是全局或者整个函数块的，而let声明的变量作用域被限制在块级中。在处理构造函数时，可通过let声明【而不是闭包】来创建一个或多个私有成员。

示例代码：

function a(){
  var i=0;
  let j=0;
  {
    var i=2;
    let j=2;
  }
  console.log(i); //2
  console.log(j); //0
}
a();

多行字符串 `...`

示例代码：

var string=`这是一个

多行

字符串`;

多行字符串也可用\n实现。

展开语法 ...

示例代码：

let arr1=[1,2];
let arr2=[...arr1,3];
console.log(arr2); //Array(3) [ 1, 2, 3 ]

let obj={"name1":"小明"};
let obj2={
  ...obj,
  "name2":"大明"
}
console.log(obj2); //Object { name1: "小明", name2: "大明" }

Object.assign

示例代码：

let obj={"name1":"小明"};
let obj2={"name2":"大明"};
Object.assign(obj,obj2,{"name3":"中明"});
console.log(obj); //Object { name1: "小明", name2: "大明", name3: "中明" }

模板字符串 ${name}

示例代码：

var name = '小明';

var age = 20;

console.log(`你好, ${name}, 你今年${age}岁了!`);

多个字符串也可用+号连接。

Map 和 Set

Map是一组键值对的结构，具有极快的查找速度。注意一个key只能对应一个value，如果对一个key重复赋值，后面的值会覆盖前面的值。

Set是一组无重复Key的集合，不存储value。

注意遍历Map和Set不能像Array一样使用下标循环。

Map示例代码：

//var m=new Map();
var m=new Map([['Tom',62],['Bob',90]]);
m.set('Tom',67);	//覆盖原Map集合里的TomTom
m.has('Tom');		//是否存在键‘Tom’：true
m.get('Tom');		//67
m.delete('Tom');	//删除键’Tom’
m.get('Tom');		//undefined
console.log(m);     //{}
for(var [key,value] of m){
//输出 Bob的年龄是：90岁。
    console.log(key+'的年龄是：'+value+'岁。');
}

Set示例代码:

var s1=new Set();
var s2=new Set([1,2,3,3,'3']);// s2为Set {1,2,3,”3”} 注意3和’3’类型不同。
s1.add(4);// s1为Set {4}
s1.add(4);// s1为Set {4},重复添加的key会被过滤。
s2.delete(3);// s2为Set {1,2,”3”}
for(var key of s2){
	//依次输出1,2,3
    console.log(key);
}

iterable

Array、Map、Set都属于iterable类型。具有iterable类型的集合可以通过新的for ... of 循环来遍历。更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。

示例代码：

'use strict';
var a=['A','B'];
// element:指向当前元素的值
// index:指向当前索引
// array:指向Array对象本身
a.forEach(function(element,index,array){
    console.log(element+',index = '+index);
});
// A,index = 0
// B,index = 1

注意一个数组被当作对象遍历时，它的每个元素的索引被视为一个属性。for ... in循环遍历的实际上是对象的属性名称。for ... of循环则只循环集合本身的元素。

promise

Promise 对象可用来传递异步操作的消息。

Promise 对象特点

1. 对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

    pending:  初始状态，不是成功或失败状态。

    fulfilled: 操作成功完成。

    rejected:  操作失败。

   只有异步操作的结果，可以决定当前Promise【承诺】对象是哪一种状态，任何其他操作都无法改变这个状态。

2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise 优缺点

优点：

1. 可以通过Promise对象将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
2. Promise 对象提供统一的接口，使得控制异步操作更加容易。

缺点：

1. 无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
2. 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
3. 当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Promise 创建

可使用 new 来调用 Promise 的构造器来进行实例化，创建一个Promise对象。

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。

示例代码：

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

Promise.prototype.then 方法：链式操作

可对promise 对象调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。

Promise.prototype.then 方法返回的是一个新的 Promise 对象，因此可以采用链式写法。

语法：

        promise.then(onFulfilled, onRejected)

        promise.then(onFulfilled).catch(onRejected)

resolve 方法的参数除了正常的值以外，还可能是另一个 Promise 实例。而 reject方法的参数通常是 Error 对象的实例。

代码示例：

var p1 = new Promise(function(resolve, reject){
  // ... some code
});

var p2 = new Promise(function(resolve, reject){
  // ... some code
  resolve(p1);
})

        上例中，如果p2的resolve方法调用p1时，p1 的状态是 pending，那么 p2 的回调函数就会等待 p1 的状态改变；如果 p1 的状态已经是 fulfilled 或者 rejected，那么 p2 的回调函数将会立刻执行。

Promise.prototype.catch方法：捕捉错误

Promise.prototype.catch 方法是 Promise.prototype.then(null, rejection) 的别名，用于指定发生错误时的回调函数。

Promise 对象的错误具有"冒泡"性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个 catch 语句捕获。

Promise.all方法| Promise.race方法

Promise.all 和 Promise.race 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。方法的参数不一定是数组，但是必须具有 iterator 接口，且返回的每个成员都是 Promise 实例。

代码示例一：

var promarr = Promise.all([prom1,prom2,prom3]);

        上例中，prom1、prom2、prom3都是 Promise 对象的实例。

        只有prom1、prom2、prom3的状态都变成fulfilled，promarr的状态才会变成fulfilled，此时prom1、prom2、prom3的返回值组成一个数组，传递给promarr的回调函数。

        只要prom1、prom2、prom3之中有一个状态变成rejected，promarr的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给promarr的回调函数。

代码实例二：

var p = Promise.race([p1,p2,p3]);

        上例中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的返回值。

如果Promise.all方法和Promise.race方法的参数，不是Promise实例，就会先调用Promise.resolve方法，将参数转为Promise实例，再进一步处理。

Promise.resolve 方法| Promise.reject 方法

Promise.resolve方法 可以将现有对象转为Promise对象。

如果 Promise.resolve 方法的参数，不是具有 then 方法的对象（又称 thenable 对象），则返回一个新的 Promise 对象，且它的状态为fulfilled。

如果Promise.resolve方法的参数是一个Promise对象的实例，则会被原封不动地返回。

Promise.reject(reason)方法也会返回一个新的Promise实例，该实例的状态为rejected。Promise.reject方法的参数reason【error】，会被传递给实例的回调函数。

示例代码：

var p = Promise.reject('出错了');

p.then(null, function (s){
  console.log(s); // 出错了
});

super

super关键字用于访问和调用一个对象的父对象上的函数。

super.prop和super[expr]表达式在类和对象字面量任何方法定义中都是有效的。

语法:

super([arguments]);

// 调用 父对象/父类 的构造函数

super.functionOnParent([arguments]);

// 调用 父对象/父类 上的方法

在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。super关键字也可以用来调用父对象上的函数。

箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

基础语法

(param1, param2, …, paramN) => { statements }

(param1, param2, …, paramN) => expression

//相当于：(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：

(singleParam) => { statements }

singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。

() => { statements }

高级语法

//加括号的函数体返回对象字面量表达式：

params => ({foo: bar})

//支持剩余参数和默认参数

(param1, param2, ...rest) => { statements }

(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {

statements }

//同样支持参数列表解构

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

f();  // 6

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。由于 箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），它们的第一个参数会被忽略。

箭头函数不能用作构造器，和 new一起用会抛出错误。

箭头函数没有prototype属性。

箭头函数在参数和箭头之间不能换行。