搞懂JavaScript深浅拷贝，玩转对象复制

2023-09-06 01:27:09

浅拷贝 vs. 深拷贝：理解对象复制的本质

在 JavaScript 中，对象复制是一个重要的概念，它允许我们创建新对象，这些对象包含原始对象的相同数据。但是，根据我们复制对象的方式，我们可以创建浅拷贝 或深拷贝 。这两种技术在应用程序中有着不同的用途，了解它们之间的区别对于有效地利用它们至关重要。

浅尝辄止：浅拷贝只触及表面

浅拷贝 是复制对象的一种方法，它只复制对象的表面信息，例如属性名称和值。但是，它不复制存储在这些属性中的对象本身。这意味着如果浅拷贝的对象包含对另一个对象的引用，那么新对象也会引用相同的对象。

const personA = {
  name: "John",
  age: 20,
  address: {
    street: "Main Street",
    city: "Anytown",
  },
};

const personB = {...personA}; // 浅拷贝

personB.name = "Mary"; // 修改 personB 的属性

console.log(personA.name); // 输出: Mary

在这个例子中，personB 是 personA 的浅拷贝。当我们修改 personB.name 时，personA.name 也发生了改变，因为它们都引用了同一个对象。

深入骨髓：深拷贝还原全部

与浅拷贝不同，深拷贝 会递归地复制对象的每个属性，包括嵌套对象和数组。这意味着新对象与原始对象完全独立，修改其中一个对象不会影响另一个对象。

const personA = {
  name: "John",
  age: 20,
  address: {
    street: "Main Street",
    city: "Anytown",
  },
};

const personB = JSON.parse(JSON.stringify(personA)); // 深拷贝

personB.name = "Mary"; // 修改 personB 的属性

console.log(personA.name); // 输出: John

在这个例子中，personB 是 personA 的深拷贝。当我们修改 personB.name 时，personA.name 没有受到影响，因为它们是不同的对象。

实现深拷贝：一劳永逸

有多种方法可以实现深拷贝。以下是一种使用 JSON 的常见方法：

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

深浅拷贝：应用场景各不同

浅拷贝和深拷贝在不同的情况下都有其用途：

浅拷贝 适用于对象之间存在引用关系，但不需要修改对象内部数据的场景。例如，如果我们有两个对象，它们包含指向同一数组的引用，那么我们可以使用浅拷贝来创建新对象，这些对象也引用相同的数组。
深拷贝 适用于对象之间需要完全独立，并且需要修改对象内部数据的场景。例如，如果我们有两个对象，它们包含指向不同数组的引用，并且我们希望修改其中一个数组，那么我们需要使用深拷贝来创建新对象，这些对象包含对新数组的引用。