前言

當我們遇到一個 樹形結(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ù)是深度，默認是 1，表示展開幾層。

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

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

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

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

方法二：遞歸

遞歸：是一種 算法，表示在一個 函數(shù) 內(nèi) return自身 ，當滿足 指定條件 時 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)了，接下來我們測試一下：

好嘞，確實沒什么問題，大功告成！

到此這篇關(guān)于JS實現(xiàn)數(shù)組扁平化的方法分享的文章就介紹到這了,更多相關(guān)JS數(shù)組扁平化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論