定义
按照一定的规则，从 数组 跟 对象 中提取值（解构）赋值给变量，我们称之为 解构赋值。
解构赋值对实际开发过程中数据的处理跟赋值过程进行了语法上的代码简化。
例如现在有一个数组，我们想要获取其中的几个元素的值，以前要这么写
const arr = [1, 2, 3, 4, 5]
const a = arr[0]
const b = arr[1]
const c = arr[2]
console.log(a, b, c); // 1, 2, 3
有了解构赋值之后就可以简化代码
const [a, b, c] = [1, 2, 3, 4, 5]
console.log(a, b, c); // 1, 2, 3
对象也是如此
const obj = {
name: 'ch',
age: 20
}
const username = obj.name
const age = obj.age
console.log(username, age);
// 由于对象是根据属性名来获取值，所以我们需要支持定义别名
const { name: username, age } = {
name: 'ch',
age: 20
}
console.log(username, age);
我们省去了自己定义变量以及赋值的操作，大大简化了代码。
数组的解构赋值
数组在进行解构赋值时是根据元素的位置来取值的
基本使用
const [a, b, c] = [1, 2, 3, 4, 5]
console.log(a, b, c); // 1, 2, 3
可以间隔取值
const [a, b, ,c] = [1, 2, 3, 4, 5]
console.log(a, b, c); // 1, 2, 4
结合拓展运算符
const [a, ...b] = [1, 2, 3, 4, 5]
console.log(a, b); // 1, [2, 3, 4, 5]
如果对应位置匹配不到值就为 undefined
const [a, b, ...c] = [1]
console.log(a, b, c); // 1, undefined, []
赋默认值
我们在对数组进行解构赋值时也可以定义默认值，默认值只有在解构时获取不到值才会生效。
const [a, b, , c = 'a'] = [1, 2, 3]
console.log(a, b, c); // 1， 2， 'a'
const [a, b, c = 'a'] = [1, 2, 3]
console.log(a, b, c); // 1， 2， 3
嵌套数据的解构赋值
高级使用
对象的解构赋值
对象在进行解构赋值时是根据属性名来取值的，顺序无关紧要
基本使用
解构时如果获取不到对应的属性名则属性值为 undefined
const { age, name, hobby } = {
name: 'ch',
age: 20
}
console.log(name, age); // ch 20
console.log(hobby); // undefined
更多时候我们在获取对应的属性值想要使用自己定义的变量名，就可以自定义别名
const { age, name: username } = {
name: 'ch',
age: 20
}
console.log(username, age); // ch 20
