JavaScript拷贝：揭秘对象和数组的复制奥秘

2022-11-20 14:12:22

解锁 JavaScript 拷贝机制的奥秘，实现灵活性编程

在编程领域，拷贝是创建一个对象或数组副本的基本操作。与直接修改原始对象不同，拷贝允许开发者进行独立的操作和修改，而不会影响原始对象的完整性。JavaScript 作为一门现代编程语言，提供了一系列强大的拷贝机制，帮助开发者轻松地复制各种数据结构，实现灵活修改的目的。

浅拷贝：引用复制，数据共享

在 JavaScript 中，使用赋值运算符（=）复制一个对象时，会执行浅拷贝。此时，新对象包含对原始对象的引用，而不是创建独立的副本。这意味着两个对象共享相同的数据，对其中任何一个的更改都会影响另一个。

举个例子，假设我们有一个包含 name 和 age 属性的对象 person。

const person = {
  name: "John Doe",
  age: 30
};

// 浅拷贝
const personCopy = person;

在上面的代码中，personCopy 实际上是一个指向 person 对象的引用。如果我们修改 personCopy 的 name 属性，原始 person 对象的 name 属性也会发生变化。

personCopy.name = "Jane Doe";

console.log(person.name); // "Jane Doe"

深拷贝：创建副本，独立存储

如果我们希望创建一个完全独立的副本，我们需要使用深拷贝。深拷贝通过复制原始对象的每个属性和子属性，创建一个全新的对象。无论对新副本进行怎样的修改，都不会影响原始对象。

回到前面的例子，我们使用 JSON.parse(JSON.stringify()) 方法进行深拷贝。

// 深拷贝
const personDeepCopy = JSON.parse(JSON.stringify(person));

personDeepCopy.name = "Jane Doe";

console.log(person.name); // "John Doe"
console.log(personDeepCopy.name); // "Jane Doe"

正如代码所示，personDeepCopy 现在是一个与 person 完全独立的对象。对 personDeepCopy 的修改不会影响 person 对象。

何种场景下使用深拷贝？

1. 独立修改副本

当我们需要对副本进行修改而不会影响原始对象时，深拷贝是最佳选择。这在许多场景中都很有用，例如表单数据验证、数据缓存等。

2. 传递副本以避免意外修改

在将对象或数组作为参数传递给函数时，深拷贝可以防止函数意外修改原始对象。通过传递副本，我们可以确保原始对象保持不变。

3. 存储敏感数据

当我们存储敏感数据时，深拷贝可以提供额外的安全性。通过创建完全独立的副本，我们可以防止未经授权的访问或修改原始数据。

实现深拷贝

除了 JSON.parse(JSON.stringify()) 方法之外，还可以使用递归函数实现深拷贝。

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

  const copy = {};
  for (const key in originalObject) {
    copy[key] = deepCopy(originalObject[key]);
  }

  return copy;
}