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

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

在 JavaScript 中，我们可以通过不同的方法合并两个数组，在本教程中，我们将了解其中的一些方法：

  1. 使用 Array concat() 方法
  2. 使用扩展运算符
  3. 使用循环迭代

使用 Array concat() 方法

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

语法

let merged_arr = arr1.concat(arr2)

在上面的语法中，“arr1” 和“arr2” 是两个独立的数组。我们使用带有“arr1” 的数组 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() 方法、使用扩展运算符和使用循环迭代。

更新于：2022-09-15

3K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告