前言
解构赋值是对赋值运算符的扩展，它针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了，也方便了复杂对象中数据字段获取。日常开发中，我们常通过解构对象对接口返回的数据进行处理，但其实解构赋值具有二十多种用法，能帮助我们提升开发效率，简化代码数量😊。
一、解构对象
注意： 解构对象时通过属性名进行匹配赋值，而解构数组时通过位置进行匹配赋值。
1. 普通对象解构
const obj = {
name: "VeryCool",
age: 18,
};
const { name, age } = obj;
console.log(name, age); // 输出"VeryCool" 18
2. 嵌套对象解构
const obj = {
name: "VeryCool",
like: {
first: "稀土",
second: "掘金",
},
};
const { name, like:{first} } = obj;
console.log(name, first); // 输出："VeryCool" 稀土
3. 不完全解构/部分解构
理解： 通过解构赋值结合扩展运算符，可以对对象进行重构，巧妙的删除对象中不要的属性。
const obj = {
name: "VeryCool",
age: 18,
like:'掘金'
};
const { name, ...newObj } = obj;
console.log(newObj); // 输出：{age: 18, like: '掘金'}
4. 更改属性名
注意： 解构对象时可以对属性名进行更改，更改后读取原属性名将返回 xxx is not defined。
const obj = {
name: "VeryCool",
age: 18,
};
const { name: coolName, age: coolAge } = obj;
console.log(name, age); // 输出：is not defined
console.log(coolName, coolAge); // 输出："VeryCool" 18
5. 指定对象的解构默认值
理解： 使用解构赋值时，如果解构的属性不存在，可以通过等号进行默认值赋值。
注意： 如果解构的属性存在，不会更改原属性值。
const obj = {
name: "VeryCool",
age: 18,
};
const { name, age, like = "掘金" } = obj;
console.log(name, age, like); // 输出："VeryCool" 18 "掘金"
6. 变量赋值
理解： 通过解构赋值语法可以对已声明未赋值的变量进行赋值。
let name;
let age;
({ name, age } = { name: "VeryCool", age: 18 });
console.log(name, age); // 输出：VeryCool" 18
二、解构数组
注意： 解构数组时通过位置进行匹配赋值，而解构对象时通过属性名进行匹配赋值。
例如： react中的const [value,setValue]=useState() 就是对引入的useState进行解构。
1. 批量为变量赋值
理解： 通过解构赋值语法可以实现批量为变量进行赋值或一次定义多个变量。
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出：1 2 3
2. 嵌套数组赋值
let [a, [[b], c]] = [1, [[2], 3]];
console.log(a, b, c); // 输出：1 2 3
3. 取数组部分元素
理解： 解构数组时，可以根据位置，只读取数组的部分元素。
const arr = [1, 2, 3, 4, 5, 6];
const [num1, num2, num3] = arr;
console.log(num1, num2, num3); // 输出：1 2 3
4. 取指定位置的元素
理解： 解构数组时，可以空开某些位置的元素，用英文逗号分开即可，做到取指定位置的值。
let [a, , c] = [1, 2, 3];
console.log(a, c); // 输出：1 3
5. 交换两个变量的值
理解： 解构数组时，可以交换两个变量的位置，实现交换变量值。
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 输出：2
console.log(b); // 输出：1
注意： 由于数组解构通过位置进行匹配，所以多个变量也可以任意通过交换位置做到交换值。
let a = 1;
let b = 2;
let c = 3;
[a, b, c] = [b, c, a];
console.log(a); // 输出：2
console.log(b); // 输出：3
console.log(c); // 输出：1
6. 用数组的值替换变量的值
理解： 可以利用解构数组，实现用数组指定位置的值，修改变量的值。
const arr = [1, 2, 3, 4];
let num1 = "稀土";
let num2 = "掘金";
[,,num1,num2] = arr; // 用数组3,4位的值替换num1,num2的值
console.log(num1, num2); // 输出：3 4
7. 用解构对象的方式解构数组为变量赋值
理解： 可以用解构对象的方式解构数组，对象的key为数组index，对象的value为数组的值,通过这种方式，可以更轻松地实现定义变量。
const arr = ["稀土", "掘金", 3, 4];
const { 0: num1, 1: num2 } = arr; // 用数组下标0,1的值，为num1,num2赋值
console.log(num1, num2); // 输出："稀土" "掘金"
8. 判断数组是否为空
理解： 可以在结构数组是，定义一个有默认值的变量（如：tip="数组为空"）,如果数组为空，就会输出默认值，如果数组不为空，则会用数组对应位置的值替换声明的变量的值。
// 数组不为空
const arr = ["稀土", "掘金", 3, 4];
const [tip="数组为空"] = arr;
console.log(tip); // 输出："稀土"
// 数组为空
const arr = [];
const [tip="数组为空"] = arr;
console.log(tip); // 输出："数组为空"
9. 拷贝数组
理解： 类似对象的浅拷贝，利用扩展运算符也可以实现数组的浅拷贝。
const arr = [1, 2, 3, 4, 5, 6];
const [...newArr] = arr;
console.log(newArr); // 输出：[1,2,3,4,5,6]
10. 不完全结构/部分解构
理解： 通过解构赋值结合扩展运算符，可以对数组进行重构，获取数组中想要的部分。
const arr = [1, 2, 3, 4, 5, 6];
const [num1, num2, ...newArr] = arr;
console.log(num1, num2); // 输出：[1,2]
console.log(newArr); // 输出：[3,4,5,6]
11. 嵌套数组解构
理解： 可以解构嵌套数组任意元素，注意位置即可。
const arr = [1, 2, 3, ["稀土", "掘金"]];
const [num1, num2, , [, num3]] = arr; // 解构第一层数组的前两个值和第二层数组的第二个值
console.log(num1, num2, num3); // 输出：1 2 '掘金'
三、解构函数
1. 解构函数返回值
理解： 当函数返回一个数组时，使用解构语法，可以更方便的处理返回值。
function fun() {
return [1, 2, 3];
}
const [a, b, c ] = fun();
console.log(a, b ,c); // 输出：1 2 3
2. 解构函数参数
function fun([a, b]) {
console.log(a + b); // 输出：3
}
fun([1, 2]);
四、解构字符串
1. 基本用法
理解： 解构字符串时，字符串的每一个字符会处理成类似数组的每一个元素。
const [a, b, c, d] = "稀土掘金";
console.log(a, b, c, d); // 输出：稀 土 掘 金
2. 解构字符串数组
理解： 解构数组字符串和遍历相结合，在item外加上中括号后按照解构数组的写法，可以实现遍历每个元素的指定位置。
const arr = ["稀土","掘金","Very","Cool"];
// 解构arr每个元素的第二个字符
arr.forEach(([,item])=>{
console.log(item); // 输出：土 金 e o
})
五、解构模块
1. 基本用法
理解： 在ES6模块化使用分别暴露和统一暴露，引入模块时，也使用了解构赋值。
import { 模块1 , 模块2 } from '路径'
