12种JavaScript 解构用法让你的代码量直接减半

解构（Destructuring） 是ES6引入的一项强大特性，能帮助你从数组或对象中快速提取值并赋值给变量。它能让代码更简洁、可读性更强。

一、数组解构

1. 基础用法

通过模式匹配提取数组元素：

const colors = ['红', '绿', '蓝'];const [first, second, third] = colors;
console.log(first);  // '红'console.log(second); // '绿'console.log(third);  // '蓝'

2. 跳过元素

用空位忽略不需要的元素：

const numbers = [1, 2, 3, 4];const [a, , , d] = numbers;
console.log(a); // 1console.log(d); // 4

3. 默认值

防止解构失败（变量数量 > 数组长度）：

const fruits = ['苹果'];const [fruit1, fruit2 = '香蕉'] = fruits;
console.log(fruit1); // '苹果'console.log(fruit2); // '香蕉'（默认值生效）

4. 剩余运算符

用...收集剩余元素：

const scores = [98, 87, 76, 65];const [top1, ...others] = scores;
console.log(top1);   // 98console.log(others); // [87, 76, 65]

二、对象解构

5. 基础用法

根据属性名匹配值：

const user = { name: 'Alice', age: 25 };const { name, age } = user;
console.log(name); // 'Alice'console.log(age);  // 25

6. 重命名变量

解决变量名冲突问题：

const { name: userName, age: userAge } = user;console.log(userName); // 'Alice'

7. 默认值

应对属性不存在的情况：

const { gender = '未知' } = user;console.log(gender); // '未知'

8. 嵌套对象解构

逐层提取深层属性：

const student = {  info: {    id: 101,    major: '计算机'  }};const { info: { id, major } } = student;
console.log(id);    // 101console.log(major); // '计算机'

三、函数参数解构

9. 直接解构参数

让函数参数更直观：

function printUser({ name, age }) {  console.log(`${name}今年${age}岁`);}
printUser({ name: 'Bob', age: 30 }); // "Bob今年30岁"

10. 参数默认值

防止参数缺失报错：

function showSettings({ theme = 'light', fontSize = 14 } = {}) {  console.log(`主题：${theme}, 字号：${fontSize}`);}
showSettings(); // "主题：light, 字号：14"

11. 变量交换

无需临时变量：

let x = 1, y = 2;[x, y] = [y, x];console.log(x, y); // 2 1

12. 循环中的解构

遍历数组时直接提取值：

const users = [  { name: 'Tom', age: 20 },  { name: 'Jerry', age: 22 }];
for (const { name, age } of users) {  console.log(`${name}: ${age}岁`);}