0Pricing
JavaScript Academy · 课时

剩余参数与展开语法——数组和对象的惯用写法

收集剩余的值和属性，使用展开语法克隆与合并，并通过简单模式避免隐藏的变更

剩余参数与展开语法——数组和对象的惯用写法 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课，共 2 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 2 节课。

简介

目标：使用剩余语法收集额外元素，使用展开语法进行复制或合并。

  • 数组和对象展开
  • 数组剩余元素（头部/尾部）
  • 对象剩余属性（排除部分键）
  • 修改与复制
剩余参数与展开语法——数组和对象的惯用写法 — 插图 1

数组展开基础

[...arr] 会复制数组；在新数组中展开多个数组即可将它们合并。

// Array spread creates a shallow copy and merges arrays
const a = [1, 2];
const b = [3, 4];

const clone = [...a];
const merged = [...a, ...b];

console.log("a:", a);
console.log("clone:", clone);
console.log("merged:", merged);
剩余参数与展开语法——数组和对象的惯用写法 — 插图 2

数组剩余模式

剩余元素（…tail）会将剩余部分收集到一个新数组中。

// Array rest collects the remaining items
const nums = [10, 20, 30, 40];

const [head, ...tail] = nums;

console.log("head:", head);
console.log("tail:", tail);
剩余参数与展开语法——数组和对象的惯用写法 — 插图 3

对象展开基础

合并对象与顺序有关：后面的展开内容会覆盖前面的键。

// Object spread copies and merges; later keys win
const base = { theme: "light", compact: false };
const override = { compact: true };

const copy = { ...base };
const merged = { ...base, ...override };

console.log("copy:", copy);
console.log("merged:", merged);
剩余参数与展开语法——数组和对象的惯用写法 — 插图 4

对象剩余模式

使用 { a, ...rest } 获取几个属性，并将其余属性保留在一起。

// Object rest collects remaining properties
const user = { id: 7, name: "Ayla", role: "admin" };

const { id, ...publicInfo } = user;

console.log("id:", id);
console.log("publicInfo:", publicInfo);
剩余参数与展开语法——数组和对象的惯用写法 — 插图 5

通过复制避免修改

更改值时请创建新对象；与修改共享数据相比，这种方式更清晰、更安全。

// Copy instead of mutating original data
const settings = { sound: true, volume: 5 };

// Mutating version (avoid in shared state)
// settings.volume = 6;

// Non-mutating: create an updated copy
const updated = { ...settings, volume: 6 };

console.log("settings:", settings);
console.log("updated:", updated);
剩余参数与展开语法——数组和对象的惯用写法 — 插图 6

对象剩余小测

快速检查：对象剩余属性。

剩余参数与展开语法——数组和对象的惯用写法 — 插图 7

回顾

回顾：展开语法可以复制和合并数组及对象；剩余语法可以收集剩余部分。优先复制而不是修改，以便明确地表示更改。

剩余参数与展开语法——数组和对象的惯用写法 — 插图 8

常见问题解答

「剩余参数与展开语法——数组和对象的惯用写法」课时是免费的吗？

是的 — 「剩余参数与展开语法——数组和对象的惯用写法」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 2 节课。

「剩余参数与展开语法——数组和对象的惯用写法」这节课中我会学到什么？

收集剩余的值和属性，使用展开语法克隆与合并，并通过简单模式避免隐藏的变更 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 2 节。

「剩余参数与展开语法——数组和对象的惯用写法」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 数组与对象解构基础
  2. 剩余参数与展开语法——数组和对象的惯用写法
← 返回 JavaScript Academy