浅拷贝只复制第一层属性,嵌套对象仍共享引用;JSON.parse(JSON.stringify())是最简深拷贝但丢失Date、函数等类型;手写需处理循环引用和内置类型;Lodash cloneDeep是生产首选。

浅拷贝只是复制了引用,不是新对象
当你用 Object.assign()、扩展运算符 {...obj} 或 Array.prototype.slice() 复制一个对象时,只做了浅拷贝:第一层属性值被复制,但遇到嵌套对象或数组,复制的仍是内存地址。修改副本里的嵌套值,原对象也会跟着变。
常见错误现象:
const a = { user: { name: 'Alice' } };
const b = { ...a };
b.user.name = 'Bob';
console.log(a.user.name); // 输出 'Bob' —— 原对象被意外改了
- 适用场景:确定对象只有一层结构,或你本意就是共享嵌套数据
- 注意
Object.assign()不会拷贝不可枚举属性和 symbol 键 - 扩展运算符对
null或undefined会报错,需提前校验
JSON.stringify + JSON.parse 是最简深拷贝,但有硬伤
这是开发中用得最多的一行式深拷贝:JSON.parse(JSON.stringify(obj))。它确实能递归复制所有层级,但只适用于纯数据对象。
典型兼容性问题:
const obj = {
name: 'Test',
date: new Date(),
fn: () => {},
undef: undefined,
sym: Symbol('id')
};
const copy = JSON.parse(JSON.stringify(obj));
console.log(copy); // { name: 'Test', date: null, fn: undefined, undef: undefined, sym: undefined }
-
Date变成null,Function、undefined、Symbol、RegExp、BigInt全部丢失或转为null/undefined - 循环引用会直接抛出
TypeError: Converting circular structure to JSON - 性能较差,尤其大对象——要序列化再解析,两次遍历
手写递归深拷贝要处理类型、循环引用和特殊值
真正健壮的深拷贝必须区分数据类型,并缓存已拷贝过的对象以避免死循环。核心逻辑是:遇到对象/数组就新建并递归,其他类型直接返回。
关键点:
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存原始对象 → 克隆对象映射,解决循环引用(如a.b = a) - 必须用
Object.prototype.hasOwnProperty避免遍历原型链上的属性 - 没处理
Date、RegExp、Map、Set等内置类型——需要按需扩展instanceof分支 - 不能拷贝函数的闭包环境,函数体可复制,但词法作用域无法还原
Lodash 的 cloneDeep 是生产环境首选
自己实现完整深拷贝成本高、边界多。Lodash 的 cloneDeep 已覆盖几乎所有 JS 内置类型、循环引用、不可枚举属性、甚至 TypedArray 和 error 对象。
立即学习“Java免费学习笔记(深入)”;
使用方式:
import { cloneDeep } from 'lodash-es'; // 推荐 es module 版本,支持 tree-shaking
const original = { a: 1, b: { c: 2 } };
const copy = cloneDeep(original);
- 不依赖全局
JSON,能正确处理Map、Set、Date、RegExp、ArrayBuffer - 内部也用
WeakMap解决循环引用,且做了大量性能优化 - 如果项目已引入 Lodash,直接用;否则考虑是否值得为深拷贝引入整个库——可单独安装
lodash.clonedeep











