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