詳解js數組扁平化

1.項中最多一層深度的扁平化

1.1concat() + apply

Array.prototype.concat.apply([],arr) 

例子：

Array.prototype.concat.apply([],[1,2,3,4,5,[6,7]])

// 這樣寫相當於在一個空的數組上調用concat然後給他穿進去的參數不是一個數組，而是這個數組裡的項。這是利用了apply的特性，因為apply第二個參數接受一個數組，然後數組裡面的內容就是參數。等同於下麵的樣子：

[].concat(1,2,3,4,5,[6,7]) 

1.2 concat() + 拓展運算符

[].concat(...arr)

這樣寫就相當於把數組打碎了。比如把[1,2,3,4,5,[6,7]]打碎成1,2,3,4,5,[6,7]

然後調用[].concat(1,2,3,4,5,[6,7]) 結果就是[1, 2, 3, 4, 5, 6, 7]

所以有了拓展運算符apply就可以下崗了,可讀性非常的強。

1.3 flat()

這個是為了扁平化的專門的函數，可以扁平化自定義層的的數組，語法如下

var newArray = arr.flat([depth]);

depth 是指定的深度，預設為1

例如：

const arr=[[1,2,3],[4,5,6]];
console.log(arr.flat()) // [1,2,3,4,5,6]

如果是多層的話，

const arr=[[1,2,3],[4,[5,6]]];
console.log(arr.flat()) // [1,2,3,4,[5,6]]
console.log(arr.flat(2)) // [1,2,3,4,5,6]

2.項中最多N層數組的扁平化

2.1 遞歸方法

自然想到的就是遞歸了，遞歸需要一個終點，這個終點就是下麵的hasArray()，如果這個數組裡面的項不存在Array對象，都是基本數據的話，就返回false。否則返回true。

// 判斷數組裡面還有數組嗎。（終點判定）
function hasArray(arr){
    for(item of arr){
        if(Array.isArray(item)){
            return true
        }
    }
    return false
}

// 扁平化一個深度為一層數組
function paiping(arr){
  // ES6寫法：
    return [].concat(...arr)
  // ES5寫法：
    // return Array.prototype.concat.apply([],arr) 
}

// 扁平化N層深度的數組
function paiping2(arr){
    if(hasArray(arr)){
        return paiping2(paiping(arr))
    }else{
        return arr
    }
}

可以簡化一下：簡潔的一批，是吧，不解釋了，對照著上面看就好了。

function fn(arr){
    for(item of arr){
        if(Array.isArray(item)){
            return fn([].concat(...arr))
        }
    }
    return arr
}

2.2 toString()

無論你的數組多深，只要你toString一下，他們的結構就沒有了。

const arr = [[1, 2, 3], [4, [5, 6]]];
console.log(arr.toString()) // "1,2,3,4,5,6"

這時候我們針對這個字元串，用split分隔一下逗號，生成一個單個字元串數組。

let arr1 = arr.toString().split(',') //  ["1", "2", "3", "4", "5", "6"

我們現在只需要遍歷一下，把他轉化成數字就行了。

let arrnum = arr1.map((val) => {
    // console.log(val)
  return parseInt(val)
})
console.log(arrnum) // [1,2,3,4,5,6]