最近在系统的学习ES6，之前因为需要，也会接触并用到ES6的新特性，但是并没有完全的学习和了解过，所以现在也是趁有时间好好的学习。当然ES6新增了很多东西，想全面学习的话，还是推荐阮一峰老师的《ECMAScript 6 入门》，这里非常全面的介绍了 ECMAScript 6 新引入的语法特性，虽然有些例子可能一下子不能理解，但是思考理解的过程也会增加对语法的了解。
下面我将会慢慢的介绍一些常用的ES6语法特性，这其中有很大一部分引用于阮一峰老师的《ECMAScript 6 入门》，算是自己对这本书的一个笔记吧。
1、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命令所在的代码块内才会有效，所以像forlet
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 declarationlet 和 const 相同的地方
1.只在声明所在的块级作用域内有效2.不可重复声明
3.同样存在暂时性死区，只能在声明的位置后面使用。
2、变量的解构赋值
数组结构赋值
//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 // []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 接口，都可以采用数组形式的解构赋值。
// 这是一个 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// undefinedlet { a: c} = { a: 'aaa', b: 'bbb' };
c// "aaa"
a// ReferenceError: a is not defineda是匹配的模式，c才是变量。真正被赋值的是变量c，而不是模式a
解构也可以用于嵌套结构的对象，这和数组是一样的
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"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 // nullfunction fun() {
console.log('aaa');
}
let [x = fun()] = [1];//因为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});{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.交换变量的值
let a = 1;
let b = 2;
[a, b] = [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);提取 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");3、箭头函数
通过=>函数可以更简洁快速的定义一个函数
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);