数据解构
约 471 字大约 2 分钟
2026-03-31
思考
如何进行数据解构？
解构的本质是按结构取值，是从原对象/数组中读取值赋值给新变量。解构时若读取到的是原始值，则赋值的是值的副本；但若读取到的是引用值时，那么赋值的是值的引用。
解构对象
对象根据 属性名 进行解构。
直接解构
const obj = { name: "Alice", age: 25 };
// 解构：变量名必须与属性名一致
const { name, age } = obj;
console.log(name); // 'Alice'
console.log(age); // 25重命名变量
如果想用不同名字接收属性值：
const { name: userName, age: userAge } = obj;
console.log(userName); // 'Alice'设置默认值
当属性不存在时提供默认值，存在则保持原值。
const { age = 18, gender = "unknown" } = obj;
console.log(gender); // 'unknown'，因为 obj 没有 gender，使用默认值
console.log(age); // 25，因为 obj 有 age，使用原值解构嵌套对象
const user = {
id: 1,
profile: {
email: "[email protected]",
settings: { theme: "dark" },
},
};
const {
profile: { email },
profile: {
settings: { theme },
},
} = user;
// 或更简洁：
const {
profile: {
email,
settings: { theme },
},
} = user;
console.log(email); // '[email protected]'
console.log(theme); // 'dark'剩余属性
const { name, ...rest } = { name: "Bob", age: 30, city: "Beijing" };
console.log(name); // 'Bob'
console.log(rest); // { age: 30, city: 'Beijing' }在函数参数中解构
function greet({ name, age }) {
console.log(`Hello, ${name}! You are ${age} years old.`);
}
greet({ name: "Charlie", age: 40 }); // Hello, Charlie! You are 40 years old.解构数组
数组中按 位置（索引） 解构数据。
基础用法
const arr = [10, 20, 30];
const [a, b, c] = arr;
console.log(a, b, c); // 10 20 30跳过元素
const [first, , third] = arr; // 跳过第二个元素
console.log(first, third); // 10 30默认值
const [x, y = 100] = [5]; // y 未提供，使用默认值
console.log(x, y); // 5 100剩余元素
const [head, ...rest] = [1, 2, 3, 4];
console.log(head); // 1
console.log(rest); // [2, 3, 4]交换变量（无需临时变量）
let a = 1,
b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1