JavaScript深浅拷贝区别及对象深拷贝实现方法

JavaScript中的深浅拷贝看似基础，实则暗藏陷阱：浅拷贝仅复制顶层属性，嵌套对象仍共享引用，极易引发意外的数据污染；而看似便捷的JSON序列化深拷贝会丢失Date、函数、Symbol、undefined等关键类型，且无法处理循环引用；手写深拷贝虽可定制，却需周全应对类型判断、循环引用、内置对象（Map/Set/RegExp等）及性能问题；因此，生产环境强烈推荐Lodash的cloneDeep——它成熟、全面、健壮，已覆盖几乎所有边界场景。但更深层的启示在于：与其盲目深拷贝，不如反思数据流设计——是否该用冻结、不可变结构或Immer等更优雅的方案来根治问题？

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

当你用 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 键
• 扩展运算符对 null 或 undefined 会报错，需提前校验

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 变成 null，Function、undefined、Symbol、RegExp、BigInt 全部丢失或转为 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 避免遍历原型链上的属性
• 没处理 Date、RegExp、Map、Set 等内置类型——需要按需扩展 instanceof 分支
• 不能拷贝函数的闭包环境，函数体可复制，但词法作用域无法还原

Lodash 的 cloneDeep 是生产环境首选

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

使用方式：

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

• 不依赖全局 JSON，能正确处理 Map、Set、Date、RegExp、ArrayBuffer
• 内部也用 WeakMap 解决循环引用，且做了大量性能优化
• 如果项目已引入 Lodash，直接用；否则考虑是否值得为深拷贝引入整个库——可单独安装 lodash.clonedeep

今天关于《JavaScript深浅拷贝区别及对象深拷贝实现方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！