ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。ECMA Script,JavaScript的语言标准。至今已经发布5年多了，但是因为蕴含的语法之广，完全消化需要一定的时间，这里我总结了部分ES6，以及ES6以后新语法的知识点，使用场景，希望对各位有所帮助

一、let和const

let

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

特点：

• 不存在变量提升。
• 暂时性死区——只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
• 不允许重复声明。
• 块级作用域——被{}包裹，外部不能访问内部。

应用案例与分析：

// 使用var

for (var i = 0; i < 5; i++) {

setTimeout(function () {

console.log(i);

});

} // => 5 5 5 5 5

// 使用let

for (let i = 0; i < 5; i++) {

setTimeout(function () {

console.log(i);

});

} // => 0 1 2 3 4

上面使用let的代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算所以最后能正常输出i的值。

注意：

for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域，所以我们可以在循环体内部访问到i的值。

let和var全局声明时，var可以通过window的属性访问而let不能。

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。const实际上保证的是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

因此，我们使用const时，不能只声明而不初始化值，否则会报错：

const a;

// SyntaxError: Missing initializer in const declaration

const的其他特性和let很像，一般推荐用它来声明常量，并且常量名大写。

二、数组的扩展

扩展运算符

扩展运算符（spread）是三个点（...），将一个数组转为用逗号分隔的参数序列

应用场景：

1 复制数组

const a1 = [1, 2];

const a2 = [...a1];

2 合并数组

const arr1 = ['1', '2'];

const arr2 = ['c', {a:1} ];

// ES6 的合并数组

[...arr1, ...arr2]

注：这两种方法都是浅拷贝，使用的时候需要注意。

3 将字符串转化为数组

使用扩展运算符能够正确识别四个字节的 Unicode 字符。凡是涉及到操作四个字节的 Unicode 字符的函数，都有这个问题。因此，最好都用扩展运算符改写。

[...'xuxi']

// [ "x", "u", "x", "i" ]

4 实现了 Iterator 接口的对象

let nodeList = document.querySelectorAll('div');

let arr = [...nodeList];

上面代码中，querySelectorAll方法返回的是一个NodeList对象。它不是数组，而是一个类似数组的对象。扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了 Iterator 。

Array.from()

Array.from方法用于将类对象转为真正的数组：类似数组的对象和可遍历的对象（包括 ES6 新增的数据结构 Set 和 Map）。

实际应用中我们更多的是将Array.from用于DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。

// NodeList对象

let nodeList = document.querySelectorAll('p')

let arr = Array.from(nodeList)

// arguments对象

function say() {

let args = Array.from(arguments);

}

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from([1, 2, 4], (x) => x + 1)

// [2, 3, 5]

Array.of()

Array.of方法用于将一组值，转换为数组。Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of() // []

Array.of(undefined) // [undefined]

Array.of(2) // [21]

Array.of(21, 2) // [21, 2]

数组实例方法includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值。该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 4, 3].includes(2) // true

[1, 2, 4].includes(3) // false

[1, 5, NaN, 6].includes(NaN) // true

三、对象的扩展

对象的扩展运算符

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中，等同于使用Object.assign()方法。

let a = {

w: 'xu', y: 'xi'

}l

et b = {

name: '12'}let ab = {

...a, ...b

};

// 等同于

let ab = Object.assign({}, a, b);

Object.is()

用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致;不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

+0 === -0 //true

NaN === NaN // false

Object.is(+0, -0) // false

Object.is(NaN, NaN) // true

Object.assign()

用于对象的合并，将源对象的所有可枚举属性，复制到目标对象; 如果只有一个参数，Object.assign会直接返回该参数; 由于undefined和null无法转成对象，所以如果它们作为参数，就会报错; 其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

// 合并对象

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };

const source2 = { c: 3 };

Object.assign(target, source1, source2);

target // {a:1, b:2, c:3}

// 非对象和字符串的类型将忽略

const a1 = '123';

const a2 = true;

const a3 = 10;

const obj = Object.assign({}, a1, a2, a3);

console.log(obj); // { "0": "1", "1": "2", "2": "3" }

注意点：

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

对于嵌套的对象，遇到同名属性，Object.assign的处理方法是替换，而不是添加

Object.assign可以用来处理数组，但是会把数组视为对象。

Object.assign([1, 2, 3], [4, 5])

// [4, 5, 3]

Object.assign只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。

const a = {

get num() { return 1 }

};

const target = {};

Object.assign(target, a)

// { num: 1 }

应用场景：

• 为对象添加属性和方法
• 克隆/合并对象
• 为属性指定默认值

Object.keys()

返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键名。

const obj = { 100: '1', 2: '2', 7: '3' };

Object.values(obj)

// ["100", "2", "7"]

Object.values()

返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值。注意：返回数组的成员顺序：如果属性名为数值的属性，是按照数值大小，从小到大遍历的。

const obj = { 100: '1', 2: '2', 7: '3' };

Object.values(obj)

// ["2", "3", "1"]

四、set和map数据结构

set

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

实例属性和方法：

• add(value)：添加某个值，返回Set结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

s.add(1).add(3).add(3);

// 注意3被加入了两次

s.size // 2

s.has(1) // true

s.has(2) // false

s.delete(3);

s.has(3) // false

可进行遍历操作：

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

Set的遍历顺序就是插入顺序，这个特性有时非常有用，比如使用Set保存一个回调函数列表，调用时就能保证按照添加顺序调用。

应用场景：

// 数组去重

let arr = [1，2，2，3];

let unique = [...new Set(arr)];

// or

function dedupe(array) {

return Array.from(new Set(array));

}

let a = new Set([1, 2, 3]);

let b = new Set([4, 3, 2]);

// 并集

let union = new Set([...a, ...b]);

// Set {1, 2, 3, 4}

// 交集

let intersect = new Set([...a].filter(x => b.has(x)));

// set {2, 3}

// 差集

let difference = new Set([...a].filter(x => !b.has(x)));

// Set {1}

map

类似于对象，也是键值对的集合，各种类型的值（包括对象）都可以当作键。Map结构提供了“值与值”的对应，是一种更完善的Hash结构实现。

实例属性和方法:

• size属性: 返回Map结构的成员总数。
• set(key, value): set方法设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键,set方法返回的是Map本身，因此可以采用链式写法。
• get(key) : get方法读取key对应的键值，如果找不到key，返回undefined。
• has(key) : has方法返回一个布尔值，表示某个键是否在Map数据结构中。
• delete(key) : delete方法删除某个键，返回true。如果删除失败，返回false。
• clear() : clear方法清除所有成员，没有返回值。

遍历方法和set类似，Map结构转为数组结构，比较快速的方法是结合使用扩展运算符（...）：

let map = new Map([

[1, 'one'],

[2, 'two'],

[3, 'three'],

]);

[...map.keys()]

// [1, 2, 3]

[...map.values()]

// ['one', 'two', 'three']

[...map.entries()]

// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]

// [[1,'one'], [2, 'two'], [3, 'three']]

数组转map：

new Map([[true, 7], [{foo: 3}, ['abc']]])// Map {true => 7, Object {foo: 3} => ['abc']}

Map转为对象:

function strMapToObj(strMap) {

let obj = Object.create(null);

for (let [k,v] of strMap) {

obj[k] = v;

}

return obj;

}

let myMap = new Map().set('yes', true).set('no', false);

strMapToObj(myMap)

// { yes: true, no: false }

对象转为Map：

function objToStrMap(obj) {

let strMap = new Map();

for (let k of Object.keys(obj)) {

strMap.set(k, obj[k]);

}

return strMap;

}

objToStrMap({yes: true, no: false})

// [ [ 'yes', true ], [ 'no', false ] ]

总结

总的来说，虽然支持es6的情况到目前还不是很乐观，但es6的新语法特性让前端和后端的差异越来越小了，这是一个新时代的开始，我们必须要了解这些新的前沿知识，才能跟上时代的步伐。