数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在JavaScript中合并两个数组？
在本教程中，我们将学习如何在JavaScript中合并两个数组。
在JavaScript中，我们可以通过不同的方法合并两个数组，在本教程中，我们将了解其中一些方法：
- 使用Array concat()方法
- 使用扩展运算符
- 使用循环迭代
使用Array concat()方法
Array concat() 方法合并两个或多个数组。这是在JavaScript中合并数组的最佳方法之一。此方法对数组进行操作，在参数中接受另一个数组，并在合并这两个数组后返回一个新数组。它还可以接受多个数组参数来合并所有这些数组。
语法
let merged_arr = arr1.concat(arr2)
在上述语法中，“arr1”和“arr2”是两个独立的数组。我们使用带有“arr1”的array concat()方法，并在参数中传递“arr2”数组来创建一个新的合并数组“merged_arr”。
示例
在下面的示例中，我们使用Array concat()方法在JavaScript中合并了两个数组。我们使用按钮点击事件来合并两个数组“arr1”和“arr2”，并在网页上输出它们。
<html> <body> <h3> Merge two arrays in JavaScript using Array concate() method</h3> <p id = "element1"> </p> <p id = "element2"> </p> <button onclick = "merge()"> Merge Arrays </button> <p id = "result"> </p> <script> const result = document.getElementById('result') const element1 = document.getElementById('element1') const element2 = document.getElementById('element2') //Arrays let arr1 = [1, 2, 3, 4, 5] let arr2 = [6, 7, 8, 9, 10] element1.innerHTML = "arr1: [" + arr1 + "]" element2.innerHTML = "arr2: [" + arr2 + "]" function merge(){ //merging two arrays let merged_arr = arr1.concat(arr2) result.innerHTML = "Merged array: [" + merged_arr + "]" } </script> </body> </html>
使用扩展运算符
扩展运算符(...)用于传递或扩展可迭代数组或对象的每个元素的副本。它非常有用，可以轻松复制数组。我们可以使用扩展运算符轻松合并两个数组。我们必须先取一个数组，然后在该数组中，一个接一个地扩展两个或多个数组，用逗号隔开。
语法
let merged_arr = [...arr1, ...arr2]
在上述语法中，“arr1”和“arr2”是两个独立的数组。我们取一个数组“merged_arr”，并在该数组内部，我们对“arr1”和“arr2”使用扩展运算符，以复制所有元素的副本并将它们传递到新数组中。
示例
在下面的示例中，我们使用扩展运算符在JavaScript中合并了两个数组。我们使用按钮点击事件来合并两个数组“arr1”和“arr2”，并在网页上输出它们。
<html> <body> <h3> Merge two arrays in JavaScript using <i> spread </i>operator </h3> <p id = "element1"> </p> <p id = "element2"> </p> <button onclick = "merge()">Merge Arrays</button> <h4 id = "root"> </h4> <script> const root = document.getElementById('root') const element1 = document.getElementById('element1') const element2 = document.getElementById('element2') //Arrays let arr1 = [1, 2, 3, 4, 5] let arr2 = [6, 7, 8, 9, 10] element1.innerHTML = "arr1: [" + arr1 + "]" element2.innerHTML = "arr2: [" + arr2 + "]" function merge(){ //merging two arrays let merged_arr = [...arr1, ...arr2] root.innerHTML = "Merged array: [" + merged_arr + "]" } </script> </body> </html>
使用循环迭代
合并两个数组最传统的方法是使用循环迭代。在这种方法中，我们使用“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”，并在网页上输出它们。
<html> <body> <h3> Merge two arrays in JavaScript using <i> loop </i> iteration </h3> <p id = "element1"> </p> <p id = "element2"> </p> <button onclick = "merge()"> Merge Arrays </button> <h4 id = "root"> </h4> <script> const root = document.getElementById('root') const element1 = document.getElementById('element1') const element2 = document.getElementById('element2') //Arrays let arr1 = [1, 2, 3, 4, 5] let arr2 = [6, 7, 8, 9, 10] element1.innerHTML = "arr1: [" + arr1 + "]" element2.innerHTML = "arr2: [" + arr2 + "]" function merge(){ //merging two arrays 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]) } root.innerHTML = "merged array: [" + merged_arr + "]" } </script> </body> </html>
在本教程中，我们讨论了在JavaScript中合并两个数组的三种方法：使用concat()方法，使用扩展运算符和使用循环迭代。
3K+ 次浏览
