JS 數組扁平化

JS 數組扁平化的方法

什麼是數組扁平化

數組的扁平化能夠簡單的理解爲將一個多維數組轉換成一個一維數組。
例若有一個數組 arr = [ 1, [ 2, [ 3, 4 ] ] ],
這個arr數組中索引爲 1 上的元素仍然是一個數組，且內部仍然可能會出現這種狀況，此時若是咱們想要對這個數組進行處理，而且處理以後的結果是 arr = [ 1, 2, 3, 4 ]。那麼這個處理就叫作數組扁平化。

var arr = [1, [2, [3, 4]]];
 function flatten(){
    ...
 }
 console.log(flatten(arr));     //[1,2,3,4]

大概瞭解了什麼是數組扁平化以後接下來就是思考如何去解決。

方法一 ：for循環+遞歸

這裏使用最簡單的例子來講明，也就是arr = [ 1, [ 2, [ 3, 4 ] ] ],

var arr = [1, [2, [3, 4]]];
    
    function flatten(arr){
       var newArr = [],
           len = arr.length,
           toStr = {}.toString,
           item;
       for(var i = 0; i < len; i++){
           item = arr[i];
           if(toStr.call(item) === '[object Array]'){
                newArr.concat(flatten(item));
           }else{
                newArr.push(item);
           }
       }
       return newArr;
    }
    
    console.log(flatten(arr));

方法一的修改版:使用forEach

var arr = [1, [2, [3, 4]]];
    
    function flatten(arr){
       var newArr = [],
           toStr = {}.toString,
       arr.forEach(function(elem){
           toStr.call(elem) === '[object Array]' ?
                            newArr.concat(flatten(elem)) :
                            newArr.push(elem)
       })
       return newArr;
    }
    
    console.log(flatten(arr));

方法二：使用reduce

var arr = [1, [2, [3, 4]]];
    
    function flatten(arr){
       var toStr = {}.toString,
       return arr.reduce(function(prev,next){
           return prev.concat(toStr.call(next) === '[object Array]' ?
                                                flatten(next):
                                                next
           )
       },[])
    }
    
    console.log(flatten(arr));

使用reduce可以簡化代碼，但同時也須要更好的編寫代碼的能力。在這個場景使用reduce的時候推薦使用數組的concat方法，而不推薦使用數組的push方法，緣由是由於可能會因爲不當心，忘記push方法的返回值是push進去的那個新元素，而不是返回push後的整個新數組。

function flatten(arr){
       var toStr = {}.toString,
       return arr.reduce(function(prev,next){
           return toStr.call(next) === '[object Array]' ?
                                     prev.concat(flatten(next)) :
                                     prev.push(next);
                                     //此處return的並不是是一個數組，因此在執行下次操做的時候會報錯。
    //因此若是非要使用push的話，能夠這樣：
    //              toStr.call(next) === '[object Array]' ?
    //                                 prev = prev.concat(flatten(next)) :
    //                                 prev.push(next);
    //              return prev;
            )
       },[])

End.