学会这 12 个解构用法，代码量能省一半-51CTO.COM

解构赋值是 ES6 带来的重要特性之一，掌握好它不仅能让代码更简洁，还能大大提高开发效率。分享 12 个实用的解构用法，让你的代码更优雅。

1. 数组基础解构

最基本的数组解构让我们能够轻松地提取数组元素：

// 基础解构
const [first, second] = [1, 2, 3];
console.log(first);  // 1
console.log(second); // 2

// 跳过元素
const [, , third] = [1, 2, 3];
console.log(third);  // 31.
2.
3.
4.
5.
6.
7.
8.

2. 对象解构重命名

当我们需要避免命名冲突时，可以给解构的属性起新名字：

const person = {
  name: '张三',
  age: 25
};

const { name: userName, age: userAge } = person;
console.log(userName); // '张三'
console.log(userAge);  // 251.
2.
3.
4.
5.
6.
7.
8.

3. 设置默认值

解构时可以设置默认值，防止取到 undefined：

// 数组默认值
const [x = 1, y = 2] = [undefined, null];
console.log(x); // 1
console.log(y); // null

// 对象默认值
const { title = '默认标题', count = 0 } = {};
console.log(title); // '默认标题'
console.log(count); // 01.
2.
3.
4.
5.
6.
7.
8.
9.

4. 嵌套解构

对于复杂的嵌套数据结构，我们可以使用嵌套解构：

const user = {
  id: 1,
  info: {
    name: '李四',
    address: {
      city: '北京'
    }
  }
};

const { info: { name, address: { city } } } = user;
console.log(name); // '李四'
console.log(city); // '北京'1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

5. 结合扩展运算符

扩展运算符配合解构使用，能够轻松处理剩余元素：

6. 函数参数解构

在函数参数中使用解构可以让代码更清晰：

7. 动态属性解构

可以使用计算属性名进行解构：

8. 解构用于交换变量

使用解构可以优雅地交换变量值：

9. 链式解构赋值

可以在一行中进行多个解构赋值：

10. 解构配合正则匹配

在处理正则表达式结果时，解构特别有用：

11. 解构导入模块

在导入模块时，解构可以只引入需要的部分：

12. 条件解构

结合空值合并运算符，可以实现条件解构：

const data = null;
const { value = 'default' } = data ?? {};
console.log(value); // 'default'1.
2.
3.

欢迎补充。