解构是 ES6 引入的一种语法，它允许从数组或对象中快速提取值，并将这些值赋给变量。解构使代码更加简洁、可读性更强，特别是在处理复杂的数据结构时。
解构赋值分类
- 数组解构赋值
- 对象解构赋值
- 嵌套解构
- 默认值
- 剩余（Rest）解构
1. 数组解构赋值
基础用法
从数组中按顺序提取值，赋给变量：
const arr = [1, 2, 3];
const [a, b, c] = arr;console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
跳过元素
可以通过省略的位置跳过某些元素：
const arr = [1, 2, 3, 4];
const [a, , c] = arr; // 跳过第二个元素console.log(a); // 1
console.log(c); // 3
结合剩余操作符
将数组的剩余部分赋值给变量：
const arr = [1, 2, 3, 4];
const [a, ...rest] = arr;console.log(a); // 1
console.log(rest); // [2, 3, 4]
2. 对象解构赋值
基础用法
从对象中提取值，变量名需与对象的键名一致：
const obj = { name: "John", age: 30 };
const { name, age } = obj;console.log(name); // "John"
console.log(age); // 30
修改变量名
通过 : 指定变量名：
const obj = { name: "John", age: 30 };
const { name: userName, age: userAge } = obj;console.log(userName); // "John"
console.log(userAge); // 30
结合默认值
在解构时为变量设置默认值：
const obj = { name: "John" };
const { name, age = 25 } = obj;console.log(name); // "John"
console.log(age); // 25 （age 默认值）
提取嵌套对象
可以解构嵌套对象：
const obj = { user: { name: "John", age: 30 } };
const { user: { name, age } } = obj;console.log(name); // "John"
console.log(age); // 30
3. 嵌套解构
嵌套数组
数组中嵌套数组的解构：
const arr = [1, [2, 3]];
const [a, [b, c]] = arr;console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
嵌套对象
对象中嵌套对象的解构：
const obj = { a: { b: { c: 10 } } };
const { a: { b: { c } } } = obj;console.log(c); // 10
4. 默认值
数组默认值
解构时如果值为 undefined，会使用默认值：
const arr = [1];
const [a, b = 2] = arr;console.log(a); // 1
console.log(b); // 2
对象默认值
同样适用于对象解构：
const obj = { name: "John" };
const { name, age = 30 } = obj;console.log(name); // "John"
console.log(age); // 30
5. 剩余（Rest）解构
数组中的剩余
可以通过 ... 操作符收集数组中的剩余元素：
const arr = [1, 2, 3, 4];
const [a, ...rest] = arr;console.log(a); // 1
console.log(rest); // [2, 3, 4]
对象中的剩余
收集对象中未解构的属性：
const obj = { name: "John", age: 30, gender: "male" };
const { name, ...rest } = obj;console.log(name); // "John"
console.log(rest); // { age: 30, gender: "male" }
6. 结合函数参数解构
数组解构参数
函数参数直接解构：
function sum([a, b]) {return a + b;
}console.log(sum([1, 2])); // 3
对象解构参数
通过对象解构指定参数：
function greet({ name, age }) {return `Hello, ${name}. You are ${age} years old.`;
}console.log(greet({ name: "John", age: 30 }));
// "Hello, John. You are 30 years old."
7. 解构的常见应用场景
交换变量值
let a = 1, b = 2;
[a, b] = [b, a];console.log(a); // 2
console.log(b); // 1
从函数返回值中提取
function getCoordinates() {return [10, 20];
}const [x, y] = getCoordinates();
console.log(x, y); // 10, 20
从对象中提取部分值
const user = { id: 1, name: "John", age: 30 };
const { id, name } = user;console.log(id); // 1
console.log(name); // "John"
设置默认配置
const config = { width: 800 };
const { width, height = 600 } = config;console.log(width); // 800
console.log(height); // 600
总结
解构赋值是 JavaScript 中非常强大的语法工具，可以大幅简化代码，特别是在处理复杂数据结构、函数参数和默认值时。掌握数组和对象解构是写高效 JavaScript 的重要技能！
