掌握 JavaScript 解构赋值的指南
JavaScript 的解构赋值是一种从数组 or 对象中提取值并将其赋给变量的语法。这种语法让我们从复杂的数据结构中提取数据变得简洁和易读。解构赋值可以用在数组、对象以及嵌套结构中。
解构是：使用 ES6 的一种语法规则，将一个对象或数组的某个属性提取到某个变量中。
解构不会对被解构的目标造成任何影响。
1. 数组解构赋值
数组解构赋值允许我们将数组中的值提取到变量中。基本语法如下：
const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3如果数组的某个位置没有值，可以为其设置默认值：
const [x = 1, y = 2] = [10];
console.log(x); // 10
console.log(y); // 2使用 ... 运算符可以将剩余的元素放入一个数组中：
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5]2. 对象解构赋值
对象解构赋值允许我们将对象的属性值提取到变量中。基本语法如下：
const { name, age } = { name: 'Alice', age: 18 };
console.log(name); // 'Alice'
console.log(age); // 18如果对象中没有指定的属性，可以为其设置默认值：
const { name, age = 30 } = { name: 'Bob' };
console.log(name); // 'Bob'
console.log(age); // 30可以给解构出来的属性重新命名：
const { name: fullName, age: years } = { name: 'Charlie', age: 35 };
console.log(fullName); // 'Charlie'
console.log(years); // 35可以解构嵌套的对象：
const person = {name: 'Dave',address: {city: 'New York',zip: '10001'}
};const { name, address: { city, zip } } = person;
console.log(name); // 'Dave'
console.log(city); // 'New York'
console.log(zip); // '10001'在嵌套解构中设置默认值：
const person = {name: 'Eve',address: {}
};const { name, address: { city = 'Unknown' } } = person;
console.log(name); // 'Eve'
console.log(city); // 'Unknown'3. 解构赋值在函数参数中的应用
解构赋值可以直接在函数参数中使用，简化函数调用：
function greet({ name, age }) {console.log(`Hello ${name}, you are ${age} years old.`);
}const user = { name: 'Frank', age: 4 };
greet(user); // Hello Frank, you are 4 years old.4. 解构赋值与变量交换
可以利用解构赋值来交换变量的值：
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 15. 注意点
5.1 默认值的计算
当使用默认值时，这些默认值是在解构赋值操作时计算的：
const { x = Math.random() } = {};
console.log(x); // 每次运行都可能是不同的值如果对象中的属性已经有值，则默认值不会被使用，只在目标属性为 undefined 时使用。
const { x = Math.random() } = {x: 10};
console.log(x); // 105.2 解构赋值中的 undefined 和 null
解构赋值仅对 undefined 提供默认值，不对 null 提供。如果对象的属性是 null，默认值不生效。
const { a = 1 } = { a: null };
console.log(a); // null5.3 解构赋值的深度
深度解构需要确保每一层的对象结构都存在。否则会引发错误：
const obj = { a: { b: 1 } };
const { a: { b, c = 2 } } = obj;
console.log(b); // 1
console.log(c); // 2// 如果 obj = {}，则会抛出错误
// const { a: { b, c = 2 } } = {};
5.4 解构赋值的计算顺序
在对象解构赋值中，计算顺序可能会影响结果：
const obj = { a: 1 };
const { a, b = a } = obj;
console.log(a); // 1
console.log(b); // 1
此处，a 赋值为 1，b 的默认值是 a，因此 b 的值是 1。
const obj = { a: 1, b: 2 };
const { a = 10, b = a } = obj;
console.log(a); // 1
console.log(b); // 2
此处，a 和 b 各自存在值，均不使用默认值。
5.5 解构赋值与函数参数
在函数参数中使用解构赋值时，要确保传入的参数结构与解构的变量名一致：
function func({ a, b }) {console.log(a, b);
}
func({ a: 1, b: 2 }); // 1 2
func({ a: 1 }); // 1 undefined
func({}); // undefined undefined5.6 解构赋值与函数默认参数
在函数的参数解构中使用默认值时，需要注意函数参数的默认值的顺序：
function func({ a = 1, b = a } = {}) {console.log(a, b);
}
func(); // 1 1
func({ a: 2 }); // 2 2
func({ b: 3 }); // 1 35.7 防止解构赋值错误
确保在解构赋值之前检查对象或数组是否存在。如果对象或数组是 null 或 undefined，尝试解构将会引发错误：
let obj = null;
// const { a } = obj; // 这会抛出错误obj = {};
const { a = 1 } = obj;
console.log(a); // 15.8 解构赋值中的计算属性名
如果需要解构具有动态计算属性名的对象，确保正确地使用方括号语法：
const key = 'b';
const obj = { a: 1, [key]: 2 };const { [key]: value } = obj;
console.log(value); // 2