使用 concat() 和 push() 在 JavaScript 中合併數組 [示例]

本教程將向您展示在 JavaScript 中使用 concat 合併兩個或多個數組的正確方法 方法 - 並提供有關如何不的警告 合併數組。

在 JavaScript 中使用 concat()* 方法合併/連接數組

concat() 方法的存在只有一個目的——合併數組。

concat() 方法語法

array.concat(ARRAYS)

注意：

• 數組 是要加入的數組中的第一個數組
• 數組 應該是要添加到第一個數組的數組的逗號分隔列表
  • 他們會按出場順序加入
• concat() 返回一個新的 數組 – 調用它的數組，以及傳遞給它的數組未修改

示例 – 使用 concat() 合併數組 方法

以下是與 concat() 合併的數組示例 方法。 請注意，在每個示例中，concat() 的結果都會分配給一個新變量，因為它不會修改原始數組。

合併兩個數組：

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

var myMergedArray = myFirstArray.concat(mySecondArray);

這將產生一個新數組，myMergedArray ，具有以下值：

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse"
]

合併多個數組：

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

var myMergedArray = myFirstArray.concat(mySecondArray, ['tree', 'flower', 'grass']);

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse",
    "tree",
    "flower",
    "grass"
]

上面，合併了多個數組——注意第三個數組之前沒有聲明為變量——數組類型值可以直接傳遞給 concat() .

錯誤的方式 - 如何push() 方法不應用於合併/連接數組

在我向您展示使用 push() 的正確方法之前 方法來合併數組，值得展示一個在嘗試這樣做時犯的常見錯誤，以便避免它。

push() 方法旨在將值附加到數組。因為它可以用來追加多個 values 到一個數組，你可能認為它可以用來通過向它傳遞一個數組來合併兩個數組。

這不是 情況——如果你將一個數組傳遞給 push 方法，它將作為您嘗試合併的數組的子元素添加 - 未添加！

這是一個快速演示：

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

myFirstArray.push(mySecondArray);

這是 myFirstArray 在上面之後的樣子：

[
    "apple",
    "banana",
    "pear",
    [
        "dog",
        "cat",
        "bird",
        "horse"
    ]
]

數組尚未合併！第二個數組已作為元素添加到第一個數組中，而不是合併兩個數組的元素。

正確的方式 - 如何push() 方法應該用於合併數組

它是 可以使用擴展語法 將一個數組的內容推入另一個數組，通過將第二個數組的內容添加到第一個數組來有效地合併它們：

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

myFirstArray.push(...mySecondArray);

這將導致預期的合併行為，更新 myFirstArray 如下所示：

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse"
]

注意… 在 push() 方法？這是擴展語法——它擴展數組的內容並將它們作為參數傳遞給 push() 單獨傳遞，而不是將整個數組作為一個傳遞。

我建議避免 除非您的具體情況需要此方法，否則您的代碼應該清晰 目的是讓任何閱讀它的人都知道您要做什麼。使用 concat() 是明確的——你正在連接兩個數組。

使用 JavaScript 中的數組可以做更多事情——所有這些都在我們的文章中介紹。