变量的解构赋值
es 6 允许按照一定的模式，从数组和对象中提取值，然后对变量进行赋值，这被称之为解构；
一.数组的解构赋值
最基本写法：
let [a, b, c] = [1, 2, 3]; a // 1 b // 2 c // 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 // [] //---------- 不完全解构，但成功 let [x, y] = [1, 2, 3]; x // 1 y // 2 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4 //---------- 解构失败 let [foo] = []; let [bar, foo] = [1]; foo // undefined //---------- 报错，等号右边不是数组（或者严格说，不是可遍历的结构） let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};
二、对象的解构赋值
1.标准写法：
let { foo: aoo, bar: boo } = { foo: "aaa", bar: "bbb" };
简写：
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
注意： 对象的结构不需要像数组那样注重顺序，只需要注意保证变量（等号左边）名与对象属性（等号右边）名相同即可；
2.如果变量名和属性名不一致，必须写成下面的格式：(注意变量声明时的顺序以及使用的符号)
let { foo: css } = { foo: 'aaa', bar: 'bbb' };
css// "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
3.对象的嵌套解构
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
我承认，一开始是看不懂的。
let 花括号中的 p 是模式，不是变量，同理，标准写法中也是这个原理；如果想要 p 作为变量进行赋值，可以写成：
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 ？
loc ？
start ？
答案如下：
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
// 上面的代码有三次解构赋值，分别是对 loc、 start、 line 三个属性的解构赋值；
// 最后一次对 line 属性的解构赋值之中，只有 line 是变量， loc 和 start 都是模式，不是变量；
还有一些符合规则但应用很少的情况就不列举，详情请移步：字符串的解构赋值-阮一峰 ;
三、关于以上两种解构的默认值
数组解构的默认值：
let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
es 6 的内部使用严格相等运算符（===），判断一个位置是否有值。只有严格等于 undefined，默认值才会生效。
let [x = 1] = [undefined]; x // 1 let [x = 1] = [null]; x // null
对象解构的默认值：
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 = 'Something went wrong' } = {};
msg // "Something went wrong"
同样遵守严格相等的模式：
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
四、字符串的解构赋值
const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o"
上例中，在解构时，字符串被转换成了一个类似数组的对象。
这个类似数组的对象都有一个 length 属性，可以直接对这个属性解构赋值：
let {length : len} = 'hello';
len // 5
五、数值和布尔值的解构赋值
解构赋值时，如果等号右边的数值和布尔值，则会先转成对象：
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
上例中，数值和布尔值的包装对象都有 toString 属性，因此变量 s 都能取到值。
解构赋值的规则（实质）是：只要等号右边的值不是对象或者数组，就先将其转化成对象。而由于 undefined 和 null 无法转成对象，故对他们的解构赋值都会报错。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
六、函数参数的解构赋值
函数的参数也可以使用解构赋值。
// 1.
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
// 2.
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
//3.
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]