Javascript Array合并詳解

在JS中，數(shù)組是常用的數(shù)據(jù)類型之一。在我們的實際開發(fā)中，經(jīng)常會遇到合并數(shù)組的情況，本文將為大家詳細(xì)解釋JS中數(shù)組的合并操作。

方法一：concat()

concat()方法是JS中最常見的數(shù)組合并方法之一，其能夠?qū)蓚€或者多個數(shù)組合并為一個新的數(shù)組。這個操作不會影響原數(shù)組，而是返回新的合并后的數(shù)組。

let arr1=[1,2,3];
let arr2=[4,5,6];
let newarr=arr1.concat(arr2);
console.log(newarr);

此時，控制臺會輸出[1,2,3,4,5,6]，說明合并成功。

方法二：展開運算符

展開運算符是ES6中新增的語法，它能夠?qū)?shù)組、對象、字符串等數(shù)據(jù)類型展開為一個數(shù)組。 其可以用于合并數(shù)組。

let arr1=[1,2,3];
let arr2=[4,5,6];
let newarr=[...arr1,...arr2];
console.log(newarr);

此時，控制臺同樣會輸出[1,2,3,4,5,6]。

方法三：push()

push()是JS數(shù)組原型上的一個方法，其可以將新的元素添加至數(shù)組尾部。因為接受的參數(shù)是任意類型，所以我們可以使用這個方法將兩個數(shù)組合并。

let arr1=[1,2,3];
let arr2=[4,5,6];
arr1.push(...arr2);
console.log(arr1);

此時，控制臺會輸出[1,2,3,4,5,6]，說明合并成功。

方法四：forEach()

forEach()是JS數(shù)組原型上的一個方法，其可以遍歷數(shù)組中的每個元素，并且支持指定處理每個元素的回調(diào)函數(shù)。 我們可以利用這個方法將一維數(shù)組合并成為二維數(shù)組。

let arr=[1,2,3,4,5,6];
let newarr=[];
arr.forEach((value,index)=>{
if(index%3==0){
newarr.push([]);
}
newarr[newarr.length-1].push(value);
})
console.log(newarr);

此時，控制臺會輸出一個二維數(shù)組[[1,2,3],[4,5,6]]，說明合并成功。

方法五：reduce()

reduce()是JS數(shù)組原型上的一個方法，其可以將數(shù)組中的元素依次遍歷，通過回調(diào)函數(shù)映射成新的值，并最終將所有值合并成一個新的值。 我們可以利用這個方法將一維數(shù)組合并成為二維數(shù)組。

let arr=[1,2,3,4,5,6];
let newarr=arr.reduce((result,current,index)=>{
let chunkindex=Math.floor(index/3);
if(!result[chunkindex]){
result[chunkindex]=[];
}
result[chunkindex].push(current);
return result;
},[]);
console.log(newarr);

此時，控制臺同樣會輸出一個二維數(shù)組[[1,2,3],[4,5,6]]，說明合并成功。

總結(jié)

通過以上五種方法，我們可以看出合并數(shù)組并不是一件難事。根據(jù)實際需求，我們可以選擇不同的方法進(jìn)行操作。其中，concat()方法是最為簡單常用的一種方法，展開運算符是比較新的一種語法，比較適用于ES6及以上版本。而push()、forEach()、reduce()則是非常實用的小技巧，既可以合并一維數(shù)組，也可以構(gòu)建更高緯度的數(shù)組。