开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天
1.数组的解构
基本用法
ES6允许按照一定模式（模式匹配），从数组和对象中提取值，对变量进行赋值，这被称为解构赋值，如下所示：
let [a., b, c] = [1, 2, 3];
let [foo] = [];
let [a, b] = [1];
console.log(foo); //undefined
console.log(b); //undefined
本质上就是模式匹配，只要等号两边的模式相同，左边的变量就会被赋予右边相对应的值，如果解构不成功，变量的值就等于undefined
默认值
解构赋值允许指定默认值
let [foo = true] = [];
console.log(foo); // output: true
let [x, y = 'b'] = ['a'];
console.log(x, y); //output: a, b
2.对象的解构赋值
对象的解构赋值，变量必须与属性同名，才能取到正确的值，如果解构失败，变量的值等于undefined
let {name, age} = { name: 'samba', age:22 }
console.log(name); // output: samba
console.log(age); //output: 22
let { age } = { name: 'samba' };
console.log(age); //output: undefined
默认值
对象的解构也可以指定默认值,默认值生效的条件是，对象的属性值严格等于undefined
let { x = 3 } = {};
console.log(x); //output: 3
3.字符串的解构赋值
字符串也可以解构赋值，在解构时，它会被当做一个类似数组的对象
const [a, b, c, d, e] = 'Hello';
console.log(a, b, c, d, e); //output: H e l l o
类似数组的对象都有一个length属性，因此也可以对length属性进行解构赋值
let { length: len } = 'Hello';
console.log(len); //output: 5
4.数值和布尔值的解构赋值
解构赋值时，如果等号右边是数值和布尔值，则会被转为对象再进行解构赋值。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
解构赋值的规则：只要等号右边的值不是对象或数组，就先将其转变为对象，由于undefined和null无法转为对象，所以对他们进行解构赋值会报错。
5.函数参数的解构
函数的参数也可以解构赋值，如下所示：
function add([x, y]) {
return x + y;
}
add([1, 2]);
add函数的数组参数[1,2]在传入的那一刻就被解构为变量x和变量y。
函数参数的解构也可以使用默认值,如下所示：
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x:3, y:8}); //output: [3,8]
move({x:3}); //output: [3,0]
move({}); //output: [undefined, undefined]
move(); //output: [0, 0]
函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和变量y的值，如果解构失败，x和y等于默认值。
function move({x, y} = {x: 0, y: 0}) {
return [x, y];
}
move({x:3, y:8}); //output: [3,8];
move({x:3}); //output: [3, undefined]
move({}); //output: [undefined, undefined]
move(); //output: [0, 0]
上面的代码为函数move的参数指定默认值，而不是为变量x和y指定默认值
6.圆括号情况
尽可能的不在解构赋值中使用圆括号
不能使用圆括号的情景
1、变量声明语句。2、函数参数。 3、赋值语句
可以使用圆括号的情景
赋值语句的非模式部分，可以使用圆括号。如下所示：
[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确
7.解构赋值的用途
交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x,y); //output: 2, 1
从函数返回多个值
一般情况函数只能返回一个值，想要返回多个值，只能放在数组或者对象里返回。有了解构赋值，可以将这些值方便的取出。
function example() {
return [1,2,3];
}
let [a, b, c] = example();
function example1() {
return {
foo: 1,
bar: 2,
}
}
let {foo, bar} = example1();
函数参数的定义
解构赋值可以将一组参数与变量名对应起来
//参数是一组有序的值
function f([x, y, z]) {....};
function f([1, 2, 3]);
//参数是一组无序的值
function func({x,y,z}) {...};
func({z:3, x:2, y:1});
提取JSON数据
解构赋值对于提取JSON对象中的数据，尤其有用
let jsonData = {
id: 42,
status: 'ok',
data: [1, 323]
};
let {id, status, data: number} = jsonData;
console.log(id, status, numer);
指定函数参数的默认值
function drawChart({ size = 'big', coords = { x:0, y: 0 }, radius = 25} = {}) {
console.log(size, coords, radius);
}
drawChart({
coords: { x: 18, y: 39 },
radius: 30,
}); //output: big, {x: 18, y: 39} 30
遍历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);
}
如果只想获取键名，或者只想获取键值，代码如下
for (let [key] of map) {
console.log(key);
}
for (let [, value] of map) {
console.log(value);
}
输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
