浅拷贝与深拷贝：JavaScript的必备知识点，手把手教你如何实现！
2023-09-08 04:39:43
浅拷贝与深拷贝：全面指南
浅拷贝 与深拷贝 是两个关键的编程概念，在 JavaScript 中尤其重要。理解这两个概念及其差异对于构建健壮、高效的应用程序至关重要。本文将深入探讨浅拷贝和深拷贝，涵盖它们的定义、实现方式以及实际应用场景。
浅拷贝：只拷贝一层
浅拷贝只复制对象的第一层 属性。这意味着它创建了一个新对象，该对象具有与原始对象相同的一组属性，但指向相同的基本值。
实现浅拷贝
使用 JavaScript 的 Object.assign() 方法可以轻松实现浅拷贝。该方法将一个或多个源对象的属性复制到目标对象中：
const obj = { name: "John", age: 20 };
const newObj = Object.assign({}, obj);
在上面的示例中，newObj 是 obj 的浅拷贝，它具有相同的属性，但指向 obj 的相同值。
深拷贝：复制所有层
深拷贝不仅复制对象的属性，还递归地复制所有子对象。这创建了一个新的对象树，其中每个节点都是原始树的副本。
实现深拷贝
JavaScript 中深拷贝的常用方法是利用 JSON.parse() 和 JSON.stringify() 方法：
const obj = { name: "John", age: 20, child: { name: "Mary", age: 10 } };
const newObj = JSON.parse(JSON.stringify(obj));
在上面的示例中，newObj 是 obj 的深拷贝，它具有完全独立的属性和子对象。
浅拷贝与深拷贝的区别
浅拷贝和深拷贝的主要区别在于复制深度 ：
- 浅拷贝： 只复制第一层属性，指向相同的值。
- 深拷贝： 复制所有层，创建独立的值。
应用场景
选择浅拷贝还是深拷贝取决于特定情况：
- 浅拷贝： 适用于简单数据结构（例如对象或数组）的快速复制，其中引用共享不会造成问题。
- 深拷贝： 适用于复杂数据结构（例如对象树或链表）的复制，其中引用共享可能导致意外行为。
代码示例
为了进一步理解浅拷贝和深拷贝之间的差异，让我们通过一个代码示例来说明：
const obj = { name: "John", age: 20, child: { name: "Mary", age: 10 } };
// 浅拷贝
const newObj = Object.assign({}, obj);
// 修改 newObj 的 child 对象
newObj.child.name = "Jane";
console.log(obj.child.name); // "Mary" (未修改)
console.log(newObj.child.name); // "Jane" (已修改)
// 深拷贝
const newObj2 = JSON.parse(JSON.stringify(obj));
// 修改 newObj2 的 child 对象
newObj2.child.name = "Alice";
console.log(obj.child.name); // "Mary" (未修改)
console.log(newObj2.child.name); // "Alice" (已修改)
在浅拷贝的情况下，newObj 和 obj 指向相同的 child 对象，因此 newObj 对 child 的修改也反映在 obj 中。
而在深拷贝的情况下，newObj2 创建了一个 child 对象的副本，因此 newObj2 对 child 的修改不会影响 obj。
结论
了解浅拷贝和深拷贝的差异对于 JavaScript 开发人员至关重要。通过选择正确的复制方法，可以确保应用程序中数据的正确性和一致性。
常见问题解答
-
浅拷贝和深拷贝有什么共同点？
它们都是创建新对象的复制方法。 -
我什么时候应该使用浅拷贝？
当复制简单数据结构并且不需要复制嵌套对象时。 -
我什么时候应该使用深拷贝？
当复制复杂数据结构并且需要独立的值时。 -
除了
Object.assign()和JSON.stringify()/JSON.parse()，还有其他浅拷贝或深拷贝方法吗？
其他浅拷贝方法包括扩展运算符和_.clone()（Lodash 库）。其他深拷贝方法包括_.cloneDeep()（Lodash 库）和递归函数。 -
深拷贝是否比浅拷贝慢？
是的，深拷贝通常比浅拷贝慢，因为它需要遍历和复制整个对象树。
