概述
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这称为解构(Destructuring)
在ES6之前,为变量赋值,只能直接指定值
var a = 1;
var b = 2;
var c = 3;
现在可以这样写:
var [a, b, c] = [1, 2, 3];
上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
数组的解构赋值
本质上，这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
// 可以嵌套
let [a, [[b], c]] = [1, [[2], 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
// 如果无匹配则解构失败值为undefined
let [a, b, c] = [ , , 3];
console.log(a); // undefined
console.log(b); // undefined
console.log(c); // 3
// 变量也不必一一对应,只有能匹配到的才会赋值
let [, , c] = [1, 2, 3];
console.log(c); // 3
// 使用"..."连续匹配剩余的值
let [a, ...b] = [1, 2, 3, 4];
console.log(a); // 1
console.log(b); // [2, 3, 4]
但是如果等号右边不是数组,或者是不可遍历的结构,那么将会报错
// 下面这些表达式都讲会报错
let [a] = 1;
let [b] = false;
let [c] = NaN;
let [d] = undefined;
let [e] = null;
let [f] = {};
默认值
解构赋值允许指定默认值
var [a = 1] = [];
console.log(a); // 1
注意，ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。
var [x = 1] = [undefined];
console.log(x); // 1
var [x = 1] = [null];
console.log(x); // null
上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
function f() {
console.log("Hello World!");
}
let [x = f()] = [1];
上面代码中，因为x能取到值，所以函数f根本不会执行。上面的代码其实等价于下面的代码
let x;
if ([1][0] === undefined) {
x = f();
} else {
x = [1][0];
}
对象的解构赋值
解构不仅可以用于数组,还可以用于对象
var {per1, per2} = {per1: "a", per2: "b"};
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值
var {per1, per2} = {per1: "a", per2: "b"};
console.log(per1); // "a"
console.log(per2); // "b"
var {test} = { per1: "a", per2: "b" }
console.log(test); // undefiened
上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。
如果变量名与属性名不一致，必须写成下面这样。
var { per1: test } = { per1: "a", per2: "b" };
console.log(test); // "a"
let obj = { per1: "hello", per2: "world" };
let { per1: f, per2: l } = obj;
console.log(per1); // "hello"
console.log(per2); // "world"
从上面的两个例子不难看出，对象的解构赋值的内部机制，其实是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
var { per1: test } = { per1: "a", per2: "b" };
console.log(per1); // undefiened
console.log(test); // "a"
上面代码中，真正被赋值的是变量test，而不是模式per1
但是有一点需要注意的地方，那就是采用这种写法时，变量的声明和赋值是一体的。对于let和const来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。
let test1;
let {test1} = {test1: 1}; // Duplicate declaration
let test2:
let {test2: s} = {test2: 1}; // Duplicate declaration
上面代码中，解构赋值的变量都会重新声明，所以报错了。不过，因为var命令允许重新声明，所以这个错误只会在使用let和const命令时出现。如果没有第二个let命令，上面的代码就不会报错。
let test1;
({test1} = {test1: 1});
let test2;
({test2: s} = {test2: 1});
上面代码中，let命令下面一行的圆括号是必须的，否则会报错。因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句。
和数组一样，解构也可以用于嵌套结构的对象
var obj = {
p: [
"Hello",
{a: "World"}
]
};
var { p: [b, {a}] } = obj;
console.log(b); // "Hello"
console.log(a); // "World"
注意，这时p是模式，不是变量，因此不会被赋值
对象的解构也可以指定默认值
var {x = 3} = {};
var {x, y = 5} = {x: 1};
默认值生效的条件是，对象的属性值严格等于undefined,因为其内部同样使用严格相等运算符（===）来判断比较
var {x = 3} = {x: undefined}; // x: 3
var {x = 3} = {x: null}; // x: null
上面代码中，如果x属性等于null，就不严格相等于undefined，导致默认值不会生效。
如果解构失败，变量的值等于undefined
var {x} = {y: 1};
x // undefined
字符串的解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
let [a, b, c, d, e] = "hello";
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length: len} = "hello";
console.log(len); // 5
数值和布尔值的解构赋值
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象
let {toString: s1} = 123;
console.log(s1 === Number.prototype.toString); // true
let {toString: s2} = true;
console.log(s2 === Boolean.prototype.toString); // true
上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
let {prop: x} = undefined; // TypeError
let {prop: y} = null; // TypeError
函数参数的解构赋值
函数的参数也可以使用解构赋值
function add([x, y]) {
return x + y;
}
console.log(add([1, 2])); // 3
上面代码中，函数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的参数是一个对象，通过对这个对象进行解构，得到变量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的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果
圆括号问题
解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。
由此带来的问题是，如果模式中出现圆括号怎么处理。ES6的规则是，只要有可能导致解构的歧义，就不得使用圆括号。
但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号
- 变量声明语句中,不能带有圆括号
- 函数参数中,模式不能带有圆括号
- 赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号中
// 下面语句全部报错
var [(a)] = [];
var {x: (a)} = {};
var ({x: a}) = {};
var {(x: a)} = {};
var {(x): c} = {};
function f([(a)]) {
return a;
}
({x: a}) = {x: 1};
([x]) = [1];
可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号
[(x)] = [3];
({x: (a)} = {});
用途
变量的解构赋值有很多用途,同时也给我们的开发带来了很多便利之处
(1) 交换变量的值
[x, y] = [y, x];
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
(2) 从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便
function test1() {
return [1, 2, 3];
}
var [a, b, c] = test1();
function test2() {
return {
a: 1,
b: 2
}
}
var {a , b} = test2();
(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来
function f([x, y, z]) { ... }
f([1, 2, 3]);
function f({x, y, z}) { ... }
f({z: 3, y: 2, z: 1});
(4)提取JSON数据
解构赋值对提取JSON对象中的数据,非常方便,而且快速
var jsonData = {
id: 40333,
status: "y",
data:[...]
};
let {id, status, data} = jsonData;
(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结构
这使得我们在做键值对遍历的时候方便了很多,而不用再像ES5时代时候分别取
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
(7) 输入模块的指定方法
加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");
生命不息，折腾不止...
I'm not a real coder,but i love it so much!
