資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用另一個數組擴充套件現有的 JavaScript 陣列？
在本教程中，我們將瞭解如何使用另一個數組擴充套件現有的 JavaScript 陣列。在解釋步驟之前，我們需要知道在很多時候需要多個數組，學習正確的方法可以節省我們的編碼時間。您會發現四種以上使用另一個數組擴充套件陣列的方法。因此，在本教程中，您很可能會找到一種易於記住的方法。
使用 Array push() 方法和展開語法
push() 方法在向現有的 JavaScript 陣列新增專案時非常有用。此外，您可以根據所需的輸出傳遞各種不同的引數。
在這種情況下，可以使用展開運算子將來自一個數組的專案與另一個數組擴充套件。
語法
array1.push( ...array2 )
在上面的語法中，我們使用 array2 的值擴充套件 array1。
演算法
步驟 1 - 建立一個數組。
步驟 2 - 建立另一個可能新增到上一個陣列的陣列。
步驟 3 - 使用 push() 方法和第一個陣列。
步驟 4 - 在括號中提及另一個數組。
示例
在這個示例中，我們建立了兩個陣列，並使用 push 方法將陣列 2 中列出的數字擴充套件到陣列 1 中。您還可以使用多個數組，並使用“if 和 else”方法提供條件。
<html> <body> <div id = "my"> </div> <script> const number1 = [1, 2, 3] const number2 = [4, 5, 6] const text = "New Array is: " document.getElementById("my").innerHTML = text + number1; </script> </body> </html>
使用 Array push.apply() 方法
雖然 push 方法常用，但 apply 方法也可以提供類似的輸出。此方法可能會將提到的陣列視為第一個引數，並使用 push 方法擴充套件其他引數。
語法
array1.push.apply(array1, array2)
演算法
步驟 1 - 建立一個新的數字或單詞陣列。
步驟 2 - 建立另一個將用於擴充套件的陣列。
步驟 3 - 使用 apply 方法和 push 方法，使用需要用另一個數組擴充套件的陣列。
步驟 4 - 按照正確的順序提及需要新增的陣列列表。
示例
在下面的示例中，我們使用了 array.push.apply() 方法來擴充套件 JavaScript 陣列。
<html> <body> <h4> Extend JavaScript array Using <i> array.push.apply()</i> method.</h4> <div id = "my"> </div> <script> const number1 = [1, 2, 3] const number2 = [4, 5, 6] number1.push.apply(number1, number2) const text = "New Array are: " document.getElementById("my").innerHTML = text + number1; </script> </body> </html>
陣列的輸出與我們之前使用 Push 方法獲得的輸出類似。您還可以使用原型和 push 以及 apply 方法來獲得相同的結果。
使用 Array concat() 方法
在這裡，我們將編寫四個陣列，並使用 concat() 方法兩次來檢視陣列如何使用另一個數組擴充套件。
語法
array1.concat(array2)
示例
這是一個使用 concat() 方法編寫 JavaScript 程式碼的示例。您必須記住的一件事是，對於將在 concat 方法中使用的陣列，您必須使用“let”或“var”而不是“const”。例如，這裡我們使用了“number1”陣列和“num1”陣列。
<html> <body> <h4> Extend JavaScript array Using <i> array.concat()</i> method. </h4> <div id="result"></div> <script> const number1 = [3, 6, 9] const number2 = [12, 15, 18] num1 = number1.concat(number2) const text = "New Array of numbers is : " document.getElementById("result").innerHTML = text + num1; </script> </body> </html>
使用展開運算子擴充套件陣列
與其他方法相比，展開運算子易於記憶，並使程式碼看起來更清晰。
語法
array1 = [...array1, ...array2]
示例
這裡我們使用了兩個 let 變數，因為 const 變數不能用於展開運算子方法。執行此指令碼後，您會發現陣列“number2”重複了陣列“number1”的展開方法的輸出和陣列“number2”的數字。
原因是陣列 number1 首先使用該方法賦值，當它在第二種方法中使用時，它會重複輸出。
<html> <body> <h4> Extend JavaScript array Using <i> Spread Operator. </i> </h4> <div id ="result1"></div> <div id ="result2"></div> <script> let number1 = [4, 5, 6] let number2 = [1, 2, 3] number1 = [...number2, ...number1] number2 = [...number2, ...number1] const text = "New number are: " document.getElementById("result1").innerHTML = text + number1; document.getElementById("result2").innerHTML = text + number2; </script> </body> </html>
在編寫程式碼之前實現所需的輸出是第一步。您可以獲得持久的結果，並將這些方法用於各種網站。
展開運算子和 concat() 等方法可用於試驗陣列並獲得不同的輸出。儘管這些方法看起來很簡單，但只有透過反覆試驗才能最好地利用它們。
3K+ 次瀏覽
