JavaScript 深浅拷贝解析：揭秘数据复制的奥秘

2024-01-04 09:54:10

JavaScript 深浅拷贝详解

在 JavaScript 中，理解深浅拷贝的概念对于管理数据至关重要。通过掌握这些不同的拷贝方法，您可以确保数据操作的准确性和可靠性。

浅拷贝

浅拷贝创建目标对象的副本，该副本包含对原始对象中引用类型的引用。这意味着原始对象中引用类型的值的任何更改都将反映在浅拷贝中。另一方面，基本类型的值（如数字和字符串）直接复制到浅拷贝中，因此不会受到原始对象中更改的影响。

示例

const originalObject = {
  name: "John Doe",
  address: {
    street: "123 Main Street",
  },
};

const shallowCopy = Object.assign({}, originalObject);

originalObject.address.street = "456 Elm Street";

console.log(shallowCopy.address.street); // 输出：456 Elm Street

在这个示例中，shallowCopy 是原始对象的浅拷贝。当更改 originalObject 中 address 对象的 street 属性时，浅拷贝中的 street 属性也会反映这一更改。这是因为 address 属性引用的是同一个对象。

深拷贝

与浅拷贝不同，深拷贝创建一个新的对象，该对象包含对原始对象中引用类型值的副本。这确保了浅拷贝中任何对引用类型的值的更改都不会影响原始对象。

示例

const deepCopy = JSON.parse(JSON.stringify(originalObject));

originalObject.address.street = "789 Oak Street";

console.log(deepCopy.address.street); // 输出：123 Main Street

在这个示例中，deepCopy 是原始对象的深拷贝。尽管更改了 originalObject 中 address 对象的 street 属性，但 deepCopy 中的 street 属性保持不变。这是因为 JSON.stringify() 和 JSON.parse() 方法创建了一个新对象，其中包含对引用类型值的副本。