在 JavaScript 中，实现深拷贝（deep copy）常常令人头疼，传统方法要么性能差，要么功能有限（如 JSON.parse(JSON.stringify()) 无法处理函数、日期、循环引用等）。不过，从 Node.js v17+ 和现代浏览器开始，JavaScript 引入了一个新特性 —— structuredClone()，它用一行代码优雅解决了这个问题。

✅ 一行代码完成深拷贝

const clone = structuredClone(original);

🧠 structuredClone() 是什么？

structuredClone() 是一个全局函数，基于 HTML 标准中的 Structured Clone Algorithm 实现，可以递归深度拷贝任意复杂结构的数据对象，包括但不限于：

  • 原始值（string, number, boolean, null, undefined, bigint）
  • 对象、数组
  • Map、Set
  • Date、RegExp
  • TypedArray、ArrayBuffer
  • 循环引用 ✅
  • Symbol ✅（注意：仅描述结构，不保留共享）
  • DOM 对象 ❌（不可克隆）

🚫 它比 JSON 拷贝强在哪里？

特性JSON.parse(JSON.stringify())structuredClone()
函数（Function）❌ 省略❌ 报错
日期（Date）⛔ 转换为字符串✅ 保留 Date 类型
循环引用❌ 报错✅ 支持
正则表达式（RegExp）⛔ 转为 {}✅ 保留 RegExp 类型
Map / Set❌ 不支持✅ 完整支持
undefined❌ 丢失✅ 保留

✨ 示例

const original = {
  name: "ChatGPT",
  created: new Date(),
  info: new Map([["version", 4.0]]),
  tags: new Set(["AI", "OpenAI"]),
  circular: null
};
original.circular = original; // 引入循环引用

const copy = structuredClone(original);

console.log(copy);
console.log(copy.created instanceof Date); // true
console.log(copy.info instanceof Map);     // true

💡 使用建议

  • ✅ 推荐优先使用 structuredClone() 代替手写的深拷贝逻辑
  • ❗ 注意克隆的对象不能包含函数、DOM 节点等非可结构化数据，会抛错
  • ✅ 可用于 Web Worker、postMessage、缓存、状态快照等场景

📦 兼容性注意

  • ✅ Chrome 98+、Edge 98+、Firefox 94+、Safari 15.4+
  • ✅ Node.js 17.0+（需开启 --experimental）、Node.js 18+ 默认支持
  • ⛔ 如果需要兼容旧环境，可使用 structuredClone polyfill

🔚 总结

一句话：想要快速、安全、高效地进行深拷贝，structuredClone() 就是你最好的朋友！