数组和对象的解构

1.解构的理解

解构是ES6提供的一种新提取数据的模式，它允许我们从数组或对象中有针对性拿到想要的数据。这种方式让数据访问和赋值变得更加简洁和直观。

2.数组的解构

数组解构允许直接从数组中提取值，并将这些值赋给声明的变量。这避免了使用索引来访问数组元素的需要。

（1）基本用法

const [a, b, c] = [1, 2, 3];  
console.log(a); // 输出: 1  
console.log(b); // 输出: 2  
console.log(c); // 输出: 3

（2）不完全解构

不想提取数组中的所有元素，可以在解构时忽略某些元素。

const [, I, ] = [1, 2, 3]; // 变量名被省略了  
console.log(I); // 输出: 2

（3）默认值

解构时还可以为变量指定默认值，如果解构的元素不存在或其值为undefined，则会使用默认值。

const [x, y = 2] = [1];  
console.log(x); // 输出: 1  
console.log(y); // 输出: 2

（4）扩展运算符(...)与解构结合

const [one,...two]=[1,2,3,4,5];
console.log(one);  // 输出: 1
console.log(two);  // 输出: [2,3,4,5]
</script>

注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。(代码编辑器里也会标红)

const [...m,n]=[1,2,3,4,5];  // 报错SyntaxError: Rest element must be last element
const [Y,...X,Z]=[1,2,3,4,5]; // 报错

3.对象解构

对象解构比数组解构稍微复杂一些，与数组解构不同，对象解构时需要指定要提取的属性名。

（1）基本用法

const person = { name: 'Alice', age: 30 };  
const { name, age } = person;  
console.log(name); // 输出: Alice  
console.log(age);  // 输出: 30

（2）重命名属性

在解构时，我们还可以为提取的属性指定一个新的变量名。在例子中，使用了firstName: name的语法来将firstName属性的值赋给变量name。

const person = { firstName: 'Alice', age: 30 };  
const { firstName: name, age } = person;  
console.log(name); // 输出: Alice  
console.log(age);  // 输出: 30

（3）默认值

与数组解构类似，对象解构时也可以为变量指定默认值。在例子中，由于person对象中没有age属性，所以age变量被赋予了默认值25。

const person = { name: 'Alice' };  
const { name, age = 25 } = person;  
console.log(name); // 输出: Alice  
console.log(age);  // 输出: 25

（4）深度嵌套对象的指定属性读取

对于深度嵌套的对象，读取指定属性方法如下：

1）利用老方法读取，逐层解构

const action = {
    address:{
        man:{
            sex: '男',
            age: 20,
        }
    }
}
const {address} = action;
const {man} = address;
const {sex} = man;
console.log(sex); // 男

2）简便方法，通过冒号加目标属性名的形式{属性名:{属性名:{属性名}} ，进行解构，直到拿到目标想要数据。

const action = {
    address:{
        man:{
            sex: '男',
            age: 20,
        }
    }
}
const {address:{man:{ages}}}=action;
console.log(ages); // 20