浅拷贝只复制对象第一层属性的引用，深拷贝则递归复制所有层级；=赋值、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 缓存机制可能让深拷贝变得多余——先确认是否真需要拷贝，而不是在错误层级做隔离。
