JS數組扁平化的5種方法

題外話：上班路上聽 陳鋼先生 的《人文通識》，今天是李叔同先生，也就是大家所熟知的弘一法師，講的蠻有意思。

數組扁平化如下示例，簡單來說就是展開。

var arr1 = [1, [2, 3], [[3, 4, 2], 1], 5, [3]]; =>  [1, 2, 3, 3, 4, 2, 1, 5, 3]
var arr2 = [1,['2', 3], [2], '2', 4]   =>   [1, "2", 3, 2, "2", 4]

1.經典：遞歸 

思路：循環數組，判斷arr[i]是否是數組，是數組的話再次調用此函數。

function flatten(arr) {
    var res = [];
    for(var i = 0, len = arr.length; i < len; i++) {
        if (Array.isArray(arr[i])) {
            res = res.concat(flatten(arr[i]));  // concat不改變原數組，返回被連接數組的副本
        } else {
            res.push(arr[i]); // push直接操作原數組
        }
    }
    return res;
}

2. reduce() 方法

reduce() 接收一個函數作爲累加器，數組中的每個值（從左到右）開始縮減，最終計算爲一個值。

reduce() 語法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

接收四個參數，前兩個必填，total 初始值，計算結束後的返回值；currentValue 當前元素；currentIndex 當前元素索引；

arr 元素所屬數組對象；initialValue，累加器初始值。

function flatten(arr) {
    return arr.reduce((pre, next) => {
        return pre.concat(Array.isArray(next) ? flatten(next) : next);
    }, [])
}

3. toString()   // 別用 別用 別用

用此方法會改變數據類型，當你確定數組中每項數據類型都一樣的時候（number or string）可以用一下，最好別用別用別用。

function flatten(arr) { // 這個對於 arr1 可行，對於arr2 致命。
    return arr.toString().split(',').map(function(item){  // split之後是字符串 再轉一下數字
        return +item
    })
}

4. ES6 flat()

 flat(n）將每一項的數組偏平化，n默認是1,表示扁平化深度，Infinity無限次

 flat()會跳過空格,返回新數組不改變原數組

function flatten(arr) {
    return arr.flat(Infinity);
}

5. ES6 擴展運算符 ...

 擴展運算符（...）只能展開一層，也要循環，思路同 1、2。

function flatten(arr) {
    while(arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr); // 給原數組重新賦值
    }
    return arr;
}