17370845950

JavaScript深拷贝是创建完全独立的新对象，递归复制所有嵌套属性；浅拷贝仅复制第一层，嵌套对象仍共享引用；常用方法包括JSON序列化（有局限）、structuredClone（推荐）、递归实现和lodash.cloneDeep。

JavaScript深拷贝是指创建一个新对象，该对象与原对象完全独立，修改新对象不会影响原对象，且其所有嵌套属性（包括对象、数组、日期、正则等）也都被递归复制，而非共享引用。

为什么浅拷贝不行

使用Object.assign()、展开运算符{...obj}或Array.from()等方式只能实现浅拷贝——只复制第一层属性。一旦对象内部还有对象或数组，它们的引用仍会被共享。

• 例如：const a = { user: { name: 'Alice' } }; const b = { ...a }; b.user.name = 'Bob'; → 此时a.user.name也会变成'Bob'
• 根本原因是：嵌套的user对象在a和b中指向同一内存地址

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

没有一种方法完美适用于所有情况，需按数据结构和需求选择：

• JSON.parse(JSON.stringify(obj))：最简单，但会丢失函数、undefined、Symbol、Date、RegExp、Map、Set、循环引用，且NaN转为null
• structuredClone()（现代浏览器支持）：原生API，支持Map、Set、Date、RegExp、ArrayBuffer等，能处理循环引用（Chrome 98+、Firefox 94+、Safari 15.4+），推荐优先使用
• 递归实现基础版：适合学习原理或定制逻辑（如过滤某些字段、处理特殊类型），但需手动处理Date、RegExp、ArrayBuffer等
• 第三方库（如lodash.cloneDeep）：健壮全面，兼容性好，适合生产环境复杂对象

手写简易深拷贝（支持常见类型）

以下是一个兼顾可读性和实用性的基础实现，覆盖对象、数组、Date、RegExp、基本类型：

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

  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);

  const cloned = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloned[key] = deepClone(obj[key]);
    }
  }
  return cloned;
}

注意：此版本不处理循环引用、Map/Set、ArrayBuffer等，如需完整支持，建议用structuredClone或成熟库。

关键注意事项

• 循环引用会导致递归爆栈，structuredClone和lodash.cloneDeep内部做了检测和缓存处理
• 函数、DOM节点、window等无法被序列化，深拷贝后通常丢失或变为null
• 性能上，深拷贝开销较大，尤其对超大对象，应避免不必要的深拷贝
• 不是所有对象都需要深拷贝——确认是否真的存在嵌套修改需求，有时用不可变更新（如immer）更高效