ES6常用特性入门详解，面试必备，持更......

ES6（ECMAScript 2015）引入了许多新特性和语法糖，极大地提升了JavaScript的开发效率和代码可读性。下面列出了一些ES6中最常用和重要的特性，这些知识点在前端面试中经常会遇到，这其中有一部分引用于阮一峰老师的《ECMAScript 6 入门》，大家有兴趣可以去看原文。

目录

let 和 const 命令

解构赋值

箭头函数

模板字符串

扩展运算符（...）

async/await特点

Promise​​​​​​​

迭代器和生成器

类

前端模块化

新的数据类型

Set数据结构

Map数据结构

WeakSet 和 WeakMap 数据结构

---

let 和 const 命令

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。

let ：允许声明块级作用域的变量。用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}
a // 报错
b // 1

因为let命令所在的代码块内才会有效，所以像for循环的计数器，就很合适使用let

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i);
// ReferenceError: i is not defined

暂时性死区：在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

var a = 123;
{
  a = 'abc'; // ReferenceError
  let a;
}

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

const：声明一个常量，一旦赋值就不能改变。

const a = 123;
a // 123

a = 321;//报错

const声明的变量不得改变值，这意味着const声明的同时必须初始化，不能留到以后赋值, 不然也是会报错的。

const foo;
// SyntaxError: Missing initializer in const declaration

let 和 const 相同的地方

1.只在声明所在的块级作用域内有效
2.不可重复声明
3.同样存在暂时性死区，只能在声明的位置后面使用。

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前为变量赋值，只能直接指定值, 但ES6 有了更方便的写法。

解构赋值说得比较详细，例子比较多，可酌情跳过部分内容。

数组结构赋值：

//before
let a = 1;
let b = 2;
let c = 3;

//after
let [a, b, c] = [1, 2, 3];

这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值，如果解构不成功，变量的值就等于undefined。

let [a, [[b], c]] = [1, [[2], 3]];
a// 1
b// 2
c// 3

let [ , , c] = ["A", "B", "C"];
c// "C"

let [a, , c] = [1, 2, 3];
a // 1
c // 3

let [a, ...b] = [1, 2, 3, 4];
a// 1
b// [2, 3, 4]

let [a, b, ...z] = ['A'];
a // "a"
b // undefined
z // []

上面用到的...b和...z是rest参数，ES6新增语法，后面将会提到

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [a, b] = [1, 2, 3];
a// 1
b// 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

所以使用解构赋值的时候，=左边所包含的变量，= 右边一定要有

如果等号的右边不是可遍历的结构，那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。
事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

// 这是一个 Generator函数，后面也会写到 
function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
first // 0
sixth // 5

对象结构赋值：

let { a, b} = { a: "aaa", b: "bbb" };
a// "aaa"
b// "bbb"

不同的是，数组的元素是按次序排列的，变量的取值由它的位置决定，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { c } = { a: "aaa", b: "bbb" };
c// undefined

如果变量名与属性名不一致，必须写成下面这样。

let { a: c} = { a: 'aaa', b: 'bbb' };
c// "aaa"
a// ReferenceError: a is not defined

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。上面代码中，a是匹配的模式，c才是变量。真正被赋值的是变量c，而不是模式a。

解构也可以用于嵌套结构的对象，这和数组是一样的

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

如果想给p也赋值，可以写成下面这样。

let { p, p: [x, { y }] } = obj;
p // ["Hello", {y: "World"}]

默认值，不管是对象还是数组，解构赋值都允许指定默认值。

let [a = 1] = [];  // 数组
a // 1

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

var {x, y = 5} = {x: 1};  // 对象
x // 1
y // 5

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [x = 1] = [null];
x // null

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function fun() {
  console.log('aaa');
}

let [x = fun()] = [1];//因为x能取到值，所以fun并不会执行
因为x能取到值，所以fun并不会执行

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [a = 1, b = a] = [1, 2]; // a=1; b=2
let [a = b, b = 1] = [];     // ReferenceError: b is not defined

对象的解构默认值基本和数组的一样，但需要注意如果要将一个已经声明的变量用于解构赋值，必须小心。

// 错误的写法
let x;
{x} = {x: 1};// SyntaxError: syntax error

// 正确的写法
let x;
({x} = {x: 1});

因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

let { log, sin, cos } = Math;

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

字符串结构赋值，字符串也可以解构赋值，这是因为此时，字符串被转换成了一个类似数组的对象。

let [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

这里有个小技巧，类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

函数的参数的解构赋值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

上面这个还是很容易理解，数组参数被解构成变量x和y

[[1, 2], [3, 4]].map(([a, b]) => a + b);

//等同于
[[1, 2], [3, 4]].map(function ([a, b]){
	return a + b;
});

这里用到的 => 箭头函数，后面也会写到

函数参数的解构也可以使用默认值。

function fun({x = 0, y = 0} = {}) {
  return [x, y];
}

fun({x: 3, y: 8}); // [3, 8]
fun({x: 3}); // [3, 0]
fun({}); // [0, 0]
fun(); // [0, 0]

上面代码中，函数fun的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

function fun({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

fun({x: 3, y: 8}); // [3, 8]
fun({x: 3}); // [3, undefined]
fun({}); // [undefined, undefined]
fun(); // [0, 0]

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

用途：

1.交换变量的值

下面代码交换变量a和b的值，这样的写法不仅简洁易读。

let a = 1;
let b = 2;

[a, b] = [a, b];

2.从函数返回多个值

因为函数只能返回一个值，在以前如果要返回多个值，只能将它们放在数组或对象里返回，然后遍历赋值。有了解构赋值，取出这些值就非常方便。

// 数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

3.函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来，这样我们给函数传值的时候就可以直接传数组或对象。

let arr = [1, 2, 3];
function f([x, y, z]) { ... }
f(arr);

let obj = {z: 3, y: 2, x: 1};
function f({x, y, z}) { ... }
f(obj);

4.提取 JSON 数据

提取 JSON 对象中的数据，使用解构赋值会更简洁，省时省力

let jsonData = {
  id: 1001,
  status: "yes",
  data: ['Joe', 23]
};

let { id, status, data} = jsonData;

5.遍历 Map 结构

任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

6.输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { fun1, fun2 } = require("funs");

箭头函数

通过=>函数可以更简洁快速的定义一个函数

var fun = a => a;

// 等同于
var fun = function (a) {
  return a;
};

如果箭头函数不需要传参或需要多个传参，就需要使用()括起来。

var fun = () => 1;
// 等同于
var fun = function () { return 1 };

var sum = (n1, n2) => n1 + n2;
// 等同于
var sum = function(n1, n2) {
  return n1 + n2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并使用return语句返回。

var sum = (n1, n2) => { n1 += n2; return n1; }

但是由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

let fun = id => { name: "ABC" };
// 报错
let fun = id => ({ name: "ABC" });
// 不报错

如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

var fun = () => console.log(123);

模板字符串

用反引号(``)来定义字符串，可以方便地插入变量。

const name = 'Alice';
console.log(`Hello, ${name}!`);

扩展运算符（...）

表现形式是三个点（...），用于合并数组或传递参数到函数。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

下面是扩展运算符取代apply()方法的一个实际的例子，应用Math.max()方法，简化求出一个数组最大元素的写法。 

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

另一个例子是通过push()函数，将一个数组添加到另一个数组的尾部。 

// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

async/await特点

1. async/await，async 是“异步”的简写，async function 用于申明一个 function 是异步的； await，可以认为是async wait的简写， 用于等待一个异步方法执行完成；async函数的返回值是 Promise 对象。

2. async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

Promise​​​​​​​

Promise是一种处理异步操作的新方法，比传统的回调函数更加优雅。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Done!'), 1000);
});

promise.then(result => console.log(result)); // 输出 "Done!"

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。

迭代器和生成器

• 迭代器：允许遍历任何数据结构。
• 生成器：函数通过function*声明，可以使用yield表达式来生成序列。

function* countUpTo(n) {
    for (let i = 1; i <= n; i++) {
        yield i;
    }
}

const counter = countUpTo(5);
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2

类

ES6提供了一种更接近面向对象编程风格的方式来定义类和继承。

class Person {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const alice = new Person('Alice');
alice.sayHello(); // 输出 "Hello, my name is Alice"

前端模块化

ES6模块允许使用import和export来导入和导出模块。

// 导入
import "/app";
import React from “react”;
import { Component } from “react”;
// 导出
export function multiply() {...};
export var year = 2018;
export default ...
...

// myModule.js
export function hello() {
    console.log('Hello from myModule!');
}

// app.js
import { hello } from './myModule.js';
hello(); // 输出 "Hello from myModule!"

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块设计思想：尽量的静态化、使得编译时就能确定模块的依赖关系，以及输入和输出的变量（CommonJS和AMD模块，都只能在运行时确定这些东西）。

服务器端：CommonJS（同步加载模块），node.js用的就是CommonJS规范。客户端：AMD、CMD（异步加载模块）。 AMD规范的实现主要有RequireJS, CMD规范的主要实现有SeaJS。

AMD、CMD区别：

CMD 推崇依赖就近; AMD 推崇依赖前置
CMD 是延迟执行; AMD 是提前执行
CMD性能好,因为只有用户需要的时候才执行; AMD用户体验好,因为没有延迟,依赖模块提前执行了

新的数据类型

• Map: 类似于对象，但键可以是任意类型。
• Set: 存储唯一值的集合。
• Symbol: 创建唯一的符号值，主要用于属性键名，以避免命名冲突。

Set数据结构

Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构，可用于数组去重。

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));// 2 3 5 4
const s2 = new Set([1, 2, 3, 4, 5, '5', 5, 5]);
s2.size // 6
[...s2]// [1, 2, 3, 4, 5, '5']

关于值的判断：

向 Set 加入值时，不会发生类型转换，所以5和"5"是两个不同的值（例如上面的实例），对象总是不相等的，即便都是空对象，但是NaN是相等的。

let set = new Set();

set.add({});
set.size // 1
set.add({});
set.size // 2

let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set.size // 3

实例：

• .add()  添加成员，返回Set结构本身
• .size 返回Set实例的成员总数
• .delete() 删除某值，返回Set结构本身
• .has() 返回一个布尔值，表示该值是否为Set的成员
• .clear() 清除所有成员，没有返回值
• .keys() 返回键名的遍历器
• .values() 返回键值的遍历器
• .entries() 返回键值对的遍历器
• .forEach() 使用回调函数遍历每个成员，没有返回值

Set的遍历顺序就是插入顺序，这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法，所以可以省略 values 方法直接遍历Set实例。
 

Map数据结构

在JavaScript中对象（Object）本质是键值对的集合，但只能用字符串当作键。而Map 数据结构的出现就是为了解决这个限制，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

Map可以通过set方法添加成员，或者接受成员是一个个表示键值对的数组，分别如下：

const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

不仅仅是数组，任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。也就是说，Set和Map都可以用来生成新的 Map。

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1

const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

注意，只有对同一个对象的引用，Map 结构才将其视为同一个键，对同样的值的两个实例，在 Map 结构中被视为两个键。

const map = new Map();
const k1 = ['a'];
const k2 = ['a'];

map.set(k1, 111).set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222

实例：

• .set(key, value) 设置key对应的value，返回 Map 结构。如果key已经有值，则键值会被更新。
• .get(key)  读取key对应的键值，如果找不到key，返回undefined。
• .has(key) 方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
• .delete() 方法删除某个键，返回true，如果删除失败，返回false。
• .clear() 方法清除所有成员，没有返回值。
• .keys()： 返回键名的遍历器。
• .values()：返回键值的遍历器。
• .entries()：返回所有成员的遍历器。
• .forEach()：遍历 Map 的所有成员。

WeakSet 和 WeakMap 数据结构

WeakSet/WeakMap 结构与 Set/Map 类似，也是不重复的值的集合。但是，它与 Set /Map有两个区别。

1. 成员只能是对象，而不能是其他类型的值。
2. WeakSet/WeakMap 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet/WeakMap 对该对象的引用，所以WeakSet/WeakMap不需要考虑垃圾回收问题。因为是弱引用的原因，所以没有size属性，也没办法遍历它。