无需登录 数据私有 本地保存

structuredClone 深度克隆测试器 - 对象对比

13
0
0
0

structuredClone 深度克隆测试器

验证 JavaScript 结构化克隆算法的完整能力 — 对象对比 · 独立性验证 · 实时可视化

原始对象（可编辑）

加载预设用例或点击"执行深度克隆"

克隆对象（只读）

等待克隆操作...

常见问题 & 知识点

structuredClone() 是 JavaScript 原生提供的深度克隆方法，基于结构化克隆算法。它能完整复制复杂对象，包括嵌套结构、Date、RegExp、Map、Set、ArrayBuffer、循环引用等，且不会共享引用。相比 JSON.parse(JSON.stringify(obj))，它支持更多数据类型且不会丢失信息。

✅ 支持：Object、Array、String、Number、Boolean、null、undefined、Date、RegExp、Map、Set、ArrayBuffer、TypedArray（Int8Array等）、Blob、File、ImageData、DataView、循环引用。
❌ 不支持：Function、Symbol、WeakMap、WeakSet、DOM 节点、Error 对象的 stack 属性、Proxy 对象。

JSON 方法会丢失 Date（转为字符串）、RegExp（转为空对象{}）、Map/Set（转为空对象{}）、undefined（属性被删除）、循环引用（直接报错）。而 structuredClone 能完美保留所有这些类型。此外，structuredClone 是原生实现，性能更优，且支持 Transferable 对象转移。

structuredClone 原生支持循环引用。它内部维护已访问对象的映射表，当遇到已克隆过的引用时，直接复用之前的克隆结果，从而完美保留循环结构而不会导致无限递归或报错。这是 JSON 方法无法做到的。

structuredClone(obj, { transfer: [buffer] }) 中的 transfer 列表用于"转移"（而非复制）ArrayBuffer 等可转移对象的所有权。转移后，原始对象中的该 buffer 会被清空（字节长度变为 0），而克隆对象获得完整数据。这适用于大块二进制数据的高效传递，避免内存复制开销。

structuredClone 在现代浏览器中广泛支持：Chrome 98+、Firefox 94+、Safari 15.4+、Edge 98+。Node.js 17.0+ 也支持。对于旧浏览器，可以使用 core-js polyfill 或 lodash 的 cloneDeep 作为替代方案。

当你需要完全独立的对象副本时：深拷贝复杂配置对象、克隆包含 Date/Map/Set 的数据、处理循环引用的数据结构、在 Web Worker 之间传递数据、需要高效转移 ArrayBuffer 所有权时。对于简单对象，浅拷贝（展开运算符）可能更轻量。

不会。structuredClone 只克隆对象自身的可枚举属性，不保留原型链。克隆后的对象是一个普通对象（plain Object），其原型指向 Object.prototype。类实例的特殊方法不会保留。
🔧 相关工具