快捷導(dǎo)航

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

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

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

前言

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

過(guò)程

什么是扁平化

數(shù)組扁平化指的是：將一個(gè)多層嵌套的數(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:"文章刪除" },
]

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

方法一：flat

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

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

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

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

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

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

方法二：遞歸

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

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

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

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

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

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

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

至此，這個(gè)遞歸方法就這樣實(shí)現(xiàn)了，接下來(lái)我們測(cè)試一下：