JavaScript數(shù)組方法之?dāng)?shù)組合并

izhuhaodev 發(fā)布于2019-08-20 10:37 / 3284人閱讀

摘要：可以看到，方法，簡(jiǎn)潔高效，且能實(shí)現(xiàn)多個(gè)數(shù)組合并并且能夠?qū)崿F(xiàn)深度嵌套注意最后還是使用了哦，換成是不可以的。多個(gè)數(shù)組合并原生的方法可以簡(jiǎn)單實(shí)現(xiàn)多個(gè)數(shù)組合并，比如會(huì)返回至于其他方法，應(yīng)該只是一個(gè)接口的問題，可以像下面這樣實(shí)現(xiàn)。

網(wǎng)易前端面試的時(shí)候，面試官問我有幾種數(shù)組合并的方法，當(dāng)時(shí)第一反應(yīng)就是concat，但是面試官說幾種，我尋思著原生js方法好像也只有concat呀，就說不改變?cè)瓟?shù)組的話concat就可以了。當(dāng)時(shí)沒多想，回來之后才發(fā)現(xiàn)，這個(gè)

1,concat

arr = [1,3].concat([3]);
console.log(arr); // [1,2,3] ;

concat 函數(shù)總結(jié)，可以合并多個(gè)數(shù)組，不影響原數(shù)組(會(huì)造成內(nèi)存浪費(fèi))，不能處理嵌套數(shù)組.

2,基于for循環(huán)使用pop和push方法

    function for_pushshift(arr1,arr2){
        if (arr1.length > arr2.length) {
        for (var i=0; i 
3,使用forEach和pop和push方法實(shí)現(xiàn)
這個(gè)方法原理和2中一樣，只是使用了forEach代替了for循環(huán)。for循環(huán)方法總結(jié)，看上去土而且不好維護(hù),只能合并兩個(gè)數(shù)組，也不能處理嵌套數(shù)組。
4，使用reduce()和reduceRight()方法
function concat_reduce( arr1 ,arr2){
    if(arr1.length > arr2.length){
       return arr1.reduce( function(prev,curr){
           if (Array.isArray(curr)) {
               concat_reduce(curr);
           }  else{ 
               prev.push(curr);
            return prev ;    //return 語句不能忘記，要自己返回prev的值，
            }             
        }, arr2);
    } else {
       return arr2.reduceRight(function(prev ,curr){
             prev.unshift(curr);
             return prev ;
       } ,arr1);
    }
}
5,使用apply方法
function concat_apply() {
        // return  Array.prototype.push.apply(arr1,arr2);
        return Array.prototype.concat.apply([], arguments)
      }
使用：
var arr2 =  [ "a","b"];
console.log([concat_apply([[1, 2],[3, 4, 5], [6, 7, 8, 9,[11,12,[13]]],10],arr2)].join(":")) ;  
輸出為  1,2,3,4,5,6,7,8,9,11,12,13,10,"a","b"  。可以看到，apply方法，簡(jiǎn)潔高效，且能實(shí)現(xiàn)多個(gè)數(shù)組合并,并且能夠?qū)崿F(xiàn)深度嵌套,注意最后還是使用了concat哦，換成push是不可以的。
6,數(shù)組嵌套合并
上面是5中基本的合并數(shù)組的方法，注意事項(xiàng)和優(yōu)缺點(diǎn)在注釋里都已經(jīng)寫了。上面1-4方法如果含有嵌套數(shù)組，都是直接返回的，也就是沒有對(duì)嵌套數(shù)組整合，對(duì)嵌套數(shù)組的整合我的思路是使用遞歸，在循環(huán)中加一個(gè)判斷是否為數(shù)組，像下面的例子
 function for_pushift(arr1,arr2){
    if (arr1.length > arr2.length) {
    ***for (var i=0; i 
主要是增加了*號(hào)部分的判斷代碼， 其他幾種方法也可以增加類似的代碼，在上面方法4中的判斷語句取消屏蔽就可以實(shí)現(xiàn)。方法5是不用做任何改變的，本身就可以實(shí)現(xiàn)嵌套的合并。
7,多個(gè)數(shù)組合并
原生的concat方法可以簡(jiǎn)單實(shí)現(xiàn)多個(gè)數(shù)組合并，比如[1,2,3].concat([4,5,6],[6,7,8)；會(huì)返回1,2,3,4,5,6,7,8至于其他方法，應(yīng)該只是一個(gè)接口的問題，可以像下面這樣實(shí)現(xiàn)。
function for_more(){
    var oriArr = arguments[0] ? arguments[0] : [];
    var otherArr = Array.prototype.slice.call(arguments,1) ;
    otherArr.forEach(function(item){
        oriArr.push(item);
    })
    return oriArr;
}
console.log( for_more([1,2],[3,[4,5]],[6,7]) ); // [1,2,[3,[4,5]],[6,7]];
參數(shù)處理好了，上面兩個(gè)問題整合一下就OK了。另外一種思路是寫一個(gè)整合函數(shù)，參數(shù)是一個(gè)數(shù)組，如果數(shù)組有嵌套整合為無嵌套的數(shù)組。
function flatten(arr) {
    return arr.reduce(function(flat, toFlatten) {
        return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
    }, []);
}
console.log(flatten([[1, 2],[3, 4, 5], [6, 7, 8, 9]]) ) ; //輸出 1,2,3,4,5,6,7,8,9
在1,2部分函數(shù)的基礎(chǔ)上再增加一個(gè)這樣的函數(shù)就OK了；不過這樣看來總結(jié)一下，還是方法5比較好用。