JS怎么實現數組扁平化

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

過程

什么是扁平化

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

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

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

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

方法一：flat

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

flat方法的參數是深度，默認是 1，表示展開幾層。

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

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

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

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

方法二：遞歸

遞歸：是一種 算法，表示在一個 函數 內 return自身 ，當滿足 指定條件 時 return值 跳出循環。

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

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

定義一個結果集 result ，并最終返回：

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

接下來定義一個遞歸方法 deepFn，接收一個數組參數 arr ，并循環 arr 執行遞歸，將循環出來的每一項push 給 result，并調用這個遞歸方法 ：

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;
}

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

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