JavaScript中數組flat方法的使用與實現方法

Posted on by

前言

flat() 方法會按照一個可指定的深度遞歸遍歷數組，並將所有元素與遍歷到的子數組中的元素合並為一個新數組返回。

語法

var newArray = arr.flat([depth])

參數

depth 可選

指定要提取嵌套數組的深度，默認值為 1。

返回值

一個包含將數組與子數組中所有元素的新數組。（就是扁平化後的每一項重新組成的數組，所以不會改變原數組。）

使用示例

扁平化數組，不傳遞參數的時候默認為一層

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

設置扁平化的深度

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

當傳入Infinity時，相當於扁平化最深層次的數組

let arr = [1,2,[3,[4,[5]]]]
const reasut3 = arr.flat(Infinity)
console.log(reasut3)
// [1, 2, 3, 4, 5]

當數組裡面有空項的時候，會過濾掉空值

const arr2 = [1, , 2, [3]]
const reasut4 = arr2.flat()
console.log(reasut4)
// [1, 2, 3]

方法實現

1、當隻扁平化一層的時候

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
  return list.reduce((pre, item) => {
    return pre.concat(item)
  }, [])
}
console.log(getFlatArr(arr5))
// [1,2,3,[4,5],6,[7],8]

上述代碼使用reduce方法和concat方法組合，實現隻展平一層數組的方法。還可以使用foreach和push方法如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]

function getFlatArr (list) {
  let result = []
  list.forEach(element => {
    if (Array.isArray(element)) {
      result.push(...element)
    } else {
      result.push(element)
    }
  })
  return result
}
console.log(getFlatArr(arr5))
// [1,2,3,[4,5],6,[7],8]

上述代碼采用foreach方法對數組的每一項循環，並使用isArray方法判斷是不是數組將當前項push進result中，最後返回result。

2、當數組展平的層數為最大層時

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
  return list.reduce((pre, item) => pre.concat(Array.isArray(item)? getFlatArr(item): item), [])
}
console.log(getFlatArr(arr5))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代碼使用數組的reduce方法和遞歸的形式實現，當reduce方法循環到數組的每一項時都去判斷當前項是不是新的數組，是的話就使用遞歸去吧裡面的每一項逐層剝離出來，最後進行合並，不是數組的話，就直接將當前項合並到數組中。還可以使用foreach方法+遞歸的方式進行實現，如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
  const result = []
  ;(function flat(list) {
    // forEach 自動去除數組空位
    list.forEach(item => {
      // 判斷是不是數組
      if (Array.isArray(item)) {
        // 進行數組遞歸
        flat(item)
      } else {
        result.push(item)
      }
    })
  })(list)
  return result
}
console.log(getFlatArr(arr5))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代碼創建一個新的數組，使用foreach方法循環原始數組的每一項，然後判斷當前項是否是一個數組是的話就遞歸，不是的話就將當前項push進新創建的數組，最後返回創建的數組。還可以使用堆棧的概念來實現，如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
  const arrList = JSON.parse(JSON.stringify(list))
  const result = []
  while (arrList.length) {
    // 彈出堆棧中的數據
    let arr = arrList.shift()
    if (Array.isArray(arr)) arrList.unshift(...arr)
    else result.push(arr)
  }
  return result
}

console.log(getFlatArr(arr5))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代碼使用堆棧概念存儲數據，使用while語句進行循環彈出堆棧中的數據，彈出的數據如果不是數組類型的話就push進創建的新數組中，否則的話就將當前項解構後在一次存儲進堆棧中，重復上述操作直到堆棧中的數據被清空，最後返回創建的數組。

3、數組扁平化使用參數控制扁平的深度

可以使用reduce方法和遞歸來實現如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list, deepNum = 1) {
  return deepNum > 0? list.reduce((pre, item) => {
    return pre.concat(Array.isArray(item)? getFlatArr(item, deepNum - 1): item)
  }, []): list.slice()
}

console.log(getFlatArr(arr5))
// [1,2,3,[4,5], 6,[7], 8]

console.log(getFlatArr(arr5, 3))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代碼使用reduce方法，將循環的當前項展開成一個數組，然後通過傳入的deepNum參數來控制展開的深度，當deepNum小於1的時候就返回原數組的一個淺拷貝，否則就根據deepNum的大小來展開對應深度的數組。還可以使用foreach方法+遞歸的形式來實現，如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list, deepNum = 1) {
  const result = []
  ;(function flat(list, deepNum) {
    list.forEach(element => {
      // 判斷當前元素是否為數組並控制遞歸的深度
      if (Array.isArray(element) && deepNum > 0) flat(element, deepNum - 1)
      else result.push(element)
    })
  })(list, deepNum)
  return result
}

console.log(getFlatArr(arr5))
// [1,2,3,[4,5], 6,[7], 8]

console.log(getFlatArr(arr5, 3))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代碼，首先創建一個新的數組result，然後使用自調用函數，傳入原數組和深度大小，使用foreach進行循環，然後判斷循環的當前項是否為數組，並且遞歸的深度的大小大於0，是的話就繼續遞歸當前數組，深度減去1。否則的話就將當前元素push進新創建的數組result中，就是通過這樣循環的方法，最後將原來數組中的每一項根據傳入的深度大小都push進瞭一開始創建的新數組result中，最後返回數組result即可。

總結

到此這篇關於JavaScript中數組flat方法的使用與實現的文章就介紹到這瞭,更多相關js數組flat方法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：