一、基本概念
为什么需要解构呢，先来看一个例子：
const player = {
name: 'kobe',
age: 40,
honor: {
MVP: 1,
FMVP: 2,
champion: 5
}
};
function mamba(player) {
console.log('name:', player.name);
console.log('age:', player.age);
console.log('MVP:', player.honor.MVP);
console.log('FMVP:', player.honor.FMVP);
console.log('champion:', player.honor.champion);
}
mamba(player);
这样写也能实现预期效果，但是代码看起来比较冗余。并且，如果对象内部嵌套较深时，那么对象的访问链就会变得很长。虽然这并不是什么大问题，但是使用解构赋值会让代码变得更简单和易读。
下面就来看看什么是解构赋值。MDN 中对解构赋值的描述：
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性值从对象/数组中取出,赋值给其他变量。
实际上，结构赋值就是将复杂的结构分解为简单的部分。解构赋值语法可以用于变量声明或者变量赋值。除此之外，还可以使用嵌套的解构赋值语法来处理嵌套结构。
我们对上面例子进行解构赋值后的例子为：
function mamba({name, age, honor: {MVP, FMVP, champion}}) {
console.log('name:', name);
console.log('age:', age);
console.log('MVP:', MVP);
console.log('FMVP:', FMVP);
console.log('champion:', champion);
}
是不是有种40岁中年油腻大叔变成20岁年轻小伙的即视感
二、解构分类
根据MDN对解构赋值的定义，我们可以将解构赋值分为两大类：
- 对象解构
- 数组解构
下面就分别来看看这两种解构赋值。
1. 对象的解构赋值
对象解构又称为对象属性分配模式，它允许我们将对象的属性值分配给相应的变量。它有两种写法：
let obj = {kobe: 24, jordan: 23, james: 6};
let {kobe: mamba, jordan: goat, james: king} = obj;
console.log(mamba, goat, king)
let {kobe, jordan, james} = obj;
console.log(kobe, jordan, james)
- 第一种（第4行）是对象解构的完整形式，对象的每个属性都将被分配一个变量，其中冒号前面的是源对象中的属性，冒号后面的是要赋值属性;
- 第二种（第7行）是对象解构的简写形式，对象的属性与要分配的属性一致时可以使用这种形式。
如果需要给已有变量赋值，需要特别注意：
let obj = {kobe: 24, jordan: 23, james: 6};
let kobe = 0, jordan = 0, james = 0;
// console.log(mamba, goat, king)
({kobe, jordan, james} = obj);
console.log(kobe, jordan, james)
这里需要注意，需要将赋值表达式使用括号括起来，如果省略，解构对象将被视为一个块语句，而块语句时不能放在赋值表达式左侧的,没有办法进行赋值的操作。
当使用解构赋值时，可以给变量传递一个默认值，我们给了一个默认值，分配的对象属性为undefined，那么就会使用默认值
注意： 这里必须是 '===' 才行，null，'',0, false都是不生效的,
let object = { kobe: 0, jordan: null, james: undefined, durant: false, curry: '' }
function run({ kobe = 'kobe', jordan = '23', james = '6', durant = '35', curry = '30' }) {
console.log('kobe', kobe) // 0
console.log('jordan', jordan) // null
console.log('james', james) // 6
console.log('durant', durant) // false
console.log('curry', curry) // ''
}
run(object)
如果右边的值为null或undefined如何赋初始值呢？(加上 || {} 即可)
var obj = null;
const { a = 1 } = obj || {}
对象和数组解构赋值时，默认值生效的条件是: 严格等于（===）undefined
对象解构：
let { a = 1 } = {a: undefined}; // a: 1
let { a = 1 } = {a: null}; // a: null
数组的解构：
let [a=1] = [undefined]; // a: 1
let [a=1] = [null]; // a: null
2. 数组的解构赋值
在使用数组解构时，实际上会使用迭代器将所需要的值与结构源分开。因此，我们可以对可迭代值使用数组结构，包括字符串、数组、集合、函数映射、DOM元素。我们还可以将解构赋值与扩展运算符结合使用，下面我们将一一举例说明。
（1）字符串
let player = 'kobe';
let [a, b] = player;
let [x, y, ...z] = player;
console.log(a, b); // k o
console.log(x, y, z); // k o ['b', 'e']
（2）数组
let numbers = [24, 23, 6];
let [kobe, jordan, james] = numbers;
console.log(kobe, jordan, james); // 24 23 6
（3）集合
let set = new Set().add('kobe').add('jordan').add('james')
let [a,b,c] = set
console.log(a,b,c) // kobe jordan james
（4）Map
let map = new Map().set('kobe', 24).set('jordan', 23);
let [kobe, jordan] = map;
console.log(kobe, jordan); // ['kobe', 24] ['jordan', 23]
在数组的解构中，存储变量的数组中的每个变量都会映射到解构数组上相同索引处的相应项。
如果解构中某一项不需要，可以使用逗号操作符进行分隔：
let number = [24, 23, 21]
const [,,duncun] = number
console.log(duncun) // 21
与对象解构一样，可以使用数组解构为局部变量设置默认值：
const number = [30];
const [harden = 13, green, bulter = 22] = number;
console.log(`harden: ${harden}, green: ${green}, bulter: ${bulter}`);
// harden: 30, green: undefined, bulter: 22
如果变量已经存在，可以这么写(无需括号包裹)：
let harden = 1, green = 2, bulter = 23
const number = [13, 12, 22];
[harden, green] = number;
console.log(`harden: ${harden}, green: ${green}, bulter: ${bulter}`);
// harden: 13, green: 12, bulter: 23
与对象解构不同的是，这里不需要括号将数组括起来。
如果给变量分配的值是undefined，那么就会使用默认值：
const [x = 1] = [undefined];
console.log(x); // 1
这里的默认值并不一定是一个固定值，它可以是一个计算属性：
function foo() {
return 1;
}
let obj1 = {x: 2};
let obj2 = {x: undefined};
let {x=foo()} = obj1;
console.log(x); // 2
let {x=foo()} = obj2;
console.log(x); // 1
如果我们想将数组中的一些元素分配给变量，而将数组中的其余项分配给特定的变量就可以这样做：
let [kobe,...info] = ["mamba", "never" , "out"];
console.log(kobe); // "mamba"
console.log(info); // ["never" , "out"]
三、嵌套解构
上面我们说的解构的知识普通的数组和对象。实际上，解构赋值可以用于嵌套数组和嵌套对象。
const player = {
name: 'kobe',
age: 40,
honor: {
MVP: 1,
FMVP: 2,
champion: 5
}
};
const {name, age, honor: {MVP, FMVP, champion}} = player
再来看一个嵌套数组解构的例子：
let numbers = [23, [21, 24, 6], 33];
let [jordan1, [duncun, kobe, james], bird] = numbers;
console.log(jordan, duncun, kobe, james, bird); // 23 21 24 6 33
四、使用技巧
1. 函数解构
（1）解构函数参数
可以对函数参数使用解构赋值：
function add([a, b]) {
console.log(a + b);
}
add([8, 24]); // 32
function log({x, y}) {
console.log(x, y);
}
log({x: 8, y: 24}); // 8 24
可以对函数返回值使用解构赋值：
const player = {
name: 'kobe',
age: 40,
honor: {
MVP: 1,
FMVP: 2,
champion: 5
}
};
function mamba({name, age, honor: {MVP, FMVP, champion}}) {
console.log('name:', name);
console.log('age:', age);
console.log('MVP:', MVP);
console.log('FMVP:', FMVP);
console.log('champion:', champion);
}
mamba(player);
2. 循环中的解构
当我们需要循环中的对象键值时，也可以使用对象解构： 当我们需要循环中的对象键值时，也可以使用对象解构：
const players = [
{
'name': 'kobe',
'number': 24
},
{
'name': 'jordan',
'number': 23
},
{
'name': 'james',
'number': 6
},
];
for(let {name, number} of players){
console.log(name, number);
}
// kobe 24
// jordan 23
// james 6
3. 动态属性解构
很多时候我们不知道对象属性的key，只有运行时才知道。getPlayerInfo，它以一个key为参数，并返回相应的属性值：
getPlayerInfo('name');
getPlayerInfo('number');
getPlayerInfo，因此可以这样写：
const getPlayerInfo = key => {
const {[key]: value} = player;
return value;
}
需要注意，包裹key的方括号不能少，否则会出现undefined值。
4. 交换变量
数组结构一个很实用的功能就是实现交换局部变量。通常，我们会借助临时变量来实现变量的交换：
let width = 300;
let height = 400;
let temp = width;
width = height;
height = temp;
console.log(width, height)
如果使用数组的解构赋值，就会变得很简单：
let width = 300;
let height = 400;
[width, height] = [height, width];
console.log(width, height)
5. 数组拷贝
可以使用解构赋值和rest运算符来实现数组的拷贝：
const num = [24, 23, 6];
const [...newNum] = num;
// 等同于 const newNum = [...num]
console.log(newNum)
