深入剖析深拷贝和浅拷贝：把握 JavaScript 赋值的本质

2023-12-20 20:38:58

当我们踏入 JavaScript 的神奇世界时，变量赋值的奥妙往往会让我们一头雾水。深拷贝和浅拷贝，这两个术语经常出现，它们之间微妙的区别对于理解 JavaScript 中对象的赋值方式至关重要。

深拷贝：复制对象图的每一层

深拷贝是创建目标对象的新副本，该副本包含源对象的所有数据，即使是嵌套的对象。这意味着更改目标对象的属性不会影响源对象，反之亦然。深拷贝经常用于需要完全独立于源对象的新对象的情况下。

const original = {
  name: "John",
  address: {
    street: "123 Main St",
    city: "Anytown",
  },
};

const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.name = "Jane";
deepCopy.address.street = "456 Elm St";

console.log(original); // { name: "John", address: { street: "123 Main St", city: "Anytown" } }
console.log(deepCopy); // { name: "Jane", address: { street: "456 Elm St", city: "Anytown" } }

浅拷贝：仅复制对象的顶层属性

浅拷贝只创建源对象的顶层属性的新副本。这意味着对目标对象的更改会反映在源对象上，反之亦然。浅拷贝通常用于需要对源对象进行简单修改的情况。

const original = {
  name: "John",
  address: {
    street: "123 Main St",
    city: "Anytown",
  },
};

const shallowCopy = Object.assign({}, original);

shallowCopy.name = "Jane";
shallowCopy.address.street = "456 Elm St";

console.log(original); // { name: "Jane", address: { street: "456 Elm St", city: "Anytown" } }
console.log(shallowCopy); // { name: "Jane", address: { street: "456 Elm St", city: "Anytown" } }