Javascript - 克隆一个数组无需引用

在编写 Javascript 时，我们经常需要复制一个数组以便于在原始数组的基础上进行一些更改，但是使用传统的赋值方式是会引用到原始数组的，这导致了很多问题。在这里，我们将介绍如何克隆一个 Javascript 数组而不是引用原始数组。

方法一 - Spread 操作符

在 ES6 中，Javascript 引入了 Spread 操作符，它提供了一种快速、简单的方法来将一个数组转换为多个值，并且它同样适用于将数组克隆到一个新的数组中。

下面的代码展示了如何使用 Spread 操作符：

const originalArray = [1, 2, 3, 4, 5];
const clonedArray = [...originalArray];

现在，clonedArray 将包含与 originalArray 相同的值，但是它是一个全新的数组，由于它是新数组，所以对 clonedArray 的修改不会影响到 originalArray。

方法二 - Array.from()

另一种在 Javascript 中克隆数组的方法是使用 Array.from() 方法，该方法可以从类数组或可迭代对象中创建一个新的数组。

以下是使用 Array.from() 克隆数组的示例：

const originalArray = [1, 2, 3, 4, 5];
const clonedArray = Array.from(originalArray);

clonedArray 仍然是原始数组的一个克隆，因此任何对 clonedArray 的更改都不会影响到 originalArray。

方法三 - Array.slice()

在 Javascript 中，数组也具有一个 slice() 方法，它可以返回一个新的数组，仅包含从开始到结束（不包括结束）的元素，也可以完全复制整个数组。

以下是使用 slice() 克隆数组的示例：

const originalArray = [1, 2, 3, 4, 5];
const clonedArray = originalArray.slice();

这将创建一个新数组 clonedArray，该数组是 originalArray 的一个完整复制。

结论

这三种克隆 Javascript 数组的方法都能有效地创建一个新的数组而不是引用原始数组。因此，当需要对数组进行修改时，我们可以使用这些方法而无需担心是否会影响原始数组。