javascript如何实现深拷贝与浅拷贝_有哪些常用方法？

浅拷贝只复制对象第一层属性的引用，深拷贝则递归复制所有层级；=赋值、Object.assign()、展开运算符等均为浅拷贝，jsON.Stringify+parse有类型丢失和循环引用限制；手写需处理类型判断、循环引用及内置对象，生产环境推荐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 的深拷贝局限

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

立即学习“Java免费学习笔记（深入）”；

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 缓存机制可能让深拷贝变得多余——先确认是否真需要拷贝，而不是在错误层级做隔离。