Js基礎系列-數組的扁平化

前言

一句話歸納：數組的扁平化，就是將一個嵌套多層的數組 array (嵌套能夠是任何層數)轉換爲只有一層的數組

示例

const arr = [1, 2, [3,4, [5, 6]], 7, 8, [9,10,11,[12]]]
const flatten = (arr) => {
    ....
}
# flatten(arr) 輸出[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
複製代碼

平常思考

已經清楚flatten函數的做用的話，想下如何實現這個函數

• 遞歸，判斷選項是不是數組，遞歸調用
• 若是數組都是數字的話，直接用toString 方法
• 數組的高階函數reduce，其實也是進行判斷調用
• 結合ES6...擴展符號，while 循環
• ES6已經支持flat,直接調用便可 flat傳送門

實現方式

遞歸

const flatten = (arr) => {
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
      const element = arr[i];
      if (element && Object.prototype.toString.call(element) === '[object Array]') {
        newArr = newArr.concat(flatten(element))
      } else {
        newArr.push(element)
      }
    }
    return newArr
}
複製代碼

toString

const flatten = (arr) => {
  return arr.toString().split(",").map((item) => {
    return +item
  })
}
複製代碼

reduce

reduce包含兩個參數：回調函數，傳給prev的初始值

const flatten = (arr) => {
  return arr.reduce((prev, next) => {
    return prev.concat(Object.prototype.toString.call(next) === '[object Array]' ? flatten(next): next)
  }, [])
}
複製代碼

擴展運算符 + while + some

es6的擴展運算符能將二維數組變爲一維 若arr中含有數組則使用一次擴展運算符，直至沒有爲止

const flatten = (arr) => {
  while( arr.some ( item => Array.isArray(item))){
    arr = [].concat(...arr);
  }
  return arr
}
複製代碼

Es6 flat

Array.prototype.flat()用於將嵌套的數組「拉平」，變成一維的數組。該方法返回一個新數組，對原數據沒有影響。

# flat()的參數爲1，表示要「拉平」1層的嵌套數組,默認是1
# 若是無論有多少層嵌套，都要轉成一維數組，能夠用Infinity關鍵字做爲參數
arr.flat(Infinity)
複製代碼

參考文檔

數組的扁平化
js專題之數組的扁平化