structuredClone实现深拷贝：支持Map、Set与循环引用

structuredClone 是现代浏览器原生提供的强大深拷贝工具，能安全、高效地复制包括 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、DataView 以及复杂循环引用对象在内的多种类型，彻底摆脱手动递归或第三方库的繁琐与局限；尽管它不支持函数、Promise、DOM 节点等不可序列化对象，且存在少量兼容性差异（如 Error 在部分旧版浏览器中受限），但凭借其标准化、零依赖和语义一致（与 postMessage 底层相同）的优势，已成为处理复杂数据结构深拷贝的首选方案——尤其当你需要精准保留集合类型语义和自动解环时，它几乎是不可替代的利器。

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 原生语义）。

本篇关于《structuredClone实现深拷贝：支持Map、Set与循环引用》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！