干净利落地从对象和数组中提取数据,然后用展开运算符复制并合并结构。
在 Kodokon 中打开本课当你从 API 接收数据时,往往只需要其中的几个属性。解构能用一行代码把它们提取出来,并可选择重命名、深入嵌套对象,以及在属性缺失时提供一个默认值。
const user = {
id: 42,
name: "Lea",
address: { city: "Lyon", zip: "69001" }
};
const { name, address: { city } } = user;
const { role = "guest" } = user;
console.log(name, city, role); // "Lea" "Lyon" "guest"解构同样适用于数组,这次是按位置进行。它最专业的用法仍然是用于函数参数:签名不再接收一个不透明的对象,而是明确宣告它期望哪些属性。代码因此变得自带文档说明。
const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(first, third); // "gold" "bronze"
function formatUser({ name, role = "guest" }) {
return `${name} (${role})`;
}
console.log(formatUser({ name: "Sam" }));
// "Sam (guest)"同一个 ... 运算符有两副面孔。作为展开(spread),它把一个数组或对象展开以进行复制或合并:广泛用于先套用默认设置再进行覆盖。作为剩余(rest),它把"所有剩下的"收集进一个数组,例如用来接收数量可变的参数。
const baseConfig = { theme: "dark", lang: "fr" };
const overrides = { lang: "en" };
const config = { ...baseConfig, ...overrides };
// { theme: "dark", lang: "en" }
const scores = [12, 18, 9];
const allScores = [...scores, 20]; // [12, 18, 9, 20]
function sumAll(...numbers) {
return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3)); // 6进入测验前先做个思考练习:在 { ...baseConfig, ...overrides } 中,如果两个对象都定义了 lang,会发生什么?写在最后的那个胜出。正是这个顺序上的细节,让"先默认再覆盖"的模式成为可能。
const { city } = user; 这一行做了什么?function log(...args) 中,函数内部的 args 是什么?const copy = { ...original }; 之后,嵌套对象会被复制一份吗?