浅入浅出 JavaScript 深拷贝与浅拷贝的区别及如何实现

2023-12-09 20:38:31

深拷贝与浅拷贝的概述
JavaScript中的变量可以存储简单值（如数字、字符串、布尔值等）或引用值（如对象、数组）。当将一个引用值赋给另一个变量时，两个变量都将指向相同的底层对象。如果对其中一个变量所指向的对象进行修改，另一个变量所指向的对象也会受到影响。这种行为称为浅拷贝。

深拷贝是创建目标对象的一个副本，并且新副本包含原对象的完整拷贝。这意味着修改新副本不会影响到原对象。

如何实现深度和浅层拷贝

浅拷贝可以简单地通过赋值来实现。例如：

let originalObject = { name: 'Alice', age: 21 };
let copiedObject = originalObject;

在这种情况下，copiedObject只是originalObject的另一个引用。对其中一个对象所做的任何更改都将影响另一个对象。

深拷贝可以手动实现，但这是很繁琐和容易出错的。相反，使用JavaScript库来完成深拷贝要容易得多。例如，可以使用JSON.parse()和JSON.stringify()方法，lodash库或cloneDeep()方法来创建对象的深度副本。

const originalObject = { name: 'Alice', age: 21 };
const copiedObject = JSON.parse(JSON.stringify(originalObject));

在决定何时使用深度或浅层拷贝时，需要考虑以下几点：

优点：
- 完全隔离，相互独立，无需担心任何一方的改变而影响另一方。
- 创建对象副本时，不会改变原对象。
- 非常适合复制复杂的数据结构，如嵌套对象或数组。
- 可用于防止数据泄露或确保对象保持其完整性。
缺点：
- 性能开销较高，时间复杂度为O(n)。
- 内存消耗更高，空间复杂度为O(n)。
- 需要使用递归或迭代来实现，代码相对复杂。
- 对于简单的数据类型（如字符串或数字）进行深拷贝是没有意义的，因为它们本身就是不可变的。

优点：
- 性能开销低，时间复杂度为O(1)。
- 内存消耗低，空间复杂度为O(1)。
- 实现简单，只需要简单的赋值操作。
- 对于简单的数据类型（如字符串或数字）进行浅拷贝是有效的。
缺点：
- 引用类型变量之间相互关联，任何一方的改变都会影响另一方。
- 创建对象副本时，可能会改变原对象。
- 当对象包含循环引用时，浅拷贝会导致无限递归。
- 当需要将对象传递给其他函数或模块时，浅拷贝可能不是最好的选择，因为它可能会在不知情的情况下修改原对象。