structuredClone拷贝Map和Set方法详解

structuredClone 是现代 JavaScript 中原生、高效且安全的深拷贝方案，尤其擅长完整保留 Map 和 Set 的结构、键值类型及嵌套引用关系，支持 Date、RegExp、ArrayBuffer 等复杂内置对象，但不兼容函数、undefined、Symbol 作键，也无法处理 WeakMap/WeakSet 或自定义访问器；尽管存在浏览器兼容性限制（需 Chrome 98+/Firefox 94+/Safari 15.4+），其对循环引用的天然支持和零依赖特性，仍使其成为替代 JSON 序列化和第三方库的首选——使用前建议做运行时检测并准备优雅降级策略。

structuredClone() 是现代 JavaScript 中最直接、安全的深拷贝方案，原生支持 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Error 等复杂内置对象，无需手动遍历或第三方库。

structuredClone 能直接拷贝 Map 和 Set 吗

能，而且是完整保留结构和键值类型。它会递归克隆嵌套的 Map/Set 内容，包括其内部的引用关系（如 Map 的 key 是对象时也会被克隆）。

示例：

const original = new Map([
  ['a', 1],
  [new Set([1, 2]), 'nested'],
  [{ id: 'obj' }, new Map([['x', true]])]
]);

const cloned = structuredClone(original);

// ✅ 类型一致
console.log(cloned instanceof Map); // true

// ✅ 键和值都被深拷贝（Set 和对象都非同一引用）
console.log(cloned.get('a') === 1); // true
console.log(cloned.get(new Set([1, 2])) === undefined); // true（key 已被克隆，原 Set 不匹配）
console.log(cloned.has([...cloned.keys()][0])); // true（自身键存在）

// ✅ 嵌套结构也被保留
const nestedMap = cloned.get([...cloned.keys()][2]);
console.log(nestedMap instanceof Map); // true
console.log(nestedMap.get('x')); // true

哪些 Map/Set 场景 structuredClone 无法处理

虽然能力强大，但仍有明确限制：

• 函数、undefined、Symbol 作为 Map 键：会被忽略或抛错。例如 new Map([[function(){}, 'f']]) 会报 DataCloneError
• 循环引用：支持（这是它相比 JSON.stringify 的关键优势），但需注意目标环境支持度（Chrome 98+、Firefox 94+、Safari 15.4+）
• WeakMap / WeakSet：无法克隆，调用会直接抛错 —— 它们本就不允许序列化
• 带有不可枚举属性或自定义 getter/setter 的对象：只拷贝可枚举自有属性，不保留访问器

兼容性不足时的替代方案

若需支持旧版浏览器（如 IE 或早期 Edge），structuredClone 不可用，可考虑：

• 用 JSON.stringify + JSON.parse（仅适用于纯数据，丢失 Map/Set/Date/Function 等）
• 手动递归实现简易克隆逻辑（针对已知结构，如只含 Map/Set/Object/Array）
• 引入轻量库如 fast-copy 或 klona（它们对 Map/Set 有良好支持且体积小）

使用前建议检查运行时支持

避免意外报错，可在调用前做特性检测：

if (typeof structuredClone === 'function') {
  try {
    const copy = structuredClone(myComplexData);
    // ✅ 安全使用
  } catch (err) {
    console.warn('structuredClone 失败，降级处理:', err);
    // 降级逻辑...
  }
} else {
  // 降级逻辑...
}

好了，本文到此结束，带大家了解了《structuredClone拷贝Map和Set方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！