如何利用 structuredClone 实现包含 Map、Set 及循环引用对象的深拷贝

structuredClone支持Map、Set、Date、RegExp、Error、ArrayBuffer、TypedArray、DataView、普通对象、数组、BigInt、Boolean、String、Number、null、undefined及循环引用；不支持函数、Promise、WeakMap、WeakSet、DOM节点、getter/setter属性等。

structuredClone 是浏览器原生支持的深拷贝方法，能安全处理 Map、Set、Date、RegExp、ArrayBuffer 以及循环引用对象，无需手动递归或第三方库。它基于结构化克隆算法（Structured Clone Algorithm），语义与 postMessage 底层一致。

哪些类型能被 structuredClone 正确处理？

它原生支持以下类型（包括嵌套和混合）：

• Map 和 Set —— 键值对/元素会被完整复制，顺序保留
• 循环引用对象（如 a.b = a）—— 自动识别并重建引用关系，不会爆栈或报错
• Date、RegExp、Error（部分环境）、ArrayBuffer 及视图（TypedArray、DataView）
• 普通对象、数组、BigInt、Boolean、String、Number、null、undefined（注意：undefined 在某些上下文中可能被忽略）

哪些类型不支持？需提前注意

structuredClone 会抛出 DataCloneError 异常，遇到以下类型时：

• 函数（Function）、Promise、WeakMap、WeakSet
• HTMLElement 等 DOM 节点（非可序列化对象）
• 带有不可枚举属性、访问器（getter/setter）、Symbol 键的对象（Symbol 键会被忽略）
• Error 实例在部分浏览器中支持不一（Chrome ≥ 98 支持，Firefox ≥ 101，Safari ≥ 15.4）

基本用法与错误处理

直接调用即可，但务必包裹 try...catch 捕获不兼容场景：

const original = new Map([['key', { count: 1 }]]);original.set('self', original); // 循环引用try {  const cloned = structuredClone(original);  console.log(cloned.get('self') === cloned); // true ✅} catch (err) {  if (err.name === 'DataCloneError') {    console.error('无法克隆该对象：包含不支持的类型');  }}

兼容性不足时的降级方案

若需支持旧浏览器（如 Safari

function safeClone(obj) {  if (typeof structuredClone === 'function') {    try {      return structuredClone(obj);    } catch {      // fallback to JSON + manual handling for Map/Set (limited)    }  }  // 降级逻辑：例如先用 JSON.stringify + JSON.parse 处理纯数据，  // 再用自定义函数重建 Map/Set（但无法处理循环引用）}

注意：没有通用降级能完全复刻 structuredClone 对循环引用 + Map/Set 的能力。生产环境建议明确浏览器支持范围，或使用成熟库（如 lodash.cloneDeep，但需注意它也不支持循环引用中的 Map/Set 原生语义）。