阮一峰ES6学习（一）：let和const命令，变量的解构赋值
1.ECMAScript 和 JavaScript 的关系
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现
2.let命令
let命令的基本用法:ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
{
var a = 10;
let b = 1;
}
console.log(a); //10
console.log(b); //报错
for循环有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
//abc
//abc
//abc
上面代码正确运行，输出了3次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。
let不存在变量提升
console.log(foo); //undefined
var foo = 2;
console.log(bar); //报错
let bar = 2;
暂时性死区
var tmp = 123;
if (true) {
tmp = 'abc'; //报错
let tmp;
}
上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。
ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
if (true) {
tmp = 'abc';
console.log(tmp); //报错
let tmp;
console.log(tmp); //undefined
tmp = 123;
console.log(tmp); //123
}
总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
不允许重复声明
let不允许在相同作用域内，重复声明同一个变量。
//报错
function fn() {
let a = 10;
var a = 1;
}
//报错
function fn() {
let a = 10;
let a = 1;
}
因此，不能在函数内部重新声明参数。
function fn(arg) {
let arg; //报错
}
function fn(arg) {
｛
let arg；//不报错
｝
}
3.块级作用域
-
为什么需要块级作用域？
ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。
第一种场景，内层变量可能会覆盖外层变量。
function fn() { console.log(tmp); if (false) { var tmp = 'hello world'; } } fn(); //undefined上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。
第二种场景，用来计数的循环变量泄露为全局变量。
var str = 'hello'; for (var i = 0; i < str.length; i++) { console.log(str[i]); } console.log(i);上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。
-
块级作用域和函数声明
ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。
但是注意在浏览器的ES6环境中，块级作用域内声明的函数，行为类似于var声明的变量。
function f() { console.log('outer'); } (function () { if (false) { function f() { console.log('inside'); } } f(); }())在es5中结果是inside，因为在if内声明的函数f会被提升到函数头部；在es6中结果是outer，因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是在符合es6的浏览器中会报错。实际上执行的代码是
function f() { console.log('outer'); } (function () { var f; if (false) { function f() { console.log('inside'); } } f();//报错：f不是一个函数 }())所以考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。
//函数声明语句 { let a = 'smm'; function f() { return a; } } //函数表达式 { let a = 'smm'; let f = function () { return a; } }
4.const命令
-
基本用法
const声明一个只读的常量。一旦声明，常量的值就不能改变。改变常量的值会报错。
const PI = 3.1415; PI //3.1415 PI = 3; //报错const一旦声明变量，就必须立即初始化，不能留到以后赋值。对于const来说，只声明不赋值，就会报错。
const foo; //报错其余的与let相同，1.只在声明所在的块级作用域内有效。2.const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。3.const声明的常量，也与let一样不可重复声明。
5.数组的结构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
以前，为变量赋值，只能直接指定值。
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; //1
bar; //2
baz; //3
let [, , third] = ['foo', 'bar', 'baz'];
third; //baz
let [x, , y] = [1, 2, 3];
x; //1
y; //3
let [head, ...tail] = [1, 2, 3, 4];
head; //1
tail; //[2,3,4]
let [x, y, ...z] = ['a'];
x; //'a'
y; //undefined
z; //[]
如果解构不成功，变量的值就等于undefined。
let [foo] = [];
let [bar, foo] = [1];
以上两种情况都属于解构不成功，foo的值都会等于undefined。
另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。
let [x, y] = [1, 2, 3];
x; //1
y; //2
let [a, [b], c] = [1, [2, 3], 4];
a; //1
b; //2
c; //4
如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。
//报错
let[foo] =1;
let[foo] =false;
let[foo] =NaN;
let[foo] =undefined;
let[foo] =null;
let[foo] ={};
上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备Iterator接口（前五个表达式），要么本身就不具备Iterator接口（最后一个表达式）。
默认值
解构赋值允许指定默认值。
let [foo = true] = [];
foo; //true
let [x, y = 'b'] = ['a']; //x = 'a',y = 'b'
let [x, y = 'b'] = ['a',undefined]; //x = 'a',y = 'b'
注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员只有严格等于undefined，默认值才会生效的。看下面例子：
let [x = 1] = [undefined];
x; //1
let [x = 1] = [null];
x; //null
上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
function f() {
console.log('aaa');
}
let [x = f()] = [1];
x; //1
上面代码中，因为x能取到值，所以函数f根本不会执行。
默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [x = 1, y = x] = []; //x = 1; y = 1
let [x = 1, y = x] = [2]; //x = 2; y = 2
let [x = 1, y = x] = [1,2]; //x = 1; y = 2
let [x = y, y = 1] = []; //报错
上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明。
6.对象的结构赋值
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'
foo; // 报错
与数组一样，解构也可以用于嵌套结构的对象。
let obj = {
p: [
'hello',
{y: 'world'}
]
};
let {p: [x, {y}]} = obj;
x; //hello
y; //world
注意，这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样。
let obj = {
p: [
'hello',
{y: 'world'}
]
};
let {p,p: [x, {y}]} = obj;
x; //hello
y; //world
p; //['hello',{y:'world'}]
下面再看一个例子：
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let {loc, loc: {start}, loc: {start: {line}}} = node;
line; //1
loc; //{start : obj}
start //{line : 1, column : 5}
上面代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量。
下面是嵌套赋值的例子：
let obj = {};
let arr = [];
({foo: obj.prop, bar: arr[0]} = {foo: 123, bar: true});
obj; //{prop:123}
arr; //[true]
上边的例子严格按照对象的解构赋值的内部机制赋值，看起来就是很简单了
对象的解构也可以指定默认值。同样，默认值生效的条件是，对象的属性值严格等于undefined。
var {x = 3} = {};
x; //3
var {x, y = 5} = {x: 1};
x; //1
y; //5
var {x: y = 3} = {};
y; //3
var {x: y = 3} = {x: 5};
y; //5
var {message: msg = 'smm'} = {};
msg; //'smm'
再看例子：
var {x = 3} = {x: undefined};
x; //3
var {x = 3} = {x: null};
x; //null
上面代码中，如果x属性等于null，就不严格相等于undefined，导致默认值不会生效。
如果解构失败，变量的值等于undefined。
let {foo} = {bar: 'bar'};
foo; //undefined
如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。
let {foo: {bar}} = {baz: 'baz'}; //报错
上面代码中，等号左边对象的foo属性，对应一个子对象。该子对象的bar属性，解构时会报错。原因很简单，因为foo这时等于undefined，再取子属性就会报错。
如果要将一个已经声明的变量用于解构赋值，必须非常小心。
//报错
let x;
{x} = {x : 1};
正确的写法是：
let x;
（{x} = {x : 1}）;
上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。
7.字符串的结构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
let [a, b, c, d, e] = 'hello';
a; //'h'
b; //'e'
c; //'l'
d; //'l'
e; //'o'
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length: len} = 'hello';
len; //5
8.函数参数的结构赋值
function add([x, y]) {
return x + y;
}
add([1, 2]); //3
上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。
下面是另一个例子。
[[1, 2], [3, 4]].map(([x, y]) => x + y); //[3,7]
函数参数的解构也可以使用默认值。
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指定默认值，所以会得到与前一种写法不同的结果。
undefined就会触发函数参数的默认值。
[1, undefined, 3].map((x = 'yes') => x);
// [1,'yes',3]
9.变量的解构赋值的用途
1.交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
2.从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
//返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
//返回一个对象
function example() {
return {
foo: 1,
bar: 2
}
}
let {foo, bar} = example();
3.函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
//参数是一组有序的值
function f([x, y, z]) {
}
f([1, 2, 3]);
//参数是一组无序的值
function f({foo, bar}) {
}
f({bar: 1, foo: 2});
4.提取JSON数据
解构赋值对提取JSON对象中的数据，尤其有用。
let jsonData = {
id: 42,
status: 'OK',
data: [867, 5309]
};
let {id, status, data: num} = jsonData;
console.log(id, status, num);
//42,'OK',[867,5309]
上面代码可以快速提取 JSON 数据的值。
5.函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true
}) {
}
指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。
6.遍历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);
}
// 'first is hello'
// ''second is world
如果只想获取键名，或者只想获取键值，可以写成下面这样。
//获取键名
for (let [key] of map) {
}
//获取键值
for (let [,value] of map) {
}
7.输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const {SourseMapConsumer, SourseNode} = require('sourse-map');
参考文章阮一峰的ECMAScript 6入门
