數(shù)組合并的三種方法

導(dǎo)讀

數(shù)組是代表有序收集索引項的數(shù)據(jù)結(jié)構(gòu)。

合并數(shù)組是在處理數(shù)據(jù)時常常用到的操作，在這里，你將找到在 JavaScript 中合并數(shù)組的 3 種方法：2 個不可變（合并后創(chuàng)建一個新數(shù)組）和 1 個可變（合并為一個數(shù)組）

01

擴(kuò)展運(yùn)算符合并

擴(kuò)展運(yùn)算符(...)是ES6中的新特性，使用的時候需要注意項目中是否支持。

寫法：

// 合并 array1 and array2const mergeResult = [...array1, ...array2];

例如，讓我們合并 2 個數(shù)組和：heroes，villains

const heroes = ['Batman', 'Superman'];const?villains?=?['Joker',?'Bane'];const?all?=?[...heroes,?...villains];all; // ['Batman', 'Superman', 'Joker', 'Bane']

如果要做合并后的先后順序的話，調(diào)換一下它們的位置就對了。

const heroes = ['Batman', 'Superman'];const?villains?=?['Joker',?'Bane'];const?all?=?[...villains,??...heroes];all; // ['Joker', 'Bane', 'Batman', 'Superman']

擴(kuò)展運(yùn)算符甚至可以將更多數(shù)組一起合并。

const mergeResult = [...array1, ...array2, ...array3, ...arrayN];

02

使用數(shù)組的concat方法

如果你喜歡用函數(shù)的方法，則可以使用該方法，而且它是ES5以前的。

// merge array1 and array2const mergeResult = array1.concat(array2);

其他的一種寫法：

const mergeResult = [].concat(array1, array2);

array.concat()方法不會改變它所調(diào)用的數(shù)組，但會返回具有合并結(jié)果的新數(shù)組。

例如：使用array.concat()合并heroes，villains

const heroes = ['Batman', 'Superman'];const villains = ['Joker', 'Bane'];
const all1 = heroes.concat(villains);const all2 = [].concat(heroes, villains);
all1; // ['Batman', 'Superman', 'Joker', 'Bane']all2; // ['Batman', 'Superman', 'Joker', 'Bane']

concat 方法可以接受多個數(shù)組作為參數(shù)，因此您可以同時合并 2 個或多個數(shù)組：

const mergeResult = [].concat(array1, array2, array3, arrayN);

上面的兩種方法都是返回一個新數(shù)組，不會改變原有的數(shù)組。

但是，有時您不想創(chuàng)建新數(shù)組，而是將其合并到某些現(xiàn)有數(shù)組中，下面的方法執(zhí)行一種可變的合并方式。

03

數(shù)組的push方法

您可能已經(jīng)知道該方法在數(shù)組末尾插入一項，從而改變該方法所調(diào)用的數(shù)組。

const heroes = ['Batman'];
heroes.push('Superman');
heroes; // ['Batman', 'Superman']

那么怎么push一個數(shù)組呢？可以使用擴(kuò)展運(yùn)算符(...)，這個運(yùn)算符的一個功能是可以作為被函數(shù)調(diào)用的。

// 合并array2 到 array1array1.push(...array2);

例如，讓我們合并到數(shù)組中：villains，heroes

const heroes = ['Batman', 'Superman'];const villains = ['Joker', 'Bane'];
heroes.push(...villains);
heroes; // ['Batman', 'Superman', 'Joker', 'Bane']

04

總結(jié)

JS 提供了合并數(shù)組的多種方法。

您可以使用擴(kuò)展運(yùn)算符或函數(shù)合并 2 個或更多數(shù)組。這些方法是不會改變原有數(shù)組的，因?yàn)楹喜⒔Y(jié)果存儲在新的數(shù)組中。

[...array1, ...array2]，[].concat(array1, array2)

如果您要執(zhí)行可變合并，即合并到原有數(shù)組而不創(chuàng)建新的，則可以使用方法：array1.push(...array2)。

你知道還有什么其他方法可以合并陣列？歡迎在評論區(qū)留言。

這個世界上根本就沒有正確的選擇，我們只不過是要通過努力奮斗，使當(dāng)初的選擇變得正確。

--《1Q84》