資料結構
網路
關係資料庫管理系統(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+ 次瀏覽
