Kodokon kodokon.com

解构与展开/剩余

干净利落地从对象和数组中提取数据,然后用展开运算符复制并合并结构。

8 分钟 · 3 题

在 Kodokon 中打开本课

当你从 API 接收数据时,往往只需要其中的几个属性。解构能用一行代码把它们提取出来,并可选择重命名、深入嵌套对象,以及在属性缺失时提供一个默认值

JAVASCRIPT
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"
嵌套提取,以及属性缺失时的默认值。

解构同样适用于数组,这次是按位置进行。它最专业的用法仍然是用于函数参数:签名不再接收一个不透明的对象,而是明确宣告它期望哪些属性。代码因此变得自带文档说明。

JAVASCRIPT
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),它把"所有剩下的"收集进一个数组,例如用来接收数量可变的参数。

JAVASCRIPT
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,会发生什么?写在最后的那个胜出。正是这个顺序上的细节,让"先默认再覆盖"的模式成为可能。

知识检测

确认你已牢记本课的重点内容。

  1. const { city } = user; 这一行做了什么?
    • 它创建了一个包含 user.city 的 city 变量
    • 它把 user 对象重命名为 city
    • 它创建了一个名为 city 的新空对象
  2. function log(...args) 中,函数内部的 args 是什么?
    • 一个键值对象
    • 一个包含所有接收到的参数的真正数组
    • 一个字符串
    • 只有第一个参数
  3. const copy = { ...original }; 之后,嵌套对象会被复制一份吗?
    • 会,副本是完全独立的
    • 不会,它们仍然共享:这是浅拷贝
    • 它们会从副本中被移除