JavaScript 深入解读：揭秘浅拷贝与深拷贝的奥秘

2023-10-01 19:34:26

作为 JavaScript 领域的探索者，我们不可避免地会遇到数据的拷贝操作。而浅拷贝与深拷贝之间的微妙差别对于理解代码的行为至关重要。本文将深入浅出地解析这两个概念，为你的 JavaScript 技能库添砖加瓦。

浅拷贝：表面上的复制

浅拷贝创建了一个新数据，其中包含原始值的副本。对于基本类型（如数字和字符串），浅拷贝直接复制其值。然而，对于引用类型（如对象和数组），浅拷贝仅仅复制了指向原始数据的内存地址，而不是实际的数据。

举个例子：

const originalObject = { name: "John Doe" };
const shallowCopy = Object.assign({}, originalObject);

shallowCopy.name = "Jane Doe";

console.log(originalObject); // { name: "Jane Doe" }

在这种情况下，对浅拷贝 shallowCopy 的修改也会影响原始对象 originalObject，因为它们都指向相同的内存地址。

深拷贝：彻底的复制

深拷贝创建了一个新数据，其中包含原始数据的所有副本。无论基本类型还是引用类型，深拷贝都会复制实际的数据值。这样一来，修改深拷贝不会影响原始数据。

常见的深拷贝方法包括：

使用 JSON.parse(JSON.stringify(obj))
使用 lodash 或 underscore 等第三方库

以下示例演示了深拷贝：

const originalObject = { name: "John Doe" };
const deepCopy = JSON.parse(JSON.stringify(originalObject));

deepCopy.name = "Jane Doe";

console.log(originalObject); // { name: "John Doe" }

在这个例子中，原始对象 originalObject 仍然保持不变，而深拷贝 deepCopy 的修改对其没有任何影响。

选择浅拷贝还是深拷贝

浅拷贝和深拷贝各有其优点和缺点：