如何用javascript实现深浅拷贝【教程】_技术教程

深拷贝与浅拷贝本质区别在于是否递归复制嵌套引用；浅拷贝仅复制第一层，如Object.assign、扩展运算符；JSON.parse(JSON.stringify())非真正深拷贝，会丢失Date、RegExp、函数等且不支持循环引用；手写需处理类型识别、循环引用、构造信息保留；Lodash cloneDeep覆盖多数边界情况，推荐优先使用。

深拷贝和浅拷贝不是“选一个用就行”的问题，而是你一不小心改了原对象却不知道——尤其在 React/Vue 的响应式数据、Redux state 更新、或配置对象复用场景下，JSON.parse(JSON.stringify(obj)) 看似能用，但会默默丢掉 Date、RegExp、undefined、函数、循环引用，甚至 Map/Set。

浅拷贝只复制第一层引用

所有基础赋值（=）、Object.assign()、扩展运算符 {...obj}、Array.prototype.slice()、[...arr] 都是浅拷贝。它们只复制对象自身的可枚举属性，不递归处理嵌套对象。

常见错误现象：修改拷贝后的嵌套数组或对象，原对象同步变化。

Object.assign({}, obj) 对 obj.a.b = 1 无效，a 仍是同一引用
[...arr] 只对一维数组安全；若 arr = [{x: 1}]，修改 copy[0].x 会影响原项
Vue 中用 Object.assign(this.form, data) 替换表单对象？如果 data 含嵌套对象，后续响应式更新可能失效

JSON.parse(JSON.stringify()) 是最危险的“深拷贝”幻觉

它根本不是通用深拷贝方案，而是一个带严重副作用的序列化/反序列化操作。

使用场景仅限于：纯 JSON 兼容数据（即只含 null、布尔、数字、字符串、普通对象、普通数组），且不关心原型、方法、特殊类型。

会丢失 undefined 字段（被忽略）、function（被跳过）、Symbol（被忽略）
Date 变成字符串，RegExp 变成空对象 {}
遇到循环引用直接抛错：TypeError: Converting circular structure to JSON
BigInt 报错：TypeError: Do not know how to serialize a BigInt

手写可靠深拷贝要处理哪些关键点

真正健壮的深拷贝需识别类型、避免循环引用、保留构造信息，并合理处理不可枚举/原型链属性（视需求而定）。以下是核心判断逻辑和建议做法：

先用 Object.prototype.toString.call(val) 区分 [object Object]、[object Array]、[object Date]、[object RegExp]、[object Map]、[object Set] 等
用 WeakMap 缓存已拷贝的对象，检测并复用循环引用节点（否则无限递归）
Date 和 RegExp 直接用构造函数新建：new Date(val)、new RegExp(val)
Map/Set 需遍历键值对重建：new Map([...val.entries()])
函数通常不拷贝（保留原引用），除非明确需要 eval 或 toString 重构造（极少必要）

示例片段（简化版，不含 WeakMap 循环检测）：

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (obj instanceof Array) return obj.map(item => deepClone(item));
  if (obj instanceof Object) {
    const cloned = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        cloned[key] = deepClone(obj[key]);
      }
    }
    return cloned;
  }
  return obj;
}