拷情缘：JavaScript 里的深拷贝与浅拷贝

2023-11-19 07:46:07

在 JavaScript 中，深拷贝和浅拷贝是两个重要的概念，它们决定了复制对象或数组时如何处理对象的引用和值。理解这些概念对于高效地管理内存和避免意外的错误至关重要。

浅拷贝

浅拷贝只复制对象的引用，这意味著新的对象或数组与原始对象或数组指向同一块内存区域。任何对新对象或数组的更改都会反映在原始对象或数组上，反之亦然。

在 JavaScript 中，可以使用赋值运算符 (=) 来进行浅拷贝。例如：

const originalObject = { name: "John", age: 30 };
const copiedObject = originalObject;

copiedObject.name = "Jane";

console.log(originalObject.name); // 输出："Jane"

在这个例子中，copiedObject 是 originalObject 的浅拷贝。当 copiedObject.name 被更改为 "Jane" 时，originalObject.name 也被更改为 "Jane"，因为它们指向同一块内存区域。

深拷贝

深拷贝复制对象的实际值，这意味着新的对象或数组与原始对象或数组存储在不同的内存区域。对新对象或数组的任何更改都不会影响原始对象或数组，反之亦然。

在 JavaScript 中，可以使用 JSON.parse(JSON.stringify()) 或第三方库（如 lodash) 来进行深拷贝。例如：

const originalObject = { name: "John", age: 30 };
const copiedObject = JSON.parse(JSON.stringify(originalObject));

copiedObject.name = "Jane";

console.log(originalObject.name); // 输出："John"

在这个例子中，copiedObject 是 originalObject 的深拷贝。当 copiedObject.name 被更改为 "Jane" 时，originalObject.name 仍然是 "John"，因为它们存储在不同的内存区域。

选择深拷贝或浅拷贝

在选择使用深拷贝或浅拷贝时，需要考虑以下几点：

内存管理： 深拷贝会消耗更多的内存，因为新对象或数组需要存储在不同的内存区域。浅拷贝则不会消耗额外的内存，因为新对象或数组与原始对象或数组指向同一块内存区域。
数据完整性： 深拷贝可以确保新对象或数组与原始对象或数组完全独立，不会受到原始对象或数组的更改的影响。浅拷贝则不能保证数据完整性，因为任何对新对象或数组的更改都会反映在原始对象或数组上。
性能： 深拷贝通常比浅拷贝慢，因为需要创建新的对象或数组并复制值。浅拷贝则更快，因为只需要复制对象的引用。