JS 变量赋值和复制的奥秘：浅拷贝与深拷贝

2023-12-04 21:53:23

在 JavaScript 的世界中，变量赋值是操纵数据和构建复杂应用程序的关键操作。然而，当涉及到对象赋值时，事情变得有些棘手，因为 JavaScript 变量不存储实际值，而是存储对对象的引用。

当您将一个对象赋值给另一个变量时，它不会创建该对象的副本，而是仅仅创建一个指向同一对象的引用。这意味着，如果对其中一个变量中的对象进行任何更改，另一个变量中的对象也会受到影响。

浅拷贝：一叶障目不见泰山

为了解决这个问题，可以使用浅拷贝来创建对象的表面副本。浅拷贝复制了原始对象的属性，但仅在第一层。如果原始对象中包含其他对象，则浅拷贝的副本中这些对象仍然是原始对象的引用。

使用 ... 运算符可以轻松实现浅拷贝：

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    number: 123
  }
};

const obj2 = { ...obj1 };

在上面的示例中，obj2 是 obj1 的浅拷贝。obj2 具有与 obj1 相同的属性值，但其 address 属性仍然引用 obj1 中的对象。这意味着，如果对 obj1.address 进行任何更改，obj2.address 也会受到影响。

深拷贝：抽丝剥茧，彻底复制

对于包含嵌套对象的复杂数据结构，浅拷贝是不够的。在这种情况下，我们需要使用深拷贝来创建一个对象的完整副本，包括嵌套对象的副本。

实现深拷贝的一种常见方法是使用递归函数：

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

  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}