克隆与合并——展开语法和 Object.assign
使用展开语法和 Object.assign 克隆并合并对象和数组;理解浅拷贝与覆盖顺序
克隆与合并——展开语法和 Object.assign 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课,共 2 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 2 节课。
简介
目标:安全地复制和合并对象及数组。
- 使用展开语法复制和合并
- Object.assign
- 覆盖顺序
- 浅复制的注意事项

展开语法:复制对象
使用 {...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:复制
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);

合并:顺序很重要
合并与顺序有关:后面的源对象会覆盖前面的键(在此处,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);

数组展开:复制与合并
[...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);

浅复制与深复制
浅复制:嵌套的对象和数组会被共享。对于深层结构,请显式复制内部层级。
// 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 将对象复制到空对象中,将后面的源对象放在最后进行合并,并记住:这些都是浅复制。

用 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 反馈 — 无需本地设置。
此课程中的所有课时
- 数组的增删改查与迭代;对象基础与访问
- 克隆与合并——展开语法和 Object.assign