如何使用 JavaScript 复制数组

数组是用于显示、操作和处理数据的最常用和最基本的功能。我们可以使用 JavaScript 函数、方法和运算符获取相同的数组及其值。本文介绍了在 JavaScript 中创建原始数组副本的各种方法。

如何创建重复数组？

我们可以操作数组及其值来执行排序、过滤或映射等任务，但我们希望保持原始数组不变。

• 重复数组可以将原始数组的方法发送出去，并且某些方法可以选择原始数组的索引。
• 克隆或复制数组时，请务必保留原始数组以供参考，并对其进行额外处理或修改。
• 如果数组元素作为对象工作，则避免修改索引及其数据。

创建重复数组的方法

以下方法用于使用 JavaScript 函数创建包含其值的重复数组。

• 使用 slice()
• 使用 concat() 方法
• 使用扩展运算符
• 使用 JSON.parse() 和 JSON.stringify()
• 使用 for 循环
• 使用 while 循环
• 使用 from 运算符
• 使用 of 运算符
• 使用 assign 方法
• 使用 Array.map() 方法
• 使用带 map 函数的 Array.from() 方法
• 使用 filter 方法
• 使用 reduce 方法

使用 slice()

slice 方法创建原始数组及其值的副本。它是创建原始数组的副本或克隆的最简单、最快的方法。如果我们写入开始和结束索引位置，JavaScript 会从数组的开始值到结束值创建副本。如果我们使用空的 slice() 方法，JavaScript 会复制整个原始数组。

语法

以下语法显示了使用 JavaScript slice() 方法克隆的数组。

示例

以下示例显示了使用 JavaScript slice() 方法克隆的数组。

示例 1

以下示例显示了使用 JavaScript slice() 方法克隆的数组及其所有值。

输出

输出显示原始数组的重复数组。

示例 2

以下示例显示了使用 JavaScript slice() 方法克隆的数组和所需值。

输出

输出显示原始数组的重复数组。

使用 concat() 方法

concat 方法用于使用 JavaScript 函数创建数组的克隆或副本。如果我们要创建数组的精确副本，则使用 concat() 方法和原始数组变量。此技术使用一个新数组通过连接两个或多个数组来创建重复数组。不允许更改或修改原始数组。此方法比 slice 方法慢，因为它使用空数组来使用 concat 方法。

语法

以下语法显示了使用 JavaScript concat() 方法克隆的数组。

示例

以下示例显示了使用 JavaScript concat() 方法的重复数组。

输出

输出显示原始数组的重复数组。

使用扩展运算符

在 JavaScript 中，具有相同元素的新数组用作扩展运算符。扩展运算符有助于创建原始数组的克隆或重复数组。不允许使用数据和索引修改原始数组。

语法

以下语法显示了使用 JavaScript 扩展运算符克隆的数组。

示例

以下示例显示了使用 JavaScript 扩展运算符克隆的数组。

输出

输出显示原始数组的重复数组。

使用 JSON.parse() 和 JSON.stringify()

在 JavaScript 中克隆数组的另一种技术是使用 JSON.parse() 和 JSON.stringify() 方法。使用此方法，通过将 JSON 字符串解析为原始数组来创建新数组。

语法

以下语法显示了使用 JavaScript JSON.parse() 和 JSON.stringify() 方法克隆的数组。

示例

以下示例显示了使用 JavaScript JSON.parse() 和 JSON.stringify() 方法的重复数组。

输出

输出显示原始数组的重复数组。

使用 for 循环

JavaScript for 循环用于迭代数组中所有可用的元素。如果我们知道复制数组需要多少次迭代，那么我们可以使用 JavaScript for 循环。我们可以使用 for 循环修改数组值和索引位置。

语法

以下语法显示了使用 JavaScript for 循环克隆的数组。

示例

以下示例显示了使用 JavaScript for 循环克隆的数组。

示例 1

以下示例显示了使用 JavaScript "for" 循环克隆的数组及其所有值。

输出

输出显示原始数组的重复数组。

示例 2

以下示例显示了使用 JavaScript "for" 循环克隆的数组和所需值。

输出

输出显示原始数组的重复数组。

使用 from 运算符

在 JavaScript 中克隆数组的一个简单选项是 from() 函数。此方法使用可选的映射函数将现有数组转换为新数组，并修改新数组中的值。我们可以使用 from() 方法，并引用原始数组和运算符之前的 Array 关键字。

语法

以下语法显示了使用 JavaScript from 循环克隆的数组。

示例

以下示例显示了使用 JavaScript "from" 运算符克隆的数组。

输出

输出显示原始数组的重复数组。

使用 of 运算符

“of”运算符与数组标识符一起使用以创建重复数组。此运算符创建数组的克隆而不修改数据。它是创建原始数组的重复数组的简单方法之一。

语法

以下语法显示了使用 JavaScript of 循环克隆的数组。

示例

以下示例显示了使用 JavaScript "of" 运算符克隆的数组。

输出

输出显示原始数组的重复数组。

使用 while 循环

while 循环与迭代式循环一起使用以创建重复数组。

语法

以下语法显示了使用 JavaScript while 循环克隆的数组。

示例

以下示例显示了使用 JavaScript while 循环的重复数组。

示例 1

以下示例显示了使用 JavaScript while 循环的重复数组及其所有值。

输出

输出显示原始数组的重复数组。

示例 2

以下示例显示了使用 JavaScript while 循环的重复数组和所需值。

输出

输出显示原始数组的重复数组。

使用 object.assign 方法

assign 方法复制所需的数组。它将空数组和所需数组作为参数。我们不修改原始数组，而是创建它的精确克隆。

语法

以下语法显示了使用 JavaScript assign 方法克隆的数组。

示例

以下示例显示了使用 JavaScript "of" 运算符克隆的数组。

输出

输出显示原始数组的重复数组。

使用 Array.map() 方法

在 JavaScript 中复制数组的一个简单选项是 Array.map() 函数。此方法与新数组一起使用，并将现有数组映射到新数组中。它不能修改新数组中的值。我们可以使用 map() 方法，并引用原始数组和“x”参数来映射值。

语法

以下语法显示了使用 JavaScript 数组 map 方法克隆的数组。

示例

以下示例显示了使用 JavaScript 数组 map 方法克隆的数组。

输出

输出显示原始数组的重复数组。

使用带 map 函数的 Array.from() 方法

from 方法与 map 函数一起使用，以便在 JavaScript 中使用 Array.from() 函数复制数组。此方法通过映射数组值并创建新的重复数组，将现有数组转换为新数组。我们可以使用 Array.from() 方法，并引用原始数组和映射函数作为参数。

语法

以下语法显示了使用 JavaScript from 循环克隆的数组。

示例

以下示例显示了使用 JavaScript "Array.from()" 运算符克隆的数组。

输出

输出显示原始数组的重复数组。

使用 filter 方法

filter 方法以简单的方式使用简单的空参数克隆原始数组。它在 filter 方法中使用空数组和“true”关键字参数。我们不修改原始数组，它会创建它的精确克隆。

语法

以下语法显示了使用 JavaScript filter 循环克隆的数组。

示例

以下示例显示了使用 JavaScript "filter()" 运算符克隆的数组。

输出

输出显示原始数组的重复数组。

使用 filter 方法

reduce 方法用于使用 JavaScript 函数中的简单参数克隆或复制原始数组。

语法

以下语法显示了使用 JavaScript filter 循环克隆的数组。

示例

以下示例显示了使用 JavaScript "reduce()" 运算符克隆的数组。

输出

输出显示原始数组的重复数组。

结论

数组的副本有助于开发人员使用相同的数组并单独操作它。