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

JavaScript中的深拷贝与浅拷贝本质区别在于是否真正隔离引用关系：浅拷贝仅复制对象第一层属性，嵌套的数组、对象等仍共享内存地址，修改深层内容会相互影响；而深拷贝通过递归遍历实现全层级独立复制，确保新旧对象彻底解耦。文章不仅清晰对比了Object.assign、展开运算符等浅拷贝方法的局限性，更深入剖析了深拷贝需攻克的递归遍历、特殊类型处理（如Date、RegExp）、循环引用防护等核心难点，并提供了一个兼顾可读性与实用性的手写深拷贝实现，最后务实推荐生产环境优先选用lodash的_.cloneDeep()或现代原生structuredClone()——帮你避开坑，写出更健壮、可维护的数据操作逻辑。

浅拷贝只复制对象的第一层属性，新旧对象共享嵌套的引用类型数据；深拷贝则递归复制所有层级，新对象与原对象完全独立，互不影响。

浅拷贝的特点与常见实现

浅拷贝后，如果原对象中包含数组、对象、日期、正则等引用类型，它们的内存地址会被直接复制，新旧对象仍指向同一块内存。修改嵌套内容会影响彼此。

• Object.assign({}, obj)：只拷贝可枚举的自有属性，不处理原型链和 Symbol 属性
• 展开运算符 {...obj}：语法简洁，但同样只作用于第一层
• Array.prototype.slice() / concat()：适用于数组，但对内部对象仍是浅拷贝

深拷贝的核心难点

真正可靠的深拷贝需解决几个关键问题：

• 递归遍历所有嵌套层级，不能遗漏任意对象或数组
• 正确识别并处理特殊对象：Date、RegExp、Map、Set、TypedArray、Function、undefined、null 等
• 避免循环引用导致的栈溢出（如 obj.a = obj）
• 保持原型链或构造器信息（按需，多数场景可忽略）

手写一个基础可用的深拷贝函数

以下是一个兼顾可读性与基本健壮性的实现，支持常见类型并检测循环引用：

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

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

  let cloned;
  if (obj instanceof Date) {
    cloned = new Date(obj);
  } else if (obj instanceof RegExp) {
    cloned = new RegExp(obj);
  } else if (obj instanceof Array) {
    cloned = [];
  } else {
    cloned = {};
  }

  hash.set(obj, cloned);

  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      cloned[key] = deepClone(obj[key], hash);
    }
  }

  return cloned;
}

说明：使用 WeakMap 记录已克隆的对象，遇到重复引用时直接返回缓存结果，防止无限递归。该版本暂不处理 Map/Set/Function 等更复杂类型，但已覆盖日常大部分需求。

生产环境建议用成熟方案

自己实现深拷贝容易遗漏边界情况。实际项目中推荐：

• JSON.parse(JSON.stringify(obj))：最简方式，但会丢失函数、undefined、Symbol、Date 对象变为字符串、无法处理循环引用
• Lodash 的 _.cloneDeep()：功能完整、性能好、经过大量测试，支持所有内置类型及自定义类
• structuredClone()（现代浏览器）：原生 API，支持 Map/Set/Date/RegExp 等，但暂不支持函数和循环引用（部分环境已支持）

理论要掌握，实操不能落！以上关于《JavaScript深拷贝与浅拷贝区别及实现方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！