精辟区别：JavaScript 中的深拷贝和浅拷贝

2023-05-04 18:15:48

浅尝则止与深挖潜力：JavaScript 中浅拷贝与深拷贝的本质

在 JavaScript 的对象操作中，浅拷贝和深拷贝是两种重要的复制方式，它们适用于不同的场景，并具有独特的优势。了解这两者的本质至关重要，以便根据特定需求做出明智的选择。

浅拷贝：一叶障目

浅拷贝仅复制对象的引用，而不是其实际内容。这类似于制作一份文件副本，但只复制了文件快捷方式，而不是实际文件本身。如果原始对象包含对其他对象的引用，那么浅拷贝也会复制这些引用，但不会复制实际的对象。

代码示例：

const person = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
};

const personCopy = { ...person };

console.log(personCopy === person); // false (不同的对象引用)
console.log(personCopy.address === person.address); // true (同一地址对象的引用)

在上述示例中，personCopy是person的浅拷贝。虽然personCopy和person指向不同的对象，但它们对address对象的引用是相同的。因此，修改personCopy的地址也会修改person的地址。

深拷贝：触类旁通

深拷贝不仅复制对象的引用，还复制其实际内容。这就好比制作一份文件副本，不仅复制了快捷方式，还复制了实际文件。如果原始对象包含对其他对象的引用，那么深拷贝也会复制这些引用和实际对象。

代码示例：

const person = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
};

const personCopy = JSON.parse(JSON.stringify(person));

console.log(personCopy === person); // false (不同的对象引用)
console.log(personCopy.address === person.address); // false (不同的地址对象的引用)