JS合并兩個(gè)數(shù)組的3種方法詳解
這篇文章主要介紹了JS合并兩個(gè)數(shù)組的3種方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
需要將兩個(gè)數(shù)組合并成為一個(gè)的情況。比如:
var a = [1,2,3]; var b = [4,5,6];
有兩個(gè)數(shù)組a、b,需求是將兩個(gè)數(shù)組合并成一個(gè)。方法如下:
1、concat
js的Array對(duì)象提供了一個(gè)叫concat()方法,連接兩個(gè)或更多的數(shù)組,并返回結(jié)果。
var c = a.concat(b); //c=[1,2,3,4,5,6];
這里有一個(gè)問(wèn)題,concat方法連接a、b兩個(gè)數(shù)組后,a、b兩個(gè)數(shù)組的數(shù)據(jù)不變,同時(shí)會(huì)返回一個(gè)新的數(shù)組。這樣當(dāng)我們需要進(jìn)行多次的數(shù)組合并時(shí),會(huì)造成很大的內(nèi)存浪費(fèi),如果是數(shù)據(jù)量比較小的時(shí)候,還可以勉強(qiáng)用,如果數(shù)據(jù)量大的時(shí)候,這個(gè)就不妥了,所以這個(gè)方法肯定不是最好的。
2、for循環(huán)
大概的思路是:遍歷其中一個(gè)數(shù)組,把該數(shù)組中的所有元素依次添加到另外一個(gè)數(shù)組中。直接上代碼:
for( var i in b) { a.push(b[i]); }
這樣的寫法可以解決第一種方案中對(duì)內(nèi)存的浪費(fèi),但是會(huì)有另一個(gè)問(wèn)題:丑!這么說(shuō)不是沒有道理,如果能只用一行代碼就搞定,豈不快哉~
3、apply
函數(shù)的apply方法有一個(gè)特性,那就是func.apply(obj,argv),argv是一個(gè)數(shù)組。所以我們可以利用這點(diǎn),直上代碼:
a.push.apply(a,b);
調(diào)用a.push這個(gè)函數(shù)實(shí)例的apply方法,同時(shí)把,b當(dāng)作參數(shù)傳入,這樣a.push這個(gè)方法就會(huì)遍歷b數(shù)組的所有元素,達(dá)到合并的效果。
這里可能有點(diǎn)繞,我們可以把b看成[4,5,6],變成這樣:
a.push.apply(a,[4,5,6]);
然后上面的操作就等同于:
a.push(4,5,6);
這樣就很清楚了!
另外,還要注意兩個(gè)小問(wèn)題:
1)以上3種合并方法并沒有考慮過(guò)a、b兩個(gè)數(shù)組誰(shuí)的長(zhǎng)度更小。
所以好的做法是預(yù)先判斷a、b兩個(gè)數(shù)組哪個(gè)更大,然后使用大數(shù)組合并小數(shù)組,這樣就減少了數(shù)組元素操作的次數(shù)!
2)有時(shí)候我們不希望原數(shù)組(a、b)改變,這時(shí)就只能使用concat了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
非常不錯(cuò)的三種簡(jiǎn)潔的Tab導(dǎo)航(網(wǎng)頁(yè)選項(xiàng)卡)簡(jiǎn)析
非常不錯(cuò)的三種簡(jiǎn)潔的Tab導(dǎo)航(網(wǎng)頁(yè)選項(xiàng)卡)簡(jiǎn)析...2007-08-08JavaScript實(shí)現(xiàn)tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)tab欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03JavaScript實(shí)現(xiàn)瀏覽器網(wǎng)頁(yè)自動(dòng)滾動(dòng)并點(diǎn)擊的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)瀏覽器網(wǎng)頁(yè)的自動(dòng)滾動(dòng)并點(diǎn)擊的示例代碼,幫助大家更好的理解和學(xué)習(xí)JavaScript的使用,感興趣的朋友可以了解下2020-12-12chrome下img加載對(duì)height()的影響示例探討
這篇文章主要介紹了chrome下img加載對(duì)height()的影響,需要的朋友可以參考下2014-05-05詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb(2)
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb,jsPlumb是一個(gè)強(qiáng)大的JavaScript連線庫(kù),它可以將html中的元素用箭頭、曲線、直線等連接起來(lái),適用于開發(fā)Web上的圖表、建模工具等,需要的朋友可以參考下2015-12-12javascript的alert box在java中如何顯示多行
這篇文章主要介紹了javascript的alert box在java中如何顯示多行,需要的朋友可以參考下2014-05-05js canvas實(shí)現(xiàn)放大鏡查看圖片功能
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)放大鏡查看圖片功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06