浅拷贝与深拷贝全面解析及实战

欢迎大家来到IT世界,在知识的湖畔探索吧!

在JavaScript学习中，拷贝是很重要的一个知识点。拷贝主要分为浅拷贝（Shallow Copy）和深拷贝（Deep Copy）。本文将阐述两者的概念，还将通过手写示例深入探讨如何实现这两种拷贝方式，以及它们在实际应用中的考量。

浅拷贝：表面级复制

浅拷贝只复制对象的第一层属性，对于嵌套对象或数组，仅复制它们的引用，导致原对象和拷贝对象在这些部分仍然共享数据。

实现方法:

let obj = { a: 1, b: [1,2,3] }

欢迎大家来到IT世界,在知识的湖畔探索吧!

欢迎大家来到IT世界,在知识的湖畔探索吧!const arr = [1, 2, 3]; const newArr = [].concat(arr); console.log(newArry); // 输出 [1, 2, 3]

• Array.slice(0)

 const arr = [1, 2, 3]; const newArr = original.slice(0); console.log(newArr); // 输出 [1, 2, 3]

• Array.toReverse().reverse()

欢迎大家来到IT世界,在知识的湖畔探索吧! const arr = [1, 2, 3]; const newArr = arr.toReversed().reverse(); console.log(newArr); // 输出 [1, 2, 3]

• 扩展运算符 …args

 const arr = [1, 2]; const newArr = [...arr]; console.log(newArr); 

手写浅拷贝示例：

• 实现原理：forin循环遍历对象中的所有属性借助hasOwnProperty()方法，判断属性是否为对象显式属性
• 实现代码：

欢迎大家来到IT世界,在知识的湖畔探索吧!function shallowCopy(obj) { let newObj = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key]; } } return newObj; }

特点：

• 执行速度快，占用资源少。
• 适用于简单对象或不需要完全独立拷贝的场景。
• 不适用于包含嵌套对象或数组的复杂结构，因为更改嵌套数据会影响原对象。

深拷贝：彻底复制

深拷贝会递归地复制对象的所有层次，包括嵌套的数组和对象，从而确保原对象和拷贝对象完全独立，互不影响。

实现方法:

• JSON.parse(JSON.stringify(obj))（有局限性）

 const original = { a: 1, b: { c: 2 } }; const copy = JSON.parse(JSON.stringify(original)); console.log(copy); // 输出 { a: 1, b: { c: 2 } }

• structuredClone(obj)（较新，但仍有限制）

欢迎大家来到IT世界,在知识的湖畔探索吧! const original = { a: 1, b: { c: 2 } }; const copy = structuredClone(original); console.log(copy); // 输出 { a: 1, b: { c: 2 } }

• 自定义递归函数实现

手写深拷贝示例：

• 实现原理：

1. forin循环遍历对象中的所有属性
2. 借助hasOwnProperty()方法，判断属性是否为对象显式属性
3. 判断属性值类型，递归调用深拷贝函数

• 实现代码：

function deepCopy(obj) { if (!obj || typeof obj !== 'object') { return obj; } let newObj = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = deepCopy(obj[key]); } } return newObj; }

特点：

• 创建完全独立的副本，适用于复杂数据结构。
• 相对耗时和占用更多资源，尤其是面对深度嵌套对象。

实践比较与选择

• 性能与资源：浅拷贝因为操作简单，执行效率高，适合快速复制；深拷贝则因递归复制所有层级，成本较高，但在需要完全独立数据副本时不可或缺。
• 应用场景：对于简单的对象复制或状态克隆，浅拷贝足矣；而在需要确保数据完全隔离，避免外部修改影响内部状态时，深拷贝是更好的选择。
• 注意事项：使用JSON.stringify()和JSON.parse()进行深拷贝虽简便，但存在局限性（如不支持函数、Symbol、循环引用等）。自定义深拷贝时，循环引用的处理是一个常见的挑战。

结论

浅拷贝和深拷贝各有千秋，关键在于根据具体需求选择合适的拷贝策略。了解它们的实现机制，不仅能提升代码的健壮性，还能有效避免潜在的数据篡改问题。通过手写实现深浅拷贝，不仅可以加深对JavaScript对象的理解，也能在特定场景下提供灵活的解决方案。

文章转自：
https://juejin.cn/post/