深度对比：浅拷贝与深拷贝——JavaScript 对象复制的剖析

2024-02-06 18:01:51

简介

在 JavaScript 的世界中，对象是至关重要的数据类型。它们允许我们组织和存储复杂的数据，同时还提供了一系列方便的方法来访问和操作这些数据。然而，当我们希望复制对象时，就会出现一个微妙的挑战。

JavaScript 提供了两种对象复制方法：浅拷贝和深拷贝。虽然这两种方法乍一看似乎很相似，但它们在处理嵌套对象和数据结构时却有根本性的不同。了解这两种方法的工作原理至关重要，可以避免常见的陷阱和错误，并确保我们的代码在所有情况下都能正确运行。

浅拷贝

浅拷贝，顾名思义，只会复制对象的第一层属性。它创建了一个新对象，该对象具有与原始对象相同的属性和值，但它不复制嵌套对象或数据结构的副本。

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

const shallowCopy = {...originalObject};

在这个例子中，shallowCopy 将包含 name 和 address 属性的副本，但 address 属性本身是一个引用，它指向原始 originalObject 中的 address 对象。因此，对 shallowCopy 中的 address 属性进行任何修改都将反映在原始对象中。

深拷贝

另一方面，深拷贝会创建原始对象和所有嵌套对象和数据结构的完整副本。它确保新对象完全独立于原始对象，任何对新对象的修改都不会影响原始对象。

执行深拷贝有多种方法。一种常见的方法是使用递归算法：

function deepCopy(object) {
  if (typeof object !== "object" || object === null) {
    return object;
  }

  const newObject = Array.isArray(object) ? [] : {};

  for (const key in object) {
    newObject[key] = deepCopy(object[key]);
  }

  return newObject;
}