JavaScript深浅拷贝区别与实现技巧

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JavaScript深拷贝与浅拷贝区别及实现方法》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

深拷贝需递归复制所有层级并处理循环引用，JSON.parse(JSON.stringify())有类型限制，手写应使用WeakMap缓存，生产环境推荐Lodash的_.cloneDeep()。

浅拷贝只复制第一层引用，深拷贝递归复制所有层级

JavaScript 中对象和数组是引用类型，赋值操作只是复制了内存地址。浅拷贝会创建一个新对象，但其内部的嵌套对象仍指向原对象；深拷贝则确保新对象与原对象完全独立，修改任意一层都不会互相影响。

典型错误现象：Object.assign({}, obj) 或扩展运算符 {...obj} 看似“复制了”，但遇到 obj.child = { name: 'a' } 时，修改 copied.child.name 会同步改掉原对象 —— 这就是浅拷贝的坑。

JSON.parse(JSON.stringify()) 能用但有严重限制

这是最常被误用的“深拷贝”方案。它依赖序列化/反序列化，因此天然不支持：

• undefined、function、Symbol 类型会被忽略或转为 null
• 循环引用会直接抛错：TypeError: Converting circular structure to JSON
• Date、RegExp、Map、Set 等内置对象会丢失类型，变成空对象或字符串

仅适用于纯数据对象（POJO），且确认不含上述类型时才可临时使用。

手写递归深拷贝要处理类型判断和循环引用

真正健壮的深拷贝必须识别数据类型，并缓存已拷贝的对象以避免无限递归。核心逻辑是：遇到对象/数组就新建对应实例，逐个属性递归拷贝；遇到原始值直接返回；遇到已处理过的引用直接返回缓存结果。

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 缓存，避免内存泄漏（键是对象引用，自动随原对象回收）
• 不能用 typeof obj === 'object' 判断，因为 null 也返回 'object'
• 需用 Object.prototype.hasOwnProperty.call() 安全遍历自有属性

Lodash 的 _.cloneDeep() 是生产环境首选

它已覆盖几乎所有边界情况：支持 Date、RegExp、Map、Set、ArrayBuffer、TypedArray、循环引用、不可枚举属性等。性能经过优化，且持续维护。

安装：npm install lodash.clonedeep

使用：

import cloneDeep from 'lodash.clonedeep';
const newObj = cloneDeep(oldObj);

不要为了省几 KB 体积自己造轮子——深拷贝的复杂度远超表面看起来的样子，尤其在涉及原型链、访问器属性（get/set）、不可扩展对象等场景时，手写极易出错。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。