JS合并數(shù)組的幾種方法及優(yōu)劣比較
本文屬于JavaScript的基礎(chǔ)技能. 我們將學(xué)習(xí)結(jié)合/合并兩個(gè)JS數(shù)組的各種常用方法,并比較各種方法的優(yōu)缺點(diǎn).
我們先來看看具體的場景:
var q = [ 5, 5, 1, 9, 9, 6, 4, 5, 8];
var b = [ "tie", "mao", "csdn", "ren", "fu", "fei" ];
很明顯,數(shù)組 q 和 b 簡單拼接的結(jié)果是:
[
5, 5, 1, 9, 9, 6, 4, 5, 8,
"tie", "mao", "csdn", "ren", "fu", "fei"
]
concat(..)方法
最常見的用法如下:
var c = q.concat( b );
q; // [5,5,1,9,9,6,4,5,8]
b; // ["tie","mao","csdn","ren","fu","fei"];
c; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
如您所見, c 是一個(gè)全新的數(shù)組, 表示 q 和 b 這兩個(gè)數(shù)組的組合, 但是 q 和 b 現(xiàn)在沒用了是吧?
如果 q 數(shù)組有10000個(gè)元素, b 數(shù)組也有有10000個(gè)元素? 那么數(shù)組c現(xiàn)在就有20000個(gè)元素, 這種方式占用了2倍的內(nèi)存.
“這沒問題!”,你可能會(huì)覺得. 只要將 q 和 b 置空就行, 然后就會(huì)被垃圾回收,對(duì)嗎?問題解決了!
q = b = null; // `q` and `b` 現(xiàn)在可以被垃圾回收了
額? 如果數(shù)組都很小,那自然沒問題. 但對(duì)大型的數(shù)組,或需要多次重復(fù)處理時(shí), 內(nèi)存就被限制了, 它還需要進(jìn)行優(yōu)化.
循環(huán)插入
OK, 讓我們把一個(gè)數(shù)組的內(nèi)容加入到另一個(gè)中試試,使用 Array#push() 方法:
// 將數(shù)組 `b` 插入 `q`
for (var i=0; i < b.length; i++) {
q.push( b[i] );
}
q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
b = null;
現(xiàn)在, q中存放了兩個(gè)原始數(shù)組的內(nèi)容(q + b).
看樣子對(duì)內(nèi)存優(yōu)化做的不錯(cuò).
但如果 q 數(shù)組很小而 b 又很大呢? 出于內(nèi)存和速度的考慮,這時(shí)想把較小的 q 插入到 b 前面. 沒問題,只要用 unshift() 方法代替 push() 即可, 對(duì)應(yīng)的也要從大到小進(jìn)行循環(huán)遍歷:
// `q` into `b`:
for (var i=q.length-1; i >= 0; i--) {
b.unshift( q[i] );
}
b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
q = null;
實(shí)用技巧
悲催的是,for循環(huán)很土并且難以維護(hù). 我們能做得更好嗎?
我們先試試 Array#reduce :
// `b` onto `q`:
q = b.reduce( function(coll,item){
coll.push( item );
return coll;
}, q );
q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
// or `q` into `b`:
b = q.reduceRight( function(coll,item){
coll.unshift( item );
return coll;
}, b );
b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
Array#reduce() 和 Array#reduceRight() 很高大上,但有點(diǎn)笨重,而且一般人也記不住. JS規(guī)范6 中的 => 箭頭函數(shù)(arrow-functions) 能讓代碼量大大減少, 但需要對(duì)每個(gè)數(shù)組元素執(zhí)行函數(shù)調(diào)用, 也是很渣的手段.
那么下面的代碼怎么樣呢?
// `b` onto `q`:
q.push.apply( q, b );
q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
// or `q` into `b`:
b.unshift.apply( b, q );
b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
BIG更高了,是吧!? 特別是 unshift() 方法不需要像前面那樣考慮相反的順序. ES6 的展開運(yùn)算符(spread operator, 加 ... 前綴)就更高端了: a.push( ...b ) 或者 b.unshift( ...a )
但是,事實(shí)上這種方法還是太樂觀了. 在這兩種情況下,不管是將 a 或 b 傳遞給 apply() 作為第二個(gè)參數(shù)(apply方式調(diào)用Function時(shí)第一個(gè)參數(shù)在內(nèi)部變成this,即context,上下文,作用域), 還是使用 ... 展開運(yùn)算符的方式, 實(shí)際上數(shù)組都會(huì)被打散成為函數(shù)的 arguments .
第一個(gè)主要的問題是,占用了雙倍的內(nèi)存(當(dāng)然,是臨時(shí)的!),因?yàn)樾枰獙?shù)組復(fù)制到函數(shù)棧之中. 此外,不同的JS引擎有不同的實(shí)現(xiàn)算法,可能會(huì)限制了函數(shù)可以傳遞的參數(shù)數(shù)量.
如果數(shù)組添加了一百萬個(gè)元素, 那一定會(huì)超過函數(shù)棧所允許的大小, 不管是push() 或 unshift()調(diào)用. 這種方式只在幾千個(gè)元素時(shí)可用,所以必須限制其不能超過一定范圍.
注意: 你也可以試試 splice(), 肯定會(huì)發(fā)現(xiàn)他和 push(..)/unshift(..) 都是一樣的限制.
一種選擇是繼續(xù)使用這種方法,但是采用分批次處理:
function combineInto(q,b) {
var len = q.length;
for (var i=0; i < len; i=i+5000) {
// 一次處理5000條
b.unshift.apply( b, q.slice( i, i+5000 ) );
}
}
等等,我們損害了代碼的可讀性(甚至是性能!). 在我們放棄之前結(jié)束這個(gè)旅程吧.
總結(jié)
Array#concat() 是久經(jīng)考驗(yàn)的方法, 用于組合兩個(gè)(或多個(gè))數(shù)組. 但他創(chuàng)建了一個(gè)新的數(shù)組,而不是修改現(xiàn)有的一個(gè).
有很多變通的手法,但他們都有不同的優(yōu)缺點(diǎn),需要根據(jù)實(shí)際情況來選擇.
上面列出了各種 優(yōu)點(diǎn)/缺點(diǎn),也許最好的(包括沒有列出的)方法是 reduce(..) 和 reduceRight(..)
無論你選擇什么,都應(yīng)該批判性地思考你的數(shù)組合并策略,而不是把它當(dāng)作理所當(dāng)然的事情.
相關(guān)文章
Dojo Javascript 編程規(guī)范 規(guī)范自己的JavaScript書寫
良好的JavaScript書寫習(xí)慣的優(yōu)點(diǎn)不言而喻，今天彬Go向大家推薦Dojo Javascript 編程規(guī)范，相當(dāng)不錯(cuò)的 Javascript 編程風(fēng)格規(guī)范，建議大家可以借鑒一下此規(guī)范編寫 Javascript。感謝i.feelinglucky的翻譯2014-10-10
在JavaScript中操作時(shí)間之getMonth()方法的使用
這篇文章主要介紹了在JavaScript中操作時(shí)間之getMonth()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript中的Math.SQRT1_2屬性使用簡介
JavaScript常用字符串與數(shù)組擴(kuò)展函數(shù)小結(jié)
通過實(shí)例了解js函數(shù)中參數(shù)的傳遞
javascript實(shí)現(xiàn)網(wǎng)頁屏蔽Backspace事件，輸入框不屏蔽
JavaScript 關(guān)于事件循環(huán)機(jī)制的刨析