JS—深拷贝与浅拷贝：2分钟掌握二者的区别
个人博客：haichenyi.com。感谢关注
一. 目录
- 一–目录
- 二–核心区别
- 三–内存结构对比
- 四–实现方式对比
- 五–使用场景
- 六–循环引用问题
- 七–总结
二. 核心区别
深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是对象复制的两种核心策略，它们的核心区别在于 对嵌套对象的处理方式。
| 特性 | 浅拷贝 | 深拷贝 |
|---|---|---|
| 复制层级 | 仅复制对象的第一层属性 | 递归复制对象的所有层级属性 |
| 内存引用 | 嵌套对象(如数组，对象)与原对象共享内存地址 | 嵌套对象与原对象完全独立，无内存共享 |
| 修改影响 | 修改拷贝后的嵌套对象会影响原对象 | 修改拷贝后的对象不会影响元对象 |
| 性能 | 快(仅复制第一层) | 慢(递归所有层级) |
| 适用场景 | 简单对象(无嵌套引用类型) | 复杂对象(嵌套对象数组函数等) |
三. 内存结构对比
- 浅拷贝示例
const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
console.log("original ",original )
console.log("shallowCopy ",shallowCopy )
// 内存结构：
// original ──> { a: 1, b: ⬤ }
// ↓
// shallowCopy ─> { a: 1, b: ⬤ }
// ⬤ 指向同一内存地址
上面是浅拷贝之后对象的结构，为什么说里面的b对象是指向的相同的内存地址呢？也就是**核心区别里面的第二条：内存引用。**怎么证明这一点呢？我们修改其中一个对象b.c的值，另一个对象b.c的值也跟着改变，就证明了我这个观点
2. 深拷贝示例
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
// 内存结构：
// original ──> { a: 1, b: ⬤ }
// ↓
// deepCopy ──> { a: 1, b: ⬤ }
// ↓
// { c: 2 } （全新内存地址）
同样的方式验证深拷贝。
四. 实现方式对比
- 浅拷贝的实现
//展开运算符（...）：
const obj = { a: 1, b: { c: 2 } };
const copy = { ...obj };
//Object.assign()
const copy = Object.assign({}, obj);
//数组浅拷贝
const arr = [1, [2, 3]];
const copy = arr.slice(); // 或 [...arr]
- 深拷贝的实现
//JSON方法（局限性大）：
const copy = JSON.parse(JSON.stringify(obj));
//缺点：无法处理函数、undefined、循环引用、Date对象等。
//递归实现：
function deepClone(obj, hash = new WeakMap()) {
if (obj === null || typeof obj !== "object") return obj;
if (hash.has(obj)) return hash.get(obj); // 处理循环引用
const clone = new obj.constructor();
hash.set(obj, clone);
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = deepClone(obj[key], hash);
}
}
return clone;
}
//第三方库（推荐）：lodash
import _ from "lodash";
const copy = _.cloneDeep(obj);
五. 使用场景
- 浅拷贝适用场景
- 对象属性均为原始类型（number、string、boolean等）。
- 明确知道嵌套对象需要共享修改（如状态管理中的共享配置）。
- 深拷贝适用场景
- 需要完全独立的对象副本（如撤销/重做功能）。
- 嵌套对象需要隔离修改（如表单数据提交前脱敏处理）。
- 复杂对象（包含Date、RegExp、Map等特殊对象）。
六. 循环引用问题
- 浅拷贝:无循环引用问题，因为仅复制第一层。
- 深拷贝:递归深拷贝时需处理循环引用，否则会栈溢出：
const obj = { a: 1 };
obj.self = obj; // 循环引用
const copy = deepClone(obj); // 需正确处理循环引用
七. 总结
| 维度 | 浅拷贝 | 深拷贝 |
|---|---|---|
| 独立性 | 部分独立(仅顶层属性独立) | 完全独立 |
| 内存占用 | 低(共享嵌套对象) | 高(完全独立副本) |
| 开发成本 | 低(原生支持) | 高(需处理循环引用，特殊对象) |
| 适用性 | 简单数据 | 复杂数据 |
选择原则：
- 优先使用浅拷贝，除非明确需要深拷贝。
- 深拷贝应谨慎用于大型对象（性能敏感场景）。
深拷贝的简单实现，仅供参考
function deepClone(target, hash = new WeakMap()) {
// 处理非对象和null的情况（原始类型直接返回）
if (target === null || typeof target !== 'object') {
return target;
}
// 处理循环引用
if (hash.has(target)) {
return hash.get(target);
}
// 处理Date对象
if (target instanceof Date) {
return new Date(target);
}
// 处理RegExp对象
if (target instanceof RegExp) {
return new RegExp(target);
}
// 处理Map对象
if (target instanceof Map) {
const cloneMap = new Map();
hash.set(target, cloneMap);
target.forEach((value, key) => {
cloneMap.set(deepClone(key, hash), deepClone(value, hash));
});
return cloneMap;
}
// 处理Set对象
if (target instanceof Set) {
const cloneSet = new Set();
hash.set(target, cloneSet);
target.forEach(value => {
cloneSet.add(deepClone(value, hash));
});
return cloneSet;
}
// 处理数组和普通对象
const cloneObj = new target.constructor();
hash.set(target, cloneObj);
// 递归拷贝所有属性（包括Symbol属性和不可枚举属性）
Reflect.ownKeys(target).forEach(key => {
cloneObj[key] = deepClone(target[key], hash);
});
return cloneObj;
}