7 个解构赋值绝妙用法，让你的 JavaScript 代码量减少 50%
解构赋值是 ES6（ECMAScript 2015）引入的一项强大特性，它允许我们从数组或对象中快速提取值并赋给变量。掌握这些技巧不仅让代码更加简洁优雅，还能显著提升开发效率。
1. 交换变量值 - 无需临时变量
传统方式需要一个临时变量：
let a = 10;
let b = 20;
let temp = a;
a = b;
b = temp;
console.log(a, b); // 20 10
使用解构赋值：
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b); // 20 10
一行代码就完成交换，直观易懂。
2. 提取对象属性 - 告别重复访问
传统方式：
const user = {
name: '张三',
age: 28,
email: 'zhangsan@example.com',
address: { city: '北京', street: '朝阳区' }
};
const name = user.name;
const age = user.age;
const email = user.email;
const city = user.address.city;
解构赋值方式：
const { name, age, email, address: { city } } = user;
console.log(name, age, email, city);
一行代码替代多行赋值，同时保持清晰。
3. 函数参数解构 - 灵活处理选项参数
当函数接收多个选项参数时，解构赋值非常方便：
function createUser({ name = '匿名', age = 18, isActive = true } = {}) {
console.log(name, age, isActive);
}
createUser({ name: '李四', age: 25 }); // 李四 25 true
createUser(); // 匿名 18 true
支持默认值，调用者可按任意顺序提供参数。
4. 数组解构与剩余元素 - 批量处理数据
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first, second); // 1 2
console.log(rest); // [3, 4, 5]
特别适合处理 API 返回的数据或需要拆分数组的场景。
5. 返回多个值 - 函数返回值优化
function calculate(a, b) {
return [a + b, a * b, a - b];
}
const [sum, product, diff] = calculate(5, 3);
console.log(sum, product, diff); // 8 15 2
调用者只提取需要的值，提高函数灵活性。
6. 动态属性名与别名 - 灵活处理数据
const key = 'score';
const student = { name: '王五', score: 95 };
// 为变量指定别名
const { name: studentName, [key]: studentScore } = student;
console.log(studentName, studentScore); // 王五 95
方便处理 API 数据或整合不同数据源。
7. 解构与迭代 - 优雅处理嵌套数据
const users = [
{ id: 1, name: '张三', age: 28 },
{ id: 2, name: '李四', age: 32 },
{ id: 3, name: '王五', age: 45 }
];
// forEach 中解构
users.forEach(({ name, age }) => {
console.log(`用户: ${name}, 年龄: ${age}`);
});
// map 中解构
const userNames = users.map(({ name }) => name);
console.log(userNames); // ['张三', '李四', '王五']
处理大型数据集合时，让代码更加清晰简洁。
总结
解构赋值的这些技巧能让你：
- 减少重复代码
- 提高代码可读性
- 更灵活地处理函数参数和复杂数据结构
掌握它们，你的 JavaScript 代码量至少能减少 50%，同时更易于维护。