浅拷贝与深拷贝区别及实现方式

JavaScript中的浅拷贝仅复制对象第一层属性的引用，修改副本可能意外影响原数据；而深拷贝则递归复制所有嵌套层级，真正实现数据隔离——但常见方法如Object.assign()、展开运算符只是浅拷贝，JSON.stringify+parse虽看似“深”，却会丢失函数、Symbol、Date等类型且无法处理循环引用；手写深拷贝需严谨处理类型判断、内置对象重建和循环引用防护，而生产环境更推荐经久考验的lodash.cloneDeep，它全面覆盖各类边界场景；不过在现代框架中，也应先审视是否真需深拷贝——有时响应式系统或缓存机制已提供更优雅的解决方案。

JavaScript 中浅拷贝只复制对象第一层属性的引用，深拷贝则递归复制所有层级——这是区分两者的核心。直接用 = 赋值永远是浅拷贝；想真正隔离数据修改，必须用深拷贝。

浅拷贝的常用方法及陷阱

常见手段包括 Object.assign()、展开运算符 {...obj}、Array.prototype.slice() 和 Array.from()。它们都只处理顶层属性：

• Object.assign({}, {a: 1, b: {c: 2}}) 返回的新对象中，b 仍指向原对象的同一内存地址
• 数组用 [...arr] 拷贝后，若元素是对象，这些对象本身不会被复制
• Array.prototype.concat() 同样只浅拷贝，且对嵌套数组无效

这类方法在状态管理或表单重置时容易引发意外副作用：改了副本，原数据也跟着变了。

JSON.stringify + JSON.parse 的深拷贝局限

这是最常被误用的“深拷贝”方案：

const deepCopy = JSON.parse(JSON.stringify(obj));

它看似简单，但有硬伤：

• 会丢失函数、undefined、Symbol、Date、RegExp、Map、Set 等类型（直接被忽略或转成空对象）
• 无法处理循环引用，直接报错 TypeError: Converting circular structure to JSON
• 会对 NaN、Infinity 转成 null，new Date() 变成字符串

仅适用于纯 JSON 兼容的扁平数据结构，比如配置项或 API 响应体。

手写递归深拷贝的关键点

要真正可控，得自己实现。核心是判断类型并分路径处理：

• 基础类型（string/number/boolean/null/undefined/symbol）直接返回
• Date 和 RegExp 需用构造函数重建：new Date(obj)、new RegExp(obj)
• Array 和普通 Object 递归遍历键值，用 Array.isArray() 区分数组
• 必须用 WeakMap 记录已拷贝的对象，防止循环引用死循环

示例关键逻辑：

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

Lodash 的 cloneDeep 是生产首选

手写容易漏边缘 case，工程中推荐直接用 lodash.cloneDeep。它已覆盖：

• 所有内置对象（Date、RegExp、Map、Set、TypedArray、ArrayBuffer）
• 循环引用检测与处理
• 不可枚举属性、原型链控制（可选）

注意：不要只引入整个 Lodash，用 import cloneDeep from 'lodash/cloneDeep'; 按需加载。如果项目已用 Vue 3 或 React 18+，其响应式系统或 useMemo 缓存机制可能让深拷贝变得多余——先确认是否真需要拷贝，而不是在错误层级做隔离。

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