在 JavaScript 中，解构（Destructuring） 是 ES6 引入的一种强大而简洁的语法，用于从数组或对象中提取数据，并赋值给变量。 它改变了我们过去通过索引或属性名访问数据的方式，使代码更清晰、易读、可维护。
✅ 一句话总结
解构是一种从数组或对象中按规则提取数据并赋值给变量的语法特性。数组解构基于位置匹配，对象解构基于属性名匹配。
✅ 一、数组解构（Array Destructuring）
🔹 基本用法：
const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
📌 特点：
- 按照元素的位置顺序进行匹配；
- 左侧变量与右侧数组索引一一对应；
🔹 跳过某些元素
可以通过留空的方式跳过中间元素：
const [a, , c] = [1, 2, 3];
console.log(a); // 1
console.log(c); // 3
🔹 默认值设置
如果数组中的某个元素是 undefined，可以设置默认值：
const [a = 10, b = 20] = [5];
console.log(a); // 5
console.log(b); // 20
🔹 不定参数（Rest Element）
使用 ... 获取剩余元素：
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]
⚠️ 注意：
...rest必须是最后一个元素，否则会报错。
✅ 二、对象解构（Object Destructuring）
🔹 基本用法：
const stu = {
name: 'Bob',
age: 24,
};
const { name, age } = stu;
console.log(name); // Bob
console.log(age); // 24
📌 特点：
- 按照属性名进行匹配；
- 变量名必须与属性名一致才能正确提取；
- 顺序不影响结果；
🔹 重命名变量
如果希望将属性值赋给不同名字的变量，可以使用冒号 :：
const { name: studentName, age: studentAge } = stu;
console.log(studentName); // Bob
console.log(studentAge); // 24
🔹 默认值设置
当属性不存在时，可以设置默认值：
const { gender = 'unknown' } = stu;
console.log(gender); // unknown（因为 stu 中没有 gender 属性）
🔹 嵌套结构解构
对象嵌套也可以解构：
const user = {
id: 1,
info: {
name: 'Tom',
address: {
city: 'Beijing',
zip: '100000'
}
}
};
const {
info: {
address: { city }
}
} = user;
console.log(city); // Beijing
🔹 函数参数解构
对象解构常用于函数参数中，提高可读性：
function printUser({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
printUser({ name: 'Jerry', age: 30 }); // Name: Jerry, Age: 30
还可以设置默认值：
function printUser({ name = 'Guest', age = 18 } = {}) {
console.log(`Name: ${name}, Age: ${age}`);
}
printUser(); // Name: Guest, Age: 18
✅ 三、数组 vs 对象解构对比表
| 类型 | 匹配依据 | 是否依赖顺序 | 支持默认值 | 支持重命名 | 典型应用场景 |
|---|---|---|---|---|---|
| 数组解构 | 索引位置 | ✅ 是 | ✅ 是 | ❌ 否 | 提取有序数据、函数返回多个值 |
| 对象解构 | 属性名称 | ❌ 否 | ✅ 是 | ✅ 是（通过 :） | 配置项、API 返回数据、函数参数 |
✅ 四、一句话总结
解构是一种优雅的数据提取方式：
- 数组解构按照顺序提取数据；
- 对象解构根据属性名提取数据；
- 它们都可以配合默认值、嵌套结构和不定参数使用，极大地提升了代码的简洁性和可维护性。
💡 进阶建议
- 在 React/Vue 中广泛用于从 props/state 中提取数据；
- 使用 TypeScript 可以更好地支持解构的类型推导；
- 在 Redux、Axios 等库中常见对象解构用于提取响应数据；
- 避免过度嵌套解构，影响代码可读性；
