JavaScript Academy · 课时

克隆与合并——展开语法和 Object.assign

使用展开语法和 Object.assign 克隆并合并对象和数组;理解浅拷贝与覆盖顺序

第 2 / 2 课8 个步骤

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

简介

目标:安全地复制和合并对象及数组。

  • 使用展开语法复制和合并
  • Object.assign
  • 覆盖顺序
  • 浅复制的注意事项
克隆与合并——展开语法和 Object.assign — 插图 1

展开语法:复制对象

使用 {...obj} 进行浅复制。编辑副本不会改变原对象的顶层字段。

// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };

clone.level = 2;

console.log("Original:", user);
console.log("Clone:", clone);
克隆与合并——展开语法和 Object.assign — 插图 2

Object.assign:复制

Object.assign({}, obj) 同样可以进行浅复制。请将值赋给空对象,以避免修改源对象。

// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);

copy.compact = true;

console.log("Settings:", settings);
console.log("Copy:", copy);
克隆与合并——展开语法和 Object.assign — 插图 3

合并:顺序很重要

合并与顺序有关:后面的源对象会覆盖前面的键(在此处,b 会变成 9)。

// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };

const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);

console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
克隆与合并——展开语法和 Object.assign — 插图 4

数组展开:复制与合并

[...arr] 会复制数组。使用 [...a, ...b] 合并数组,且不会修改原数组。

// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];

const more = [4, 5];
const mergedNums = [...nums, ...more];

console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
克隆与合并——展开语法和 Object.assign — 插图 5

浅复制与深复制

浅复制:嵌套的对象和数组会被共享。对于深层结构,请显式复制内部层级。

// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };

// Mutate nested object
shallow.user.name = "Lena";

console.log("Original:", original);
console.log("Shallow:", shallow);
克隆与合并——展开语法和 Object.assign — 插图 6

复制方法小测

快速检查:不修改原数据地进行浅复制。

克隆与合并——展开语法和 Object.assign — 插图 7

回顾

回顾:使用展开语法或 Object.assign 将对象复制到空对象中,将后面的源对象放在最后进行合并,并记住:这些都是浅复制。

克隆与合并——展开语法和 Object.assign — 插图 8
免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。

课程
59
课程
200

常见问题解答

「克隆与合并——展开语法和 Object.assign」课时是免费的吗?

是的 — 「克隆与合并——展开语法和 Object.assign」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 JavaScript Academy 课程的其余内容,请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 2 节课。

「克隆与合并——展开语法和 Object.assign」这节课中我会学到什么?

使用展开语法和 Object.assign 克隆并合并对象和数组;理解浅拷贝与覆盖顺序 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗?

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

「克隆与合并——展开语法和 Object.assign」课时需要多长时间?

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

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

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

此课程中的所有课时

  1. 数组的增删改查与迭代;对象基础与访问
  2. 克隆与合并——展开语法和 Object.assign
← 返回 JavaScript Academy