JavaScript 中 structuredClone 怎么高效实现深拷贝-js教程-PHP中文网

structuredclone 是 javascript 原生深拷贝方案，一行调用即可完成，支持 date、regexp、map、set、arraybuffer 等复杂类型及循环引用，但不支持函数、symbol、dom 节点、proxy 等；配合 transfer 可实现 arraybuffer 零拷贝迁移。

javascript 中 structuredclone 怎么高效实现深拷贝

structuredClone 是 JavaScript 原生提供的深拷贝方案，无需依赖、一行调用、性能优异，已稳定支持于 Node.js 17+、Chrome 98+、Firefox 94+、Safari 16.4+ 及所有现代环境。

直接调用，零配置完成深拷贝

对绝大多数对象，只需传入源数据即可获得完全独立的副本：

克隆后修改嵌套数组、日期、正则等，原始对象不受影响
自动处理循环引用，不会报错或栈溢出
保留 Date、RegExp、Map、Set、ArrayBuffer、TypedArray、Blob、File、BigInt 等原生类型实例

示例：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

const original = { name: 'Alice', date: new Date(), map: new Map([[1, 'a']]), arr: [1, { nested: true }] };
const cloned = structuredClone(original);
cloned.arr[1].nested = false;
console.log(original.arr[1].nested); // true —— 原始对象未被修改

用 transfer 实现零拷贝大对象迁移

当处理 ArrayBuffer、TypedArray 等大型二进制数据时，structuredClone 支持 transfer 选项，将内存所有权直接移交，避免复制开销：

transfer 后原始 buffer 变为 detached（byteLength 变为 0），不可再读写
适用于向 Web Worker 传递视频帧、音频缓冲区等高频大数据场景
仅支持可转移对象（Transferable），如 ArrayBuffer、MessagePort、ImageBitmap 等

示例：

const buf = new ArrayBuffer(10 * 1024 * 1024); // 10MB
const transferred = structuredClone(buf, { transfer: [buf] });
console.log(buf.byteLength); // 0
console.log(transferred.byteLength); // 10485760

明确它的能力边界，避免误用

structuredClone 不是万能的，以下类型无法克隆，会抛出 DataCloneError：

函数（Function）和箭头函数 —— 闭包与执行上下文无法序列化
Symbol 属性 —— 被静默忽略（不报错但不拷贝）
WeakMap / WeakSet —— 弱引用语义不可枚举
DOM 节点（Element、Document、Window）—— 浏览器宿主对象不支持
Proxy、Error 实例、类的原型链 —— 不保留构造器身份或方法定义

若需克隆含函数或自定义类实例的对象，仍需结合业务逻辑做手动处理或降级使用 _.cloneDeep。

对比传统方案，优势一目了然

相比常见替代方式，structuredClone 在可靠性与效率上全面领先：

JSON.parse(JSON.stringify())：丢失 Date、RegExp、undefined、NaN、循环引用，且无法处理 Map/Set
手写递归：易漏类型、难处理循环引用、无 transfer 优化、维护成本高
Lodash cloneDeep：功能强但引入额外体积，且对 ArrayBuffer 等仍需 polyfill 或特殊配置

structuredClone 是标准、轻量、内建、可预测的首选方案 —— 只要你的目标环境支持，就该优先用它。