Javascript克隆数组的3种方法

简介：用Javascript复制或克隆数组通常会使初学者感到困惑。本文介绍了在Javascript中复制或克隆数组的不同方法以及有关它们的一些隐藏事实。

您必须了解一些基本概念，例如Javascript中的可变对象和不可变对象。

如何在Javascript中克隆数组？

这里有一些用Javascript复制数组的方法。您可以选择最适合您的一种。

使用现代ES6传播算子

这是在Javascript中克隆数组的现代方法。

const originalArray = [2,4,6,8,10]
const clone = [...originalArray]

传播运算符…传播或复制Javascript中可迭代的元素（如数组或字符串）。

该价差操作更加强大，适用于不同的场景似乎比在这种情况下。

使用切片

这是在Javascript中复制数组的另一种流行方法。

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

Slice通常用于获取从起始索引到结束索引（不包括在内）的子数组。

使用Concat

此方法是在Javascript中复制数组的另一种流行方法。

const originalArray = [1,2,3,4,5]
const clone = [].concat(originalArray)

Concat是合并两个可迭代对象的非常有用的方法。这样，我们获取一个空数组并将原始数组连接到其中。它创建阵列的新副本。

可变对象与不可变对象Javascript

我开始熟悉Python中的可变和不可变的术语。这个概念也遵循Javascript。

可变的是那些一旦初始化就可以更改的值，例如对象，数组，函数等。

不变对象是指像原始数据类型一样一旦初始化就无法更改的对象。重要的是要注意，我们只能将不可变类型引用到新值，而旧值变成垃圾值。

可变对象是引用类型的对象，这意味着如果我们使用=运算符复制可变对象，它们将指向同一内存位置。

为什么我们不使用=赋值运算符？

这是个有趣的问题。

我们知道Javascript中有两种类型的对象：可变对象和不可变对象，而数组是可变对象。

这是一个含义的示例。

originalArray = [1,2,3,4,5]
clone = originalArray

#Here begins the problem
clone[0] = 100

console.log(originalArray) # [100,2,3,4,5]
console.log(clone) #[100, 2,3,4,5]

我只改变了clone对象，怎么originalArray改变了？

这是概念。

该=操作只复制的参考originalArray的clone。这意味着它们引用内存中的同一数组。

这就是为什么我们不使用=运算符来复制可变对象的原因。

该=运营商唯一的作品复制不可变的项目。

传播操作员创建浅拷贝

您如何看待克隆此数组[[1,2,3]，[4,5,6]，[7,8,9]。

我们可以使用散布运算符创建此数组的副本吗？

这是一个重要的用例，因为与散布运算符打交道时，您将经常遇到此问题。

请注意，价差运算符仅将值复制到一个级别。这意味着嵌套项仍将是引用类型数组。

这是描述相同示例的示例。

const originalArray = [[1,2,3], [4,5,6], [7,8,9]]
const clone = [...originalArray]

clone[0] = 10
clone[1][0] = 77

#clone = [10, [77,5,6], [7,8,9]]
#originalArray = [[1,2,3], [77,5,6], [7,8,9]]

现在，您可以看到此问题的实际应用。

传播算子仅复制一个级别的可迭代对象。其他嵌套项目仍然是引用类型或可变的。

结论

上面提到的所有方法都可以在任何项目中使用。我个人更喜欢散布运算符，因为它可以有效地工作并且语法简洁。

您还可以去concat或slice您认为合适的。

如果您有任何问题或建议，请随时在评论中提问。