快捷導(dǎo)航

JS實現(xiàn)數(shù)組扁平化的方法分享

更新時間：2023年04月20日 10:24:10 作者：webxue

數(shù)組扁平化指的是：將一個多層嵌套的數(shù)組，處理成只有一層的數(shù)組。本文主要和大家介紹了幾個常用的JS數(shù)組扁平化方法，希望對大家有所幫助

前言

當(dāng)我們遇到一個 樹形結(jié)構(gòu)的數(shù)據(jù)，或者 多層嵌套 的數(shù)組，如果想拿到數(shù)組項的 某一個 字段值，操作起來將會很麻煩，這個時候就需要我們將數(shù)組 扁平化 之后，通過 map 方法直接就可以拿到。

過程

什么是扁平化

數(shù)組扁平化指的是：將一個多層嵌套的數(shù)組，處理成只有一層的數(shù)組，如下代碼：

const arr = [
  { id:1,title:"文章管理",children:[
      { id:2,title:"文章列表",children:[
          { id:3,title:"文章新增" },
          { id:4,title:"文章刪除" },
      ] }
  ] }
]

// 轉(zhuǎn)換之后
[
  { id:1,title:"文章管理" },
  { id:2,title:"文章列表" },
  { id:3,title:"文章新增" },
  { id:4,title:"文章刪除" },
]

通過上面的結(jié)果我們就可以很方便地拿出所有的 id 。

方法一：flat

flat：這是ES6中Array對象新增的一個方法，可以很方便的把多維數(shù)組轉(zhuǎn)換為一維數(shù)組。MDN文檔參考此處。

flat方法的參數(shù)是深度，默認(rèn)是 1，表示展開幾層。

假設(shè)我們是三維數(shù)組，那展開的深度就應(yīng)該是 3-1。

這樣做確實有些麻煩，JavaScript 也貼心地為我們提供了 Infinity，可在此處查看介紹。

所以我們可以將 arr.flat(2) 修改為 arr.flat(Infinity)。

但是使用 flat 存在個弊端，當(dāng)我們數(shù)組項是對象，且無限下鉆時，就不能很好的幫我們展開了，這個時候就引入第二種方法。

方法二：遞歸

遞歸：是一種算法，表示在一個函數(shù) 內(nèi) return自身，當(dāng)滿足指定條件時 return值跳出循環(huán)。

這里我們定義一個遞歸方法 flatArr，方法接收源數(shù)組 data 和子集key childField：

function flatArr(data = [],childField = ""){}

定義一個結(jié)果集 result ，并最終返回：

function flatArr(data = [],childField = ""){
  const result = [];
  
  return result;
}

接下來定義一個遞歸方法 deepFn，接收一個數(shù)組參數(shù) arr ，并循環(huán) arr 執(zhí)行遞歸，將循環(huán)出來的每一項push 給 result，并調(diào)用這個遞歸方法：

function flatArr(data = [],childField = ""){
  const result = [];
  const deepFn = (arr) => {
    arr.forEach(e => {
      if(e[childField] && e[childField].length > 0 ){
        deepFn(e[childField])
      }else{
        result.push(e)
      }
    })
  }
  deepFn(data);
  return result;
}

至此，這個遞歸方法就這樣實現(xiàn)了，接下來我們測試一下：