快捷導(dǎo)航

JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)方法

更新時(shí)間：2022年08月22日 14:17:19 作者：前端三腳貓

在Array的顯示原型下有一個(gè)flat方法,可以將多維數(shù)組,降維,傳的參數(shù)是多少就降多少維,下面這篇文章主要給大家介紹了關(guān)于JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下

前言

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

語(yǔ)法

var newArray = arr.flat([depth])

參數(shù)

depth 可選

指定要提取嵌套數(shù)組的深度，默認(rèn)值為 1。

返回值

一個(gè)包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組。（就是扁平化后的每一項(xiàng)重新組成的數(shù)組，所以不會(huì)改變?cè)瓟?shù)組。）

使用示例

扁平化數(shù)組，不傳遞參數(shù)的時(shí)候默認(rèn)為一層

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

設(shè)置扁平化的深度

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

當(dāng)傳入Infinity時(shí)，相當(dāng)于扁平化最深層次的數(shù)組

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

當(dāng)數(shù)組里面有空項(xiàng)的時(shí)候，會(huì)過(guò)濾掉空值

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

方法實(shí)現(xiàn)

1、當(dāng)只扁平化一層的時(shí)候

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方法組合，實(shí)現(xiàn)只展平一層數(shù)組的方法。還可以使用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方法對(duì)數(shù)組的每一項(xiàng)循環(huán)，并使用isArray方法判斷是不是數(shù)組將當(dāng)前項(xiàng)push進(jìn)result中，最后返回result。

2、當(dāng)數(shù)組展平的層數(shù)為最大層時(shí)

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]

上述代碼使用數(shù)組的reduce方法和遞歸的形式實(shí)現(xiàn)，當(dāng)reduce方法循環(huán)到數(shù)組的每一項(xiàng)時(shí)都去判斷當(dāng)前項(xiàng)是不是新的數(shù)組，是的話就使用遞歸去吧里面的每一項(xiàng)逐層剝離出來(lái)，最后進(jìn)行合并，不是數(shù)組的話，就直接將當(dāng)前項(xiàng)合并到數(shù)組中。還可以使用foreach方法+遞歸的方式進(jìn)行實(shí)現(xiàn)，如：

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

上述代碼創(chuàng)建一個(gè)新的數(shù)組，使用foreach方法循環(huán)原始數(shù)組的每一項(xiàng)，然后判斷當(dāng)前項(xiàng)是否是一個(gè)數(shù)組是的話就遞歸，不是的話就將當(dāng)前項(xiàng)push進(jìn)新創(chuàng)建的數(shù)組，最后返回創(chuàng)建的數(shù)組。還可以使用堆棧的概念來(lái)實(shí)現(xiàn)，如：

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) {
    // 彈出堆棧中的數(shù)據(jù)
    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]

上述代碼使用堆棧概念存儲(chǔ)數(shù)據(jù)，使用while語(yǔ)句進(jìn)行循環(huán)彈出堆棧中的數(shù)據(jù)，彈出的數(shù)據(jù)如果不是數(shù)組類型的話就push進(jìn)創(chuàng)建的新數(shù)組中，否則的話就將當(dāng)前項(xiàng)解構(gòu)后在一次存儲(chǔ)進(jìn)堆棧中，重復(fù)上述操作直到堆棧中的數(shù)據(jù)被清空，最后返回創(chuàng)建的數(shù)組。

3、數(shù)組扁平化使用參數(shù)控制扁平的深度

可以使用reduce方法和遞歸來(lái)實(shí)現(xiàn)如：

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方法，將循環(huán)的當(dāng)前項(xiàng)展開成一個(gè)數(shù)組，然后通過(guò)傳入的deepNum參數(shù)來(lái)控制展開的深度，當(dāng)deepNum小于1的時(shí)候就返回原數(shù)組的一個(gè)淺拷貝，否則就根據(jù)deepNum的大小來(lái)展開對(duì)應(yīng)深度的數(shù)組。還可以使用foreach方法+遞歸的形式來(lái)實(shí)現(xiàn)，如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list, deepNum = 1) {
  const result = []
  ;(function flat(list, deepNum) {
    list.forEach(element => {
      // 判斷當(dāng)前元素是否為數(shù)組并控制遞歸的深度
      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]

上述代碼，首先創(chuàng)建一個(gè)新的數(shù)組result，然后使用自調(diào)用函數(shù)，傳入原數(shù)組和深度大小，使用foreach進(jìn)行循環(huán)，然后判斷循環(huán)的當(dāng)前項(xiàng)是否為數(shù)組，并且遞歸的深度的大小大于0，是的話就繼續(xù)遞歸當(dāng)前數(shù)組，深度減去1。否則的話就將當(dāng)前元素push進(jìn)新創(chuàng)建的數(shù)組result中，就是通過(guò)這樣循環(huán)的方法，最后將原來(lái)數(shù)組中的每一項(xiàng)根據(jù)傳入的深度大小都push進(jìn)了一開始創(chuàng)建的新數(shù)組result中，最后返回?cái)?shù)組result即可。

總結(jié)

到此這篇關(guān)于JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js數(shù)組flat方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: