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、Set
- Date、RegExp、Error(拷贝后保持原型和属性)
- ArrayBuffer、DataView、所有 TypedArray(如 Uint8Array)
- BigInt、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])
};
<p>const clone = structuredClone(original);
console.log(clone.meta === original.meta); // false
console.log(clone.created.getTime() === original.created.getTime()); // true(值相同,实例不同)
处理 Transferable 对象(高级用法)
当拷贝 ArrayBuffer 或 TypedArray 时,可通过 transfer 选项将底层内存“转移”而非复制,提升性能(尤其对大数组)。转移后原对象对应 buffer 变为 detached(不可访问):
const arrayBuf = new ArrayBuffer(1024 * 1024); // 1MB
const original = { data: new Uint8Array(arrayBuf) };
<p>// 转移 buffer,原 arrayBuf 不再可用
const clone = structuredClone(original, { transfer: [arrayBuf] });</p><p>console.log(original.data.buffer.byteLength); // 报错:ArrayBuffer is detached
console.log(clone.data.buffer.byteLength); // 1048576
⚠️ 注意:transfer 只接受 Transferable 列表(ArrayBuffer、MessagePort、ImageBitmap 等),且每个只能转移一次;转移后务必确保原对象不再使用该 buffer。
兼容性与降级方案
目前 Chrome 98+、Firefox 97+、Safari 15.4+ 原生支持。旧环境可用如下轻量降级:
function deepClone(obj) {
if (typeof structuredClone === 'function') {
try {
return structuredClone(obj);
} catch (e) {
// fallback if unsupported or contains forbidden types
}
}
// 简单 JSON 方案(仅适用于纯数据对象,无函数/Date/undefined 等)
return JSON.parse(JSON.stringify(obj));
}
如需更健壮的降级(支持 Date、RegExp、循环引用),建议引入 lodash.cloneDeep 或自研基于 structuredClone + postMessage 的 polyfill(利用 iframe + MessageChannel 模拟跨上下文克隆)。

















