一、数组的解构赋值
其实就理解成是一种变量声明赋值的方式，通过声明成跟赋值右侧一样的模式，里面的变量对应起来，然后赋值给左侧的变量。
1. 基本用法
let [a, b, c] = [1, 2, 3]
console.log(a);
//a=1
在解构的式子中，一般是赋值的右端是给出明确的数据内容以及模式；而被赋值的左端可以有一些形式上的变化，如下：
let [foo, [[bar], baz]] = [1, [[2], 3]];
let [ , , third] = ["foo", "bar", "baz"];
let [x, , y] = [1, 2, 3];
let [head, ...tail] = [1, 2, 3, 4];
// 此处左端用的是一个剩余运算符,将2，3，4全部赋值给tail。
let [x, y, ...z] = ['a'];
左端要在模式，我理解是数组的形式上保持跟右侧一致，里面的内容就按位置赋值。
set结构也可以使用数组的解构赋值。
let [a, b, c] = new Set([1,2,3])
console.log(a,b,c); //1 2 3
事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。--此处在学习 Generator 函数后深入理解一下。
2. 默认值
解构赋值允许指定默认值。
解构赋值的内部严格使用‘===’运算符来判断一个位置是否有值，只有对应的位置上是undefined，默认值才会生效。
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
默认值可以是解构的其他的变量，但是该变量必须是已经声明的
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] = []; // ReferenceError: y is not defined
二、对象的解构
解构失败对象对应的属性值是undefined。
对象解构可以将现有对象的方法赋值给某个变量。
const {log} = console;
log(111); // 111
如果变量的名字不相同，必须要写成这样的形式
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 obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
这里的p并没有赋值为数组，因为这里的p只相当于模式，而不是变量，如果要为p赋值，要写成这样：
let { p, p: [x, { y }] } = obj;
对象解构赋值默认值生效的条件也是赋值端对应的变量是undefined。
数组也是对象，可以对数组的属性进行解构赋值。
三、字符串的解构赋值
字符串解构赋值其实就是将字符串转换成一个类似数组 的对象。
const [a,b,...c] = 'nihao'
console.log(a,b,c);
//n i [ 'h', 'a', 'o' ]
既然类似数组的对象，那么也跟数组一样是一个对象，其拥有的属性可以进行对象解构。
四、数值和布尔值的解构赋值
解构的规则是只要解构的右侧不是对象或者数组，那么就会先将其转换成对象，数值跟布尔值可以转换成Number和Boolean包装对象，这时它们会具备包装对象的属性：
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
上面的例子将包装对象的toString方法赋值给了变量s。
注意undefined跟null 不能转为对象，所以对他们进行解构赋值会报错。
五、函数参数的解构赋值
函数的参数也能进行解构赋值。
function add([x,y]) {
return x + y;
}
add([1,2])// return 3
形参表面上是数组，但是在实参传进去的时候进行了解构赋值，分别对x，y进行了赋值，解构嘛。
函数的参数解构赋值可以设置默认值。
需注意：
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
这种写法其实是在为函数的形参设置默认值，而不是为变量x，y设置默认值，变量传入什么，形参接收什么，就会导致下面这种情况：
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
只有当实参什么都不传的时候，上面那种写法设置的默认值才算有用。
正确的写法：
function move({x = 0, y = 0} = {}) {
return [x, y];
}
六、圆括号问题
可以使用圆括号的情况只有一种：
- 赋值语句的非模式部分
[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确
不能使用圆括号的情况：
- 变量声明语句
- 函数参数中
- 赋值语句的模式中
七、变量解构的用途
1. 交换变量的值
let x = 1;
let y = 2;
[x,y] = [y,x]; //x=2;y=1;
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({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
4. 提取JSON的数据
在前端对后台的接口请求后返回的数据进行处理时。
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let {id,status,data:number} = jsonData;
console.log(id,status,number);
// 42 'OK' [ 867, 5309 ]
5. 函数参数的默认值
可以避免在函数体内部再写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 { SourceMapConsumer, SourceNode } = require("source-map");
