Javascript如何实现深拷贝_有哪些方法和注意事项？

深拷贝需创建完全独立的新对象，避免嵌套引用；常用方法有JSON序列化（简单但限制多）、structuredClone（现代推荐，支持循环引用及多数内置类型）和手写递归（可控强但易错），需注意循环引用、特殊类型、原型链及性能权衡。

JavaScript 实现深拷贝，核心是**创建一个与原对象完全独立的新对象，所有嵌套层级的属性都复制而非引用**。直接赋值或 Object.assign()、展开运算符（...）只能实现浅拷贝，对嵌套对象/数组仍共享内存地址，修改副本会影响原对象。

常用深拷贝方法及适用场景

1. JSON 序列化 + 反序列化（最简单但限制多）
适用于纯数据对象（只含字符串、数字、布尔值、null、数组、普通对象），不支持函数、undefined、Symbol、Date、RegExp、Map、Set、BigInt、循环引用等。

const deepCopy = obj => JSON.parse(JSON.stringify(obj));

• ✅ 代码简洁，性能较好（对兼容数据）
• ❌ 函数、undefined 会被忽略；Date 变成字符串；NaN 变成 null；正则变为空对象；循环引用直接报错

2. 结构化克隆（Structured Clone）——现代推荐方案
浏览器（Chrome 98+、Firefox 94+、Safari 15.4+）和 Node.js（v17.0+）已原生支持 structuredClone()，能正确处理 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Blob、File、URL 等，也支持循环引用（需注意：Node.js v17–v18.12 需启用 --experimental-structured-cloning 标志）。

const copy = structuredClone(original);

• ✅ 原生、安全、语义准确，支持大多数内置类型和循环引用
• ❌ 不支持函数、undefined、Symbol、WeakMap、WeakSet；旧环境无支持（需 polyfill 或降级）

3. 手写递归实现（可控性强，适合学习或定制需求）
通过递归遍历对象/数组，对每个值判断类型并分别处理。需注意避免循环引用（用 WeakMap 缓存已拷贝的对象）。

function deepClone(obj, cache = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;

  if (cache.has(obj)) return cache.get(obj);

  const copy = Array.isArray(obj) ? [] : {};
  cache.set(obj, copy);

  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      copy[key] = deepClone(obj[key], cache);
    }
  }
  return copy;
}

• ✅ 完全可控，可扩展支持自定义类型（如 Date、RegExp）
• ❌ 易出错（如遗漏类型判断、未处理原型链、忘记缓存导致栈溢出）

必须注意的关键事项

循环引用会导致无限递归或报错
若对象内部存在引用自身（例如 a.b = a），JSON 方法直接抛错，手写递归必须用 WeakMap 缓存已处理对象，否则爆栈。

特殊类型无法被常规方法拷贝
函数、undefined、Symbol、WeakMap、WeakSet 在 JSON 和 structuredClone 中均被忽略或不支持。如有需要，需手动序列化/反序列化逻辑（例如将函数转为字符串再 eval —— 不推荐，有安全风险）或改用其他设计模式（如策略对象代替内联函数）。

原型链和不可枚举属性容易丢失
JSON.stringify 和 structuredClone 都只处理可枚举自有属性，不保留原型、getter/setter、不可枚举键。手写实现时若用 for...in 需配合 hasOwnProperty，若要保留原型，可用 Object.getPrototypeOf() + Object.setPrototypeOf() 显式设置。

性能与安全性权衡
structuredClone 是当前最优解，但低版本环境需 fallback；JSON 方案快但脆弱；手写方案灵活但维护成本高。生产环境建议优先检测 structuredClone 是否可用，再降级到成熟库（如 lodash 的 _.cloneDeep）或精简版手写逻辑。

爱改写

AI写作和改写润色工具

87

查看详情

第三方库参考（快速落地）

lodash 提供经过充分测试的 _.cloneDeep(value)，兼容性好、支持多种类型（包括 Date、RegExp、Map、Set）、自动处理循环引用，适合中大型项目。

import { cloneDeep } from 'lodash-es';
const copy = cloneDeep(original);

• ✅ 稳定、全面、文档完善
• ❌ 包体积略大（可按需引入）；对极简项目可能过度

不复杂但容易忽略细节。选方法前先明确数据结构、运行环境和特殊类型需求，比“找最短代码”更重要。

以上就是Javascript如何实现深拷贝_有哪些方法和注意事项？的详细内容，更多请关注php中文网其它相关文章！