javascript合并兩個(gè)數(shù)組最簡(jiǎn)單的實(shí)現(xiàn)方法
在開發(fā)的過(guò)程中,我們很多時(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è)方式是最簡(jiǎn)單的,也是最容易實(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)這種方式幾乎沒(méi)有任何問(wèn)題,只是很多追求精簡(jiǎ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á)到合并的效果。
簡(jiǎn)單理解就是,上面這段代碼可以看做是:
arr1.push(4, 5, 6);
這種方式只用一行代碼就解決了問(wèn)題,可以說(shuō)非常6了。
總結(jié)
上面三種方法在常規(guī)使用上其實(shí)并沒(méi)有區(qū)別,只是要另外注意兩個(gè)小問(wèn)題:
1.以上3種合并方法在舉例的時(shí)候并沒(méi)有考慮過(guò)兩個(gè)原數(shù)組誰(shuí)的長(zhǎng)度更小,好的做法是預(yù)先判斷兩個(gè)原數(shù)組哪個(gè)更大,然后使用大數(shù)組合并小數(shù)組,這樣就能減少了數(shù)組元素操作的次數(shù),提高了代碼的執(zhí)行效率。
2.有時(shí)候我們既不希望原數(shù)組(arr1、arr2)改變,又不想手動(dòng)新增一個(gè)變量,這時(shí)就只能使用concat()方法了。
以上方法很簡(jiǎn)單,感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。
相關(guān)文章
JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02js實(shí)現(xiàn)iframe框架取值的方法(兼容IE,firefox,chrome等)
這篇文章主要介紹了js實(shí)現(xiàn)iframe框架取值的方法,可兼容IE,firefox,chrome等瀏覽器.涉及JavaScript針對(duì)框架元素取值的相關(guān)技巧,需要的朋友可以參考下2015-11-11使用JS代碼實(shí)現(xiàn)點(diǎn)擊按鈕下載文件
有時(shí)候我們?cè)诰W(wǎng)頁(yè)上需要增加一個(gè)下載按鈕,讓用戶能夠點(diǎn)擊后下載頁(yè)面上的資料,那么怎樣才能實(shí)現(xiàn)功能呢?今天小編給大家分享兩種方法實(shí)現(xiàn)js實(shí)現(xiàn)點(diǎn)擊按鈕下載文件,需要的朋友參考下吧2016-11-11javascript基礎(chǔ)知識(shí)之html5輪播圖實(shí)例講解(44)
這篇文章主要為大家詳細(xì)介紹了javascript基礎(chǔ)知識(shí)之html5輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02完美解決spring websocket自動(dòng)斷開連接再創(chuàng)建引發(fā)的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決spring websocket自動(dòng)斷開連接再創(chuàng)建引發(fā)的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(二十) js錯(cuò)誤處理
語(yǔ)法錯(cuò)誤,也稱解析錯(cuò)誤,發(fā)生在傳統(tǒng)語(yǔ)言的編譯時(shí),在JavaScript中發(fā)生在解釋時(shí),運(yùn)行時(shí)錯(cuò)誤也稱為異常(exception,在編譯期/解釋器后)2012-08-08