深度克隆与浅克隆：透视 JavaScript 数据的复制之道

2023-10-04 03:20:25

引子

在 JavaScript 的世界中，数据的复制是一项至关重要的操作。当我们需要创建原始数据的副本时，克隆就派上用场了。然而，并非所有的克隆都是生而平等的。JavaScript 提供了两种类型的克隆：深度克隆和浅克隆。了解它们之间的区别对于有效管理数据至关重要。

浅克隆：只及表面

浅克隆创建目标对象，并从原始对象复制其所有属性。然而，它仅复制引用类型属性的引用，而不是其值。也就是说，目标对象中的引用类型属性指向与原始对象中相同的底层对象。

示例：

const original = { name: "John Doe", address: { street: "Main Street" } };
const shallowCopy = { ...original };

original.name = "Jane Doe";
original.address.street = "Park Avenue";

console.log(shallowCopy); // { name: "Jane Doe", address: { street: "Park Avenue" } }

正如示例所示，更改原始对象的值会影响浅克隆。这是因为两者都指向相同的地址对象。

深度克隆：完全复制

与浅克隆不同，深度克隆创建目标对象，并递归复制原始对象的所有属性值。这意味着不仅复制原始对象中的值，还复制所有嵌套对象的副本。

示例：

const original = { name: "John Doe", address: { street: "Main Street" } };
const deepCopy = JSON.parse(JSON.stringify(original));

original.name = "Jane Doe";
original.address.street = "Park Avenue";

console.log(deepCopy); // { name: "John Doe", address: { street: "Main Street" } }

在上面的示例中，对原始对象的更改不会影响深度克隆，因为它们存储的是值副本，而不是引用。

何时使用哪种克隆？

深度克隆和浅克隆都有各自的用例：