一、数组解构
1. 基本用法
可以按照数组元素的顺序将数组中的值提取到变量中。
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
2. 忽略某些元素
如果不想提取数组中的某些元素，可以使用逗号占位。
const [x, , z] = [1, 2, 3];
console.log(x); // 1
console.log(z); // 3
3. 剩余元素
使用扩展运算符...可以将剩余的元素收集到一个新数组中。
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5]
4. 交换变量值
利用数组解构可以很方便地交换两个变量的值。
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x); // 2
console.log(y); // 1
二、对象解构
1. 基本用法
根据对象的属性名来提取值并赋给变量，变量名需与属性名相同。
const obj = { name: "John", age: 30 };
const { name, age } = obj;
console.log(name); // 'John'
console.log(age); // 30
2. 自定义变量名
可以使用:为提取的变量指定不同的名称。
const { name: userName, age: userAge } = obj;
console.log(userName); // 'John'
console.log(userAge); // 30
3. 嵌套对象解构
对于嵌套的对象，也可以进行解构。
const nestedObj = {person: {name: "John",address: {city: "New York",},},
};
const {person: {name,address: { city },},
} = nestedObj;
console.log(name); // 'John'
console.log(city); // 'New York'
4. 默认值
当对象中不存在某个属性时，可以为解构的变量设置默认值。
const { gender = "Male" } = obj;
console.log(gender); // 'Male'
三、函数参数解构
1. 数组参数解构
在函数参数中使用数组解构，可以方便地获取函数传入的数组中的元素。
function sum([a, b]) {return a + b;
}
console.log(sum([1, 2])); // 3
2. 对象参数解构
在函数参数中使用对象解构，可以方便地获取函数传入的对象中的属性值。
function greet({ name, age }) {console.log(`Hello, I'm ${name} and I'm ${age} years old.`);
}
greet({ name: "John", age: 30 });
