ES6可谓是对JS语言的一个颠覆性改变，增加了Module改善JS一直被诟病的模块化、Promise解决异步函数的回调地狱、Class的面相对象编程...
在学习ES6的过程中，大家或多或少都有看过阮一峰老师的《ECMAScript 6 入门》。这本书把ES6的所有知识点都讲解的很详细，如果有时间，还是要去仔仔细细的研究一番。这篇博文只是摘录五个常用的特性来讲解，话不多说，下面开讲：
一、let和const命令
1、let：
（1）基本用法
ES6 新增了let命令，用来声明变量。类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
{
let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1
（2）let在for循环中使用
var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[2](); // 10a[6](); // 10
这个例子中，i 由 var 声明，在全局范围有效，a 的所有组员里面的 i 都是指向同一个 i，导致所有组员运行输出的都是最后一轮的 i 的值。
var a = [];for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }}a[2](); // 2a[6](); // 6这个例子中， i 由 let 声明，当前的 i 只在本轮循环有效，所有每次循环的 i 其实都是一个新的变量。
Tips： 每轮循环的 i 都是重新声明的，JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的 i 时，就在上一轮循环的基础上进行计算。
（3）for循环的特别之处
在 for 循环中，设置循环变量的那部分是一个父作用域，而循环内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc'; // 和上一行for循环计数器的i不在同一作用域，所以可以声明成功。类比下面要讲的function(arg){let arg;}会报错，就是作用域问题 console.log(i);
}// abc// abc// abc
（4）不能重复声明
let 不允许在相同作用域内，重复声明同一个变量。
function func() { var a = 10; let a = 1;}func(); //Identifier 'a' has already been declaredfunction func() { let a = 10; let a = 1;}func(); //Identifier 'a' has already been declared
function func(arg) { let arg;
}func(); //Identifier 'arg' has already been declared
function func(arg) { { let arg;
}}func(); //不报错
（5）不存在变量提升
var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined。 let 命令改变了语法行为，它所声明的变量一定要在声明后使用，否则会报错。
console.log(foo); //undefinedvar foo = 2;console.log(bar); // ReferenceError: bar is not definedlet bar = 2;
（6）暂时性死区
ES6规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前使用这些变量，就会报错。这在语法上称为 “暂时性死区”。
var tmp = 123;if(true){ tmp = 'abc'; // ReferenceError: tmp is not defined let tmp;}Tips：“暂时性死区”的本质就是：只要一进入当前作用域，所要使用的变量就已经存在了，但不可获取（否则报错），只有等到声明的那一行代码出现，才可以获取和使用。
2、const：
const命令的用法和let相似，最大不同点就是：const声明一个只读的常量。一旦声明，常量的值就不能改变。
Tips：这个不可改变的是指针，所以对于const声明的对象和数组还是可以改变的。如果真的想将对象冻结，应该使用Object.freeze方法。
3、let和const部分补充：
ES5 只有两种声明变量的方法：var命令和function命令。
ES6 除了添加let和const命令，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。
顶层对象：在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。
ES6为了保持兼容性，规定：a. var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性。b. let，const，class 命令声明的全局变量，不属于顶层对象的属性。
var a = 1;window.a; // 1let b = 2;window.b; // undefined
二、变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
1、数组的解构赋值
（1）基本用法
// 之前，为变量赋值，可以直接指定值let a = 1;let b = 2;let c = 3;// ES6中允许这样let [a, b, c] = [1, 2, 3]; // 可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3 let [ , , third] = ["foo", "bar", "baz"];third // "baz" let [head, ...tail] = [1, 2, 3, 4];head // 1tail // [2, 3, 4] let [x, y, ...z] = ['a'];x // "a"y // undefined - 如果解构不成功，变量的值就等于 undefined。z // []
如果解构不成功，变量的值就等于undefined。
上面一种情况是解构不成功的；另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。
let [a, [b], d] = [1, [2, 3], 4];a // 1b // 2d // 4
上面两个例子，都属于不完全解构，但是可以成功。
如果等号的右边不是数组，那么将会报错。
let [foo] = 1;let [foo] = false;let [foo] = NaN;let [foo] = undefined;let [foo] = null;let [foo] = {};
（2）默认值
解构赋值允许指定默认值。例如：
let [foo = true] = [];foo;// true let [x, y = 'b'] = ['a'];x;//'a'y;//'b'
Tips：ES6 内部使用严格相等运算符(===)去判断一个位置是否有值。所以，只有当一个数组成员严格等于 undefined ，默认值才会生效。例如：
let [x = 1] = [undefined];x // 1let [x = 1] = [null];x // null - 默认值就不会生效，因为null不严格等于undefined
默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [x = 1, y = x] = [1, 2];x;//1y;//2 let [x = y, y = 1] = [];// ReferenceError: y is not defined -- let的暂时性死区let [x = y, y = 1] = [1, 2];
2、对象的解构赋值
（1）基本用法
let { bar, foo } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"let { baz } = { foo: "aaa", bar: "bbb" };baz // undefined
对象的解构与数组的解构，一个重要的不同点在于： 数组元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量名与属性同名，才能取到正确的值。
如果没有与变量名对应的属性名，导致取不到值，最后等于undefined。
如果变量名和属性名不一样，必须写才下面这样：
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };baz // "aaa"let obj = { first: 'hello', last: 'world' };let { first: f, last: l } = obj;f // 'hello'l // 'world'
这实际上说明，对象的解构赋值是下面形式的简写：
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
let { foo: baz } = { foo: "aaa", bar: "bbb" };baz // "aaa"foo // error: foo is not defined 上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
（2）默认值
对象的解构也可以指定默认值。默认值生效的条件是对象的属性值严格等于 undefined。
let {x, y = 5} = {x: 1};x;// 1y;// 5let { message: msg = 'Something went wrong' } = {};msg;//"Something went wrong"
Tips：如果要将一个已经声明的变量用于解构赋值，需要注意：
let x;{x} = {x:1};//上面的代码会报错，因为JavaScript引擎会将 {x} 理解为一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。
//正确的写法，将需要解构的部分用括号（）包起来let x;({x} = {x:1});
3、字符串的解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';a // "h"b // "e"c // "l"d // "l"e // "o"
类似数组的对象都有一个 length 属性，因此还可以对这个属性解构赋值。
let {length: len} = 'hello';len;// 5
4、数值和布尔值的解构赋值
解构赋值时，如果等号右边是数值和布尔值，则会先转化为对象：
let {toString: s} = 123;s === Number.prototype.toString // truelet {toString: s} = true;s === Boolean.prototype.toString // true上面代码中，数值和布尔值的包装对象都有 toString 属性，因此变量 s 都可以取到值。
解构赋值的规则是：只要等号右边的值不是对象或数组，就先将其转化为对象。 由于 undefined 和 null 无法转化为对象，所以对他们进行解构赋值都会报错。
5、函数参数的解构赋值
function add([x, y]){ return x + y;} add([1, 2]); // 3
[[1, 2], [3, 4]].map(([a, b]) => a + b);// [ 3, 7 ]上面代码中，函数 add 的参数看似是一个数组，但在传入参数时，数组参数就解构为变量 x 和 y。对于函数内部代码来说，参数就是 x 和 y。
函数参数的解构也可以使用默认参数：
function move({x=0, y=0}={}) { return [x, y];}move({x:3,y:8});// [3, 8]move({x:3});// [3, 0]move({});// [0, 0]move();// [0, 0]上例中，函数 move 的参数是一个对象，通过对这个对象进行解构，得到变量 x 和 y 的值。如果解构失败，x 和 y 等于默认值。
再看下面这种写法：
function move({x, y} = { x: 0, y: 0 }) { return [x, y];} move({x: 3, y: 8}); // [3, 8]move({x: 3}); // [3, undefined]move({}); // [undefined, undefined]move(); // [0, 0]上面的代码是为函数 move 的参数指定默认值，而不是为变量 x 和 y 指定默认值。
6、解构的用途
（1）交换变量的值
let x = 1;let y = 2;[x, y] = [y, x];x;// 2y;// 1
（2）从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里面返回。有了解构赋值，取出这些值就非常方便。
//返回一个数组function example() { return [1, 2, 3];}let [a, b, c] = example();a;//1b;//2c;//3
//返回一个对象function example(){ return { foo: 1, bar: 2 }}let {foo, bar} = example();foo;//1bar;//2
（3）函数参数的定义
解构赋值可以方便的将一组参数与变量名对应起来。
//参数是一组有序值function f([x, y, z]) {}f([1, 2, 3]); //参数是一组无序值function f({x, y, z}) {}f({x: 1, y: 2, z: 3});
（4）提取JSON数据
let data = { id: 1, status: 'ok', data: [867, 5612]};let {id, status, data:number} = data;console.log(id, status, number);// 1 "ok" [867, 5612]
（5）遍历Map解构
const map = new Map();map.set('first','hello');map.set('second','world');for (let [key, value] of map) { console.log(key + ' is ' + value );}//first is hello//second is world// 获取键名for (let [key] of map) {} // 获取键值for (let [,value] of map) {}三、函数的默认参数
1、基本用法
ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。
function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello World上面代码检查函数log的参数y有没有赋值，如果没有，则指定默认值为World。这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用。就像上面代码的最后一行，参数y等于空字符，结果被改为默认值。
为了避免这个问题，通常需要先判断一下参数y是否被赋值，如果没有，再等于默认值。
if (typeof y === 'undefined') {
y = 'World';
}
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello -- 上面说过，ES6 内部使用严格相等运算符(===)，判断一个位置是否有值。所以，只有当一个数组成员严格等于 undefined ，默认值才会生效。
2、与解构赋值默认值结合使用
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined 5foo({x: 1}) // 1 5foo({x: 1, y: 2}) // 1 2foo() // TypeError: Cannot read property 'x' of undefined上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值生成。
如果函数foo调用时没提供参数，变量x和y就不会生成，从而报错。
通过提供函数参数的默认值，就可以避免这种情况。
function foo({x, y = 5} = {}) {
console.log(x, y);
}
foo() // undefined 5
下面是另一个解构赋值默认值的例子：
function fetch(url, { body = '', method = 'GET', headers = {} }) {
console.log(method);
}
fetch('http://example.com', {})// "GET"fetch('http://example.com')// 报错上面代码中，如果函数fetch的第二个参数是一个对象，就可以为它的三个属性设置默认值。
这种写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。
function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
console.log(method);
}
fetch('http://example.com')// "GET"上面代码中，函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET。
因此，与解构赋值默认值结合使用时，切记，函数要定义默认参数，防止函数不传参时报错。
四、模板字符串
模板字符串是增强版的字符串，用反引号 (`) 标识。它可以当普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
1、基本用法
let greeting = `\`Yo\` World!`; // `Yo` World -- 使用反斜杠转义反引号// 多行字符串$('#result').append(`
There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em>
are on sale!`);Tips：
a. 如果在模板字符串中需要使用反引号，则前面需要使用反斜杠转义。
b. 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
2、在模板字符串使用变量
(1) 在模板字符串中嵌入变量，需要将变量名写在 ${} 之中。
(2) 大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
(3) 模板字符串之中还能调用函数。
(4) 如果大括号中的值不是字符串，将按照一般的规则转为字符串。如： 如果大括号中是一个对象，将默认调用对象的 toString 方法。
(5) 如果模板字符串中的变量没有声明将会报错。
(6) 如果大括号内部是一个字符串，将原样输出。
//普通字符串`In JavaScript '\n' is a line-feed.`;
`Hello ${'World'}`; // "Hello World"//字符串中嵌入变量let name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`); // Hello Bob, how are you today?//字符串中嵌入 JavaScript 表达式`${x} + ${y} = ${x + y}`;// "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`;// "1 + 4 = 5"let obj = {x: 1, y: 2};
`${obj.x + obj.y}`;// "3"// 字符串中嵌入函数function fn(){ return "hello world"}
`foo ${fn()} bar`;// "foo hello world bar"// 字符串中嵌入对象`${obj}`;// "[object Object]"// 字符串中嵌入未声明的变量
`Hello, ${place}`;// ReferenceError: place is not defined五、箭头函数
ES6 允许使用 “箭头” (=>)定义函数。
1、基本用法
var f = v => v;//等同于var f = function (v) { return v;
}=> 前面的部分是函数的参数，=> 后面的部分是函数的代码块。
（1）如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var f = () => 5;//等同于var f = function (v) { return 5};var sum = (num1, num2) => num1 + num2;//等同于var sum = function(num1, num2){ return num1 + num2;
}
（2）如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句返回。
var sum = (num1,num2) => { return num1 + num2; }
（3）由于大括号会被解释为代码块，所以如果箭头函数直接返回一个对象，就必须在对象外面加上括号，否则会报错。
// 报错let getTempItem = id => { id: id, name: "Temp" };// 不报错let getTempItem = id => ({ id: id, name: "Temp" });
getTempItem(1);//{id: 1, name: "Temp"}let getTempItem = id => { return { id: id, name: "Temp" };
}
getTempItem(1);// {id: 1, name: "Temp"}
（4）箭头函数内部，可以嵌套箭头函数
function insert (value) { return {into: function (array){ return {after: function (afterValue) {
array.splice(array.indexOf(ahterValue)+1, 0, value); return array;
}
}
}
}
}
insert(2).into([1, 3]).after(1); //[1, 2, 3]//使用箭头函数改写let insert = (value) => ({into: (array) => ({after: (afterValue) => {
array.splice(array.indexOf(afterValue)+1, 0, value); return array;
}
})
});
2、箭头函数与变量解构结合使用
const full = ({ first, last }) => first + ' ' + last;
full({first: 1, last: 2});// "1 2"
// 等同于function full(person) { return person.first + ' ' + person.last;
}
full({first: 1, last: 2});// "1 2"
3、rest 参数与箭头函数结合
const numbers = (...nums) => nums; numbers(1,2,3,4);// [1, 2, 3, 4]const headAndTail = (head, ...tail) => [head, tail]; headAndTail(1,2,3,4);// [1,[2,3,4]]
4、箭头函数的优点
（1）简化代码
const isEven = n => n%2 == 0; isEven(3);// falseisEven(4);// true
（2）简化回调函数
[1, 2, 3].map( x => x*x ); //[1, 4, 9][3,2,5].sort((a, b) => a - b); // [2, 3, 5]
5、箭头函数的注意点——this
ES5中 this 的指向是可变的，但是箭头函数中 this 指向固定化。
var handler = {
id: '123',
init: function () {
document.addEventListener('click',
event => this.doSomethisng(event.type), false);
},
doSomethisng: function (type) {
console.log('Handling ' + type + ' for ' + this.id);
}
};
handler.init(); //Handling click for 123 -- this指向handle -- this是属于函数的一个对象，谁调用指向谁（es5中）
this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数内部根本没有自己的this，导致内部的this 就是外层代码块的 this 。
箭头函数转成 ES5 的代码如下：
// ES6function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}// ES5function foo() { var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
箭头函数的this是比较难理解的，但只要能想象到他是如何从ES5转化来的，就可以完全理解它的作用对象。
Tips：
(1) 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
(2) 不可以当构造函数，即不可以使用 new 命令，因为它没有 this，否则会抛出一个错误。
(3) 箭头函数没有自己的 this，所以不能使用 call()、apply()、bind() 这些方法去改变 this 指向。
(4) 不可以使用arguments 对象，该对象在函数体内不存在。如果要用，可以使用rest参数代替。
至此，先是粗略的讲解了一下ES6的五个常用的知识点。
另外，ES6的Promise对象、async函数、对象的扩展、数组的扩展、Set和Map数据结构、Class、Module也都是比较具有颠覆性的改进，每一个都能满满的写一篇，待续...