JavaScript 中数组的深复制与浅复制：你所不知道的差异

2023-12-12 14:29:08

在 JavaScript 中，数组是引用类型，这意味着它们存储的是对实际数组的引用，而不是数组元素的实际值。这个特性在处理复杂数据结构时非常有用，但它也可能导致一些意外的行为。

了解数组的深复制和浅复制之间的区别至关重要。深复制创建一个数组的新副本，其中包含新创建的元素副本。浅复制只是创建一个指向原始数组的另一个引用，因此对新数组的任何更改都会反映在原始数组中。

深复制与浅复制的对比

以下是一些帮助您理解深复制和浅复制之间区别的示例：

浅复制：

const originalArray = [1, 2, 3];
const shallowCopy = originalArray;

shallowCopy[0] = 4;

console.log(originalArray); // [4, 2, 3]

在这个示例中，shallowCopy只是originalArray的另一个引用。当我们修改shallowCopy的第一个元素时，原始数组originalArray也受到影响。

深复制：

const originalArray = [1, 2, 3];
const deepCopy = JSON.parse(JSON.stringify(originalArray));

deepCopy[0] = 4;

console.log(originalArray); // [1, 2, 3]

在这个示例中，我们使用JSON.parse()和JSON.stringify()创建了originalArray的深拷贝。由于它是原始数组的新副本，因此对deepCopy的任何修改都不会影响originalArray。

多维数组的深复制

当处理多维数组时，深复制变得更加重要。浅复制只会复制数组的外层，而不会复制嵌套的数组。这可能导致意外的错误。

以下是如何创建多维数组的深复制：

const originalArray = [[1, 2, 3], [4, 5, 6]];
const deepCopy = JSON.parse(JSON.stringify(originalArray));

deepCopy[0][0] = 4;

console.log(originalArray); // [[1, 2, 3], [4, 5, 6]]

在这个示例中，deepCopy是originalArray的多维数组深副本。当我们修改deepCopy的第一个元素时，原始数组originalArray保持不变。