javascript深浅拷贝是什么_如何实现对象的深拷贝?

浅拷贝只复制第一层属性,嵌套对象仍共享引用;JSON.parse(JSON.stringify())是最简深拷贝但丢失Date、函数等类型;手写需处理循环引用和内置类型;Lodash cloneDeep是生产首选。

浅拷贝只是复制了引用,不是新对象

当你用 Object.assign()、扩展运算符 {...obj}Array.prototype.slice() 复制一个对象时,只做了浅拷贝:第一层属性值被复制,但遇到嵌套对象或数组,复制的仍是内存地址。修改副本里的嵌套值,原对象也会跟着变。

常见错误现象:

const a = { user: { name: 'Alice' } };
const b = { ...a };
b.user.name = 'Bob';
console.log(a.user.name); // 输出 'Bob' —— 原对象被意外改了

  • 适用场景:确定对象只有一层结构,或你本意就是共享嵌套数据
  • 注意 Object.assign() 不会拷贝不可枚举属性和 symbol 键
  • 扩展运算符对 nullundefined 会报错,需提前校验

JSON.stringify + JSON.parse 是最简深拷贝,但有硬伤

这是开发中用得最多的一行式深拷贝:JSON.parse(JSON.stringify(obj))。它确实能递归复制所有层级,但只适用于纯数据对象。

典型兼容性问题:

const obj = {
  name: 'Test',
  date: new Date(),
  fn: () => {},
  undef: undefined,
  sym: Symbol('id')
};
const copy = JSON.parse(JSON.stringify(obj));
console.log(copy); // { name: 'Test', date: null, fn: undefined, undef: undefined, sym: undefined }

  • Date 变成 nullFunctionundefinedSymbolRegExpBigInt 全部丢失或转为 null/undefined
  • 循环引用会直接抛出 TypeError: Converting circular structure to JSON
  • 性能较差,尤其大对象——要序列化再解析,两次遍历

手写递归深拷贝要处理类型、循环引用和特殊值

真正健壮的深拷贝必须区分数据类型,并缓存已拷贝过的对象以避免死循环。核心逻辑是:遇到对象/数组就新建并递归,其他类型直接返回。

关键点:

function deepClone(obj, cache = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  
  if (cache.has(obj)) return cache.get(obj);
  
  const cloned = Array.isArray(obj) ? [] : {};
  cache.set(obj, cloned);
  
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      cloned[key] = deepClone(obj[key], cache);
    }
  }
  
  return cloned;
}

  • WeakMap 存原始对象 → 克隆对象映射,解决循环引用(如 a.b = a
  • 必须用 Object.prototype.hasOwnProperty 避免遍历原型链上的属性
  • 没处理 DateRegExpMapSet 等内置类型——需要按需扩展 instanceof 分支
  • 不能拷贝函数的闭包环境,函数体可复制,但词法作用域无法还原

Lodash 的 cloneDeep 是生产环境首选

自己实现完整深拷贝成本高、边界多。Lodash 的 cloneDeep 已覆盖几乎所有 JS 内置类型、循环引用、不可枚举属性、甚至 TypedArrayerror 对象。

使用方式:

import { cloneDeep } from 'lodash-es'; // 推荐 es module 版本,支持 tree-shaking
const original = { a: 1, b: { c: 2 } };
const copy = cloneDeep(original);

  • 不依赖全局 JSON,能正确处理 MapSetDateRegExpArrayBuffer
  • 内部也用 WeakMap 解决循环引用,且做了大量性能优化
  • 如果项目已引入 Lodash,直接用;否则考虑是否值得为深拷贝引入整个库——可单独安装 lodash.clonedeep
深拷贝真正的复杂点不在“怎么写”,而在“要不要深”。很多场景其实只需要冻结对象、用不可变数据结构(如 Immer),或者干脆设计成不可变更新。盲目深拷贝可能掩盖数据流混乱的问题。