JavaScript Academy · 课时

使用 structuredClone 创建深层副本

Q: 「使用 structuredClone 创建深层副本」这节课中我会学到什么？

安全地克隆复杂对象。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

安全地克隆复杂对象。

使用 structuredClone 创建深层副本 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

深拷贝问题

展开语法和 Object.assign 会创建浅拷贝：嵌套对象通过引用共享。若要完整复制嵌套结构，您需要进行深拷贝。

structuredClone 就是内置解决方案。

为什么展开语法还不够

展开语法创建的副本会共享嵌套对象。修改副本中的嵌套部分也会影响 original。

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone 解决深拷贝问题

structuredClone 会递归复制整个结构。对 clone 的修改绝不会影响 original。

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

相互独立的嵌套对象

克隆后，每个嵌套对象都是不同的引用，因此在每一层进行身份比较时结果都为 false。

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

克隆数组

数组（包括嵌套数组）也会进行深度克隆。向 clone 的嵌套数组中推入内容不会改变源数组。

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

支持映射和集合

与 JSON.parse(JSON.stringify(...)) 不同，structuredClone 支持许多内置类型，包括 Map、Set 和 Date。

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

处理循环引用

自引用对象会让 JSON 技巧失效，但使用 structuredClone 可以顺利克隆。

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

无法克隆的内容

structuredClone 无法复制函数或 DOM 节点；它会抛出 DataCloneError。它还会丢弃原型链，并返回普通对象。

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

原型不会保留

克隆后的类实例会变成普通对象：数据会被复制，但方法和原型会丢失。

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone 与 JSON 技巧

旧的 JSON.parse(JSON.stringify(x)) 会丢失 undefined，日期会变成字符串，而且无法处理循环引用。对于可序列化数据，structuredClone 可以避免这些问题。

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

为什么这很重要

structuredClone 为普通数据提供了可靠的内置深拷贝，取代了脆弱的手写克隆方案。当您需要获得嵌套 state 的完全独立副本时，请使用它，同时记住它会移除函数和原型。

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

快速检查

对于嵌套数据，为什么要使用 structuredClone，而不是展开运算符？

回顾：structuredClone

您学会了可靠的深拷贝：

展开语法只能进行浅拷贝；structuredClone 会进行深拷贝。
它支持 Map、Set、Date 和循环引用。
它无法克隆函数或 DOM 节点，并且会丢弃原型。
它是 JSON.parse(JSON.stringify()) 技巧的更安全替代方案。

常见问题解答

「使用 structuredClone 创建深层副本」课时是免费的吗？

是的 — 「使用 structuredClone 创建深层副本」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「使用 structuredClone 创建深层副本」这节课中我会学到什么？

安全地克隆复杂对象。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「使用 structuredClone 创建深层副本」课时需要多长时间？

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

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

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

此课程中的所有课时

Object.freeze 与 seal
浅冻结与深冻结
不可变更新模式
使用 structuredClone 创建深层副本

← 返回 JavaScript Academy