Javascript Array合并詳解

在JS中，數組是常用的數據類型之一。在我們的實際開發中，經常會遇到合并數組的情況，本文將為大家詳細解釋JS中數組的合并操作。

方法一：concat()

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

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中新增的語法，它能夠將數組、對象、字符串等數據類型展開為一個數組。 其可以用于合并數組。

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數組原型上的一個方法，其可以將新的元素添加至數組尾部。因為接受的參數是任意類型，所以我們可以使用這個方法將兩個數組合并。

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數組原型上的一個方法，其可以遍歷數組中的每個元素，并且支持指定處理每個元素的回調函數。 我們可以利用這個方法將一維數組合并成為二維數組。

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);

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

方法五：reduce()

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

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);

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

總結

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