如何在 JavaScript 中從多個數組獲取單個數組

---

在這個問題中，我們將瞭解如何從多個數組中獲取單個數組以及解決此問題的不同方法。

我們將使用三種方法來解決此問題：第一種方法是藉助擴充套件運算子，第二種是 concat 方法，最後一種方法是使用 push 和擴充套件運算子。

理解問題

我們給出了兩個或多個數組，我們必須將它們連線到一個數組中。可以給出許多陣列，連線後應顯示為單個數組。

讓我們透過下面的示例來了解

在上面的示例中，我們給出了三個陣列，array1、array2 和 array3，組合後我們得到一個單個數組 [2,4,5,6,3,7,1,8,9]。請注意，它與我們在開頭傳遞的 [array1, array2, array3] 的順序相同。

問題的程式碼

正如我們上面討論的那樣，我們將逐一使用三種方法解決此問題。

使用擴充套件運算子

擴充套件運算子是在 javascript ES6 中引入的。擴充套件運算子的主要操作是將陣列的一部分或所有部分複製到另一個數組中。擴充套件運算子的語法用三個點 (...) 表示。當需要將陣列或物件的所有元素新增到新建立的陣列中時，使用此運算子。

演算法

步驟 1：定義陣列並在其中賦值。

步驟 2：使用擴充套件運算子建立另一個數組，並將兩個建立的陣列傳遞到其中。

步驟 3：返回組合陣列。

示例

// Define arrays
var name1 = ['Nick', 'John', 'Mili'];
var name2 = ['Peter', 'Abraham', 'Avi'];

//using spread operator
var combine = [...name1, ...name2];
console.log(combine);

輸出

['Nick', 'John', 'Mili', 'Peter', 'Abraham', 'Avi']

使用 concat 方法

在 javascript 中，有一個預定義的方法稱為 concat()。使用此方法，我們可以將多個數組組合到一個數組中。在下面的程式碼中，我們可以理解此方法。程式碼說明定義了三個陣列 arr1、arr2 和 arr3。然後，我們有一個名為 combinedArray 的新陣列，它在執行連線操作後儲存一個數組。我們可以透過兩種方式執行 concat 操作 [].concat(arr1, arr2, arr3) 或 arr1.concat(arr2, arr3)，這兩行都會給出相同的結果。

演算法

步驟 1：定義陣列 arr1、arr2、arr3並在其中賦值。

步驟 2：建立另一個數組“combinedArray”並使用 concat 方法賦值，並將我們在步驟 1 中建立的所有陣列新增到其中。

步驟 3：返回組合陣列。

示例

// Define arrays
var arr1 = [100, 200, 300]

var arr2 = [400, 500, 600];

var arr3 = [700, 800, 900];

// Before using concat method 

console.log("Before Merging Arrays");
console.log(arr1, arr2, arr3);

//Using concat method

var combinedArray = [].concat(arr1, arr2, arr3);  // or we can write as arr1.concat(arr2, arr3);

console.log("After Merging Arrays", combinedArray);

輸出

Before Merging Arrays
[ 100, 200, 300 ] [ 400, 500, 600 ] [ 700, 800, 900 ]
After Merging Arrays [ 100, 200, 300, 400, 500, 600, 700, 800, 900 ]

使用 push 和擴充套件運算子

在此步驟中，我們將使用擴充套件運算子，它會擴充套件所有元素，然後我們將使用 javascript 的預定義方法 push 將擴充套件的元素新增到陣列中。

在下面的程式碼中，我們在函式 combineArrays 中使用了剩餘引數來接收任意數量的引數（…multipleArrays）。然後，我們使用 for 迴圈，以便傳遞給函式的所有引數都使用擴充套件運算子擴充套件陣列。最後，我們將擴充套件的元素推送到名為 singleArray 的新建立的陣列中。

演算法

步驟 1：定義陣列並在其中賦值。

步驟 2：建立一個名為 combineArrays 的函式，並使用擴充套件運算子將引數傳遞給該函式。

步驟 3：建立一個名為 singleArray 的空陣列。

步驟 4：定義一個 for 迴圈，透過計算陣列的長度，將 arr1、arr2 和 arr3 中的所有元素推送到 singleArray。

步驟 5：返回 singleArray 值。

步驟 6：現在列印以檢視組合陣列。

示例

//Define multiple arrays
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];

//define function to perform merge operation 
function combineArrays(...multipleArrays) {
   let singleArray = [];
   for(let i = 0; i < multipleArrays.length; i++) {
      singleArray.push(...multipleArrays[i]);
   }
   return singleArray;
}

console.log("Single array from multiple arrays")
console.log(combineArrays(arr1, arr2, arr3))

輸出

Single array from multiple arrays
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

複雜度

由於我們已經透過三種方式實現了此問題，因此我們將逐一討論以下每種方法的時間複雜度。

首先，我們談談擴充套件運算子方法。擴充套件運算子大約需要 O(n) 時間，因此對於第一種方法，結果整體時間複雜度為 O(n2)。

第二種方法將花費 O(n) 時間，因為我們在陣列中有 n 個元素。

在最後一種方法中，我們使用了一個名為 combineArrays 的函式，在該函式中我們使用了一個 for 迴圈。for 迴圈將一直執行，直到陣列的所有元素都新增到名為 singleArray 的新陣列中。因此，如果 arr1 的長度為 l，arr2 的長度為 m，arr3 的長度為 n，則時間複雜度將為 O(l*m*n) 或 O(N)，其中 N 是 l、m 和 n 的乘積。

結論

正如我們上面所看到的，您可以透過三種不同的方式解決給定的問題。第一種是使用 javascript ES6 的擴充套件運算子，第二種是使用預定義函式 concat，最後是使用擴充套件和 push 方法。因此，解決單個問題的方法有很多種。