資料結構
網路
關係型資料庫管理系統
作業系統
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” 的陣列 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+ 瀏覽量
