副队长ES6+教程(3)--解构赋值

点此查看 所有教程、项目、源码导航

[1. 背景介绍](#1. 背景介绍)
[2. 数组解构](#2. 数组解构)
- [2.1 基础用法](#2.1 基础用法)
- [2.2 跳过元素](#2.2 跳过元素)
- [2.3 默认值](#2.3 默认值)
- [2.4 剩余运算符](#2.4 剩余运算符)
[3. 对象解构](#3. 对象解构)
- [3.1 基础用法](#3.1 基础用法)
- [3.2 重命名](#3.2 重命名)
- [3.3 默认值](#3.3 默认值)
- [3.4 剩余运算符](#3.4 剩余运算符)
[4. 函数参数解构](#4. 函数参数解构)
[5. 使用场景与注意事项](#5. 使用场景与注意事项)
[6. 小结](#6. 小结)

1. 背景介绍

在没有解构赋值之前，如果想要取出对象、数组里面的值，只能通过下标或者属性名逐一获取，代码写起来重复冗长。

在小型脚本里尚可接受，但在 Vue 这类项目中，我们经常从接口、props、组合式函数中批量取出数据，如果一直使用原始写法，代码会显得繁琐，也更容易出现拼写错误。

解构赋值就是为批量提取成员而生的语法，它简洁直观，也是 Vue 源码、业务组件里出现频率极高的特性。

数组解构依靠位置顺序进行匹配，把数组中的元素依次赋值给变量。

js 复制代码

const arr = [10, 20, 30];
const [a, b, c] = arr;
console.log(a, b, c); // 输出：10 20 30

变量会按照先后顺序，依次拿到数组对应位置的值。

如果不需要某一项，可以直接空置位置，用逗号占位。

js 复制代码

const arr = [1, 2, 3, 4];
const [first, , third] = arr;
console.log(first, third); // 输出：1 3

当对应位置的值为 undefined，可以触发默认值。

js 复制代码

const arr = [100];
const [x, y = 200] = arr;
console.log(y); // 输出：200

使用 ... 收集剩下所有元素，只能放在最后一个变量。

js 复制代码

const [h, ...rest] = [1, 2, 3, 4];
console.log(rest); // 输出：[2, 3, 4]

对象解构不依赖顺序，依靠属性名匹配，这也是开发中最常用的形式。

变量名和对象属性名保持一致，即可直接取值。

js 复制代码

const user = {
  name: "张三",
  age: 22
};
const { name, age } = user;
console.log(name, age); // 输出：张三 22

如果想要使用别的变量名，可以使用冒号进行重命名。

js 复制代码

const user = {
  name: "张三"
};
const { name: username } = user;
console.log(username); // 输出：张三

属性不存在或者值为 undefined，可以设置默认值。

js 复制代码

const user = {
  name: "李四"
};
const { name, gender = "未知" } = user;
console.log(gender); // 输出：未知

使用 ... 收集剩下的全部属性，同样只能放在末尾。

js 复制代码

const obj = { a: 1, b: 2, c: 3 };
const { a, ...other } = obj;
console.log(other); // 输出：{ b: 2, c: 3 }

解构可以直接写在函数的形参位置，在 Vue 接收 props、封装工具函数时非常常用。

js 复制代码

function printUser({ name, age }) {
  console.log(name, age);
}
const u = { name: "王五", age: 18 };
printUser(u); // 输出：王五 18

也可以搭配默认值一起使用：

js 复制代码

function showInfo({ title = "默认标题" } = {}) {
  console.log(title);
}
showInfo(); // 输出：默认标题

解构赋值简化了批量提取数据的代码，让代码更加清爽。在 Vue 开发里，它属于高频语法，熟练掌握之后，阅读组件代码、抽取参数都会轻松很多。对象解构的重命名、默认值、参数解构，是实际项目中最容易踩坑的地方，需要多加练习。