内蒙古自治区建设厅网站设计素材网站

个人博客：haichenyi.com。感谢关注

一. 目录

• 一–目录
• 二–核心区别
• 三–内存结构对比
• 四–实现方式对比
• 五–使用场景
• 六–循环引用问题
• 七–总结
  

二. 核心区别

深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是对象复制的两种核心策略，它们的核心区别在于 ​对嵌套对象的处理方式。

特性	浅拷贝	深拷贝
复制层级	仅复制对象的第一层属性	递归复制对象的所有层级属性
内存引用	嵌套对象(如数组，对象)与原对象共享内存地址	嵌套对象与原对象完全独立，无内存共享
修改影响	修改拷贝后的嵌套对象会影响原对象	修改拷贝后的对象不会影响元对象
性能	快(仅复制第一层)	慢(递归所有层级)
适用场景	简单对象(无嵌套引用类型)	复杂对象(嵌套对象数组函数等)

三. 内存结构对比

1. 浅拷贝示例

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 } （全新内存地址）

同样的方式验证深拷贝。

四. 实现方式对比

1. 浅拷贝的实现

//展开运算符（...）​：
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]

2. 深拷贝的实现

//​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);

五. 使用场景

1. 浅拷贝适用场景
   • 对象属性均为原始类型（number、string、boolean等）。
   • 明确知道嵌套对象需要共享修改（如状态管理中的共享配置）。
2. 深拷贝适用场景
   • 需要完全独立的对象副本（如撤销/重做功能）。
   • 嵌套对象需要隔离修改（如表单数据提交前脱敏处理）。
   • 复杂对象（包含Date、RegExp、Map等特殊对象）。
     

六. 循环引用问题

1. 浅拷贝:无循环引用问题，因为仅复制第一层。
2. 深拷贝:递归深拷贝时需处理循环引用，否则会栈溢出：

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;
}