如何用 structuredClone 原生函数实现复杂对象深拷贝

structuredClone 是浏览器原生深拷贝方法支持 Map、Set、Date、RegExp、ArrayBuffer 等复杂类型及循环引用不支持函数、Promise、WeakMap 等可通过 transfer 选项高效转移 ArrayBuffer 内存Chrome 98、Firefox 97、Safari 15.4 原生支持旧环境可降级为 JSON 方案或 postMessage polyfill。structuredClone 是浏览器原生提供的深拷贝方法能安全、高效地复制包含函数以外的大多数复杂对象如 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Error、DOM 节点等且自动处理循环引用无需手动递归或第三方库。支持的数据类型与限制structuredClone 支持以下类型普通对象、数组、Map、SetDate、RegExp、Error拷贝后保持原型和属性ArrayBuffer、DataView、所有 TypedArray如 Uint8ArrayBigInt、Boolean、String、Number、Symbol仅限可序列化的 Symbol如 Symbol.for(key)嵌套结构和循环引用自动识别并正确重建不支持函数、Promise、WeakMap、WeakSet、window、document、undefined、不可枚举属性如某些 DOM 属性、带有 getter/setter 的对象属性其值不会被调用getter 不执行。基本用法一行完成深拷贝直接传入源对象即可返回一个完全独立的新对象const original { name: Alice, hobbies: [reading, coding], meta: new Map([[age, 30]]), created: new Date(), buffer: new Uint8Array([1, 2, 3])};pconst clone structuredClone(original);console.log(clone.meta original.meta); // falseconsole.log(clone.created.getTime() original.created.getTime()); // true值相同实例不同处理 Transferable 对象高级用法当拷贝 ArrayBuffer 或 TypedArray 时可通过 transfer 选项将底层内存“转移”而非复制提升性能尤其对大数组。转移后原对象对应 buffer 变为 detached不可访问 文小言 百度旗下新搜索智能助手有问题问小言。