在開發(fā)的過程中，我們很多時(shí)候會(huì)遇到需要將兩個(gè)數(shù)組合并成一個(gè)數(shù)組的情況出現(xiàn)。

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

// 將arr1和arr2合并成為[1, 2, 3, 4, 5, 6]

這里總結(jié)一下在JavaScript中合并兩個(gè)數(shù)組的方法。

for循環(huán)數(shù)組

這個(gè)方式是最簡單的，也是最容易實(shí)現(xiàn)的。

var arr3 = [];

// 遍歷arr1
for (var i = 0; i < arr1.length; i++) {
  arr3.push(arr1[i]);
}

// 遍歷arr2
for (var j = 0; j < arr2.length; j++) {
  arr3.push(arr2[j]);
}

console.log(arr3); // [1,2,3,4,5,6]

另外也可以用增強(qiáng)型for循環(huán)或forEach()方法去實(shí)現(xiàn)。

for循環(huán)這種方式幾乎沒有任何問題，只是很多追求精簡編程的人會(huì)鄙視這種方式（攤手）。

concat()方法

JavaScript的Array對(duì)象中提供了一個(gè)concat()方法，作用是連接兩個(gè)或更多的數(shù)組，并返回一個(gè)新的數(shù)組。

var arr3 = arr1.concat(arr2);

console.log(arr3); // [1,2,3,4,5,6]

要注意的是，concat()方法不會(huì)改變?cè)瓟?shù)組，而是返回一個(gè)新的數(shù)組。這樣，當(dāng)我們需要進(jìn)行多次數(shù)組合并的時(shí)候，就會(huì)造成內(nèi)存浪費(fèi)。

apply()方法

函數(shù)的apply方法有一個(gè)特性，那就是func.apply(obj,argv)，argv是一個(gè)數(shù)組。所以我們可以利用這點(diǎn)。

arr1.push.apply(arr1, arr2);

調(diào)用arr1.push這個(gè)函數(shù)實(shí)例的apply()方法，同時(shí)把a(bǔ)rr1、arr2當(dāng)作參數(shù)傳入，這樣arr1.push這個(gè)方法就會(huì)遍歷arr1和arr2數(shù)組的所有元素，達(dá)到合并的效果。

簡單理解就是，上面這段代碼可以看做是：

arr1.push(4, 5, 6);

這種方式只用一行代碼就解決了問題，可以說非常6了。

總結(jié)

上面三種方法在常規(guī)使用上其實(shí)并沒有區(qū)別，只是要另外注意兩個(gè)小問題：

1.以上3種合并方法在舉例的時(shí)候并沒有考慮過兩個(gè)原數(shù)組誰的長度更小，好的做法是預(yù)先判斷兩個(gè)原數(shù)組哪個(gè)更大，然后使用大數(shù)組合并小數(shù)組，這樣就能減少了數(shù)組元素操作的次數(shù)，提高了代碼的執(zhí)行效率。

2.有時(shí)候我們既不希望原數(shù)組（arr1、arr2）改變，又不想手動(dòng)新增一個(gè)變量，這時(shí)就只能使用concat()方法了。

以上方法很簡單，感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。

最新評(píng)論