网站
引入
从数组或对象里取值赋给变量，是很常见的操作。以前只能一个一个取，如果字段多就很啰嗦。
解构赋值让你可以用一行代码把数组或对象里的值”拆”出来，直接赋给变量。
正文
定义
解构赋值是按照数组或对象的结构，把里面的值拆出来赋给对应的变量。
数组解构
按位置取值，变量名随意，顺序对应即可。
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a);
console.log(b);
console.log(c);可以跳过某些位置：
const [first, , third] = [1, 2, 3];
console.log(first);
console.log(third);对象解构
按属性名取值，变量名要和属性名一致。
const user = {
name: "Tom",
age: 18,
city: "北京"
};
const { name, age, city } = user;
console.log(name);
console.log(age);重命名
如果不想用属性名作为变量名，可以用 : 指定新名字。
const user = {
name: "Tom",
age: 18
};
const { name: userName, age: userAge } = user;
console.log(userName);
console.log(userAge);默认值
当解构的值是 undefined 时，会使用默认值。
const [a = 0, b = 0, c = 0] = [1, 2];
console.log(a);
console.log(b);
console.log(c);对象解构也支持默认值：
const { name = "匿名", age = 0 } = {};
console.log(name);
console.log(age);嵌套解构
数组或对象里嵌套了其他结构，也可以一层层解出来。
const data = {
user: {
name: "Tom",
address: {
city: "北京"
}
}
};
const { user: { name, address: { city } } } = data;
console.log(name);
console.log(city);嵌套数组解构：
const matrix = [
[1, 2],
[3, 4]
];
const [[a, b], [c, d]] = matrix;
console.log(a);
console.log(d);剩余模式（Rest）
用 … 把剩余的元素收集到一个数组里。
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first);
console.log(rest);对象也可以：
const { name, ...others } = {
name: "Tom",
age: 18,
city: "北京"
};
console.log(name);
console.log(others);函数参数解构
函数的参数也可以解构，特别适合接收配置对象。
function printUser({ name, age }) {
console.log(`名字：${name}，年龄：${age}`);
}
printUser({ name: "Tom", age: 18 });带默认值的参数解构：
function createUser({ name = "匿名", age = 0 } = {}) {
console.log(name);
console.log(age);
}
createUser();
createUser({ name: "Tom" });变量交换
解构赋值可以直接交换两个变量的值，不需要临时变量。
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a);
console.log(b);常见写法
| 写法 | 说明 |
|---|---|
const [a, b] = [1, 2] | 数组解构，按位置取值 |
const { name, age } = user | 对象解构，按属性名取值 |
const { name: userName } = user | 解构并重命名 |
const [a = 0] = [] | 带默认值的解构 |
const [first, …rest] = arr | 剩余模式，收集后面的元素 |
function fn({ name, age }) | 函数参数解构 |
例子
从 API 返回数据中提取字段
const response = {
status: 200,
data: {
users: [
{ id: 1, name: "Tom" },
{ id: 2, name: "Jack" }
],
total: 2
}
};
const { data: { users, total } } = response;
console.log(users);
console.log(total);函数返回多个值
function getUserInfo() {
return {
name: "Tom",
age: 18,
city: "北京"
};
}
const { name, city } = getUserInfo();
console.log(name);
console.log(city);理解
可以把解构赋值理解为拆快递。
数组解构是按位置拆，第一个给第一个变量，第二个给第二个变量。对象解构是按名字拆，属性叫什么，就找什么。
默认值就像快递里没放东西时，你自己准备好的替代品。剩余模式就是把剩下的全放进一个大袋子里。
解构赋值的核心好处是少写重复代码，让取值这一步更直观。
引出
解构赋值经常和 JS 展开语法 一起出现，展开语法是把数据”铺开”，解构是把数据”拆出来”，方向刚好相反。