JS怎么實現(xiàn)數(shù)組扁平化

今天小編給大家分享一下JS怎么實現(xiàn)數(shù)組扁平化的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

過程

什么是扁平化

數(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è)我們是 三維數(shù)組 ，那展開的深度就應(yīng)該是 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)了，接下來我們測試一下：

以上就是“JS怎么實現(xiàn)數(shù)組扁平化”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習更多的知識，請關(guān)注億速云行業(yè)資訊頻道。