如何在 JavaScript 中合并两个数组?

javascriptweb developmentfront end technology更新于 2025/4/29 21:32:17

在本教程中，我们将学习如何在 JavaScript 中合并两个数组。

在 JavaScript 中，我们可以使用不同的方法合并两个数组，在本教程中，我们将看到一些执行此操作的方法 -

使用 Array concate() 方法

使用扩展运算符

使用循环迭代

使用 Array concate() 方法

Array concate() 方法合并两个或多个数组。它是在 JavaScript 中合并数组的最佳方法之一。此方法对数组进行操作，在参数中获取另一个数组，并在合并这两个数组后返回一个新数组。它还可以在参数中使用多个数组来合并它们。

语法

let merged_arr = arr1.concat(arr2)

在上述语法中，"arr1"和"arr2"是两个单独的数组。我们对"arr1"使用了数组 concate() 方法，并在参数中传递了"arr2"数组，以创建一个新的合并数组"merged_arr"。

示例

在下面的示例中，我们使用 Array concate() 方法在 JavaScript 中合并了两个数组。我们使用按钮单击事件合并两个数组"arr1"和"arr2"，并将它们输出到网页上。

Merge two arrays in JavaScript using Array concate() method

使用扩展运算符

扩展运算符 (...) 用于传递或扩展可迭代数组或对象中每个元素的副本。它对于轻松复制数组非常有用。我们可以使用扩展运算符轻松合并两个数组。我们必须获取一个数组，然后在该数组中逐个扩展两个或多个数组，并用逗号分隔。

语法

let merged_arr = [...arr1, ...arr2]

在上述语法中，"arr1"和"arr2"是两个独立的数组。我们取一个数组"merged_arr"，并在该数组内，对"arr1"和"arr2"使用扩展运算符来复制所有元素并将它们传递到新数组中。

示例

在下面的示例中，我们使用扩展运算符在 JavaScript 中合并了两个数组。我们使用按钮单击事件合并两个数组"arr1"和"arr2"，并将它们输出到网页上。

Merge two arrays in JavaScript using spread operator

使用循环迭代

合并两个数组的最传统方法是使用循环迭代。在这种方法中，我们使用"for 循环"或"while 循环"之类的循环，在循环内部，我们使用 array.push() 方法将数组的每个元素逐个附加到另一个数组。

语法

let merged_arr = []

for (let index = 0; index < arr1.length; index++) {

merged_arr.push(arr1[index])

}

for (let index = 0; index < arr2.length; index++) {

merged_arr.push(arr2[index])

}

在上述语法中，"arr1"和"arr2"是两个独立的数组。使用 for 循环，我们将两个数组合并为"merged_arr"。

示例

在下面的示例中，我们使用循环迭代在 JavaScript 中合并了两个数组。我们使用按钮单击事件合并两个数组"arr1"和"arr2"，并将它们输出到网页上。

Merge two arrays in JavaScript using loop iteration

在本教程中，我们讨论了在 JavaScript 中合并两个数组的三种方法 - 使用 concate() 方法、使用扩展运算符和使用循环迭代。

相关文章

如何在 JavaScript 中在流程图中显示嵌套的 for 循环?

JavaScript 中带标签和不带标签的 break 有什么区别?

JavaScript 中的默认构造函数是什么?

JavaScript 中的构造函数方法是什么?

如何使用 JavaScript 中的流程图显示 for 循环?

JavaScript 中的警告框是什么?

描述 JavaScript Break、Continue 和 Label 语句

如何使用 JavaScript 中的 window.location 重定向到不同的 URL?

为什么 JavaScript 没有 goto 语句?

如何使用标签控制 JavaScript 中的流程?

有用资源

javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.w3schools.cn/javascript/

打印

下一节:如何使用 JavaScript 打印由"#"组成的三角形? ❯❮ 上一节:如何在 JavaScript 中打印对象数组?