[TOC] # 簡介 數組的扁平化，就是將一個嵌套多層的數組 array (嵌套可以是任何層數)轉換為只有一層的數組。 舉個例子，假設有個名為 flatten 的函數可以做到數組扁平化，效果就會如下： ~~~js var arr = [1, [2, [3, 4]]]; console.log(flatten(arr)) // [1, 2, 3, 4] ~~~ <br> <br> # flat ES6 為數組實例新增了`flat`方法，用于將嵌套的數組“拉平”，變成一維的數組。該方法返回一個新數組，對原數組沒有影響。 `flat`默認只會 “拉平” 一層，如果想要 “拉平” 多層的嵌套數組，需要給`flat`傳遞一個整數，表示想要拉平的層數。 ~~~ function flattenDeep(arr, deepLength){ return arr.flat(deelLength) } ~~~ <br> <br> # 遞歸 ~~~ function flatten1(arr) { var result = [] for (var i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { result.push.apply(result, flatten1(arr[i])) // 也可以使用 concat，但會產生新數組 // result = result.concat(flatten1(arr[i])) } else { result.push(arr[i]) } } return result } ~~~ # toString 如果數組的元素都是數字，那么我們可以考慮使用 toString 方法，因為： ~~~js [1, [2, [3, 4]]].toString() // "1,2,3,4" ~~~ <br> 調用 toString 方法，返回了一個逗號分隔的扁平的字符串，這時候再 split，然后轉成數字就可以實現扁平化。 <br> 然而這種方法使用的場景卻非常有限，**如果數組是 [1, '1', 2, '2'] 的話，這種方法就會產生錯誤的結果**。 ~~~ function flatten2(arr) { return arr.toString().split(',').map(function (item) { return +item }) } ~~~ <br> <br> # recude ~~~ function flatten3(arr) { return arr.reduce(function (prev, next) { // 可以簡寫成 // return prev.concat(Array.isArray(next) ? flatten3(next) : next) if (Array.isArray(next)) { return prev.concat(flatten3(next)) } else { return prev.concat(next) } }, []) } ~~~ <br> <br> # ... ES6 增加了擴展運算符，用于取出參數對象的所有可遍歷屬性，拷貝到當前對象之中： ~~~js var arr = [1, [2, [3, 4]]]; console.log([].concat(...arr)); // [1, 2, [3, 4]] ~~~ <br> 我們用這種方法只可以扁平一層，但是順著這個方法一直思考，我們可以寫出這樣的方法： ~~~ function flatten4 (arr) { while(arr.some((item) => Array.isArray(item))) { arr = [].concat(...arr) } return arr } ~~~ <br> <br> # 參考資料 [JavaScript專題之數組扁平化](https://github.com/mqyqingfeng/Blog/issues/36#)