快捷導(dǎo)航

JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實現(xiàn)

更新時間：2022年08月05日 10:04:41 作者：一只豆豆

本文主要介紹了JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

之前面試有遇到過這個問題，面試官問：如何把一個數(shù)組數(shù)據(jù)扁平，然后轉(zhuǎn)化為Tree結(jié)構(gòu)數(shù)據(jù)，工作中剛好也用到了，在這里總結(jié)一下。

需求大致如下

把這個數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)數(shù)據(jù)(Tree)

    const flatArr = [
        { id: '01', parentId: 0, name: '節(jié)點1' },
        { id: '011', parentId: '01', name: '節(jié)點1-1' },
        { id: '0111', parentId: '011', name: '節(jié)點1-1-1' },
        { id: '02', parentId: 0, name: '節(jié)點2' },
        { id: '022', parentId: '02', name: '節(jié)點2-2' },
        { id: '023', parentId: '02', name: '節(jié)點2-3' },
        { id: '0222', parentId: '022', name: '節(jié)點2-2-2' },
        { id: '03', parentId: 0, name: '節(jié)點3' },
      ]

最終結(jié)果

    [
        {
          id: '01',
          name: '節(jié)點1',
          parentId: 0,
          children: [
            {
              id: '011',
              name: '節(jié)點1-1',
              parentId: '01',
              children: [
                {
                  id: '0111',
                  name: '節(jié)點1-1-1',
                  parentId: '011',
                  children: [
                      ...
                  ],
                },
              ],
            },
          ],
        },
        {
          id: '02',
          name: '節(jié)點2',
          parentId: 0,
          children: [
              // 如上節(jié)點1
          ]
        },
        {
          id: '03',
          name: '節(jié)點3',
          parentId: 0,
          children: [
              // 如上節(jié)點1
          ]
        }
      ]

遞歸方式

遞歸方式實現(xiàn)是OK的，但是數(shù)據(jù)多的話會稍微慢一點哈

    const flatArr = [
        { id: '01', parentId: 0, name: '節(jié)點1' },
        { id: '011', parentId: '01', name: '節(jié)點1-1' },
        { id: '0111', parentId: '011', name: '節(jié)點1-1-1' },
        { id: '02', parentId: 0, name: '節(jié)點2' },
        { id: '022', parentId: '02', name: '節(jié)點2-2' },
        { id: '023', parentId: '02', name: '節(jié)點2-3' },
        { id: '0222', parentId: '022', name: '節(jié)點2-2-2' },
        { id: '03', parentId: 0, name: '節(jié)點3' },
      ]
      
    function getTreeData (arr, parentId) {
        function loop (parentId) {
          return arr.reduce((pre, cur) => {
            if (cur.parentId === parentId) {
              cur.children = loop(cur.id)
              pre.push(cur)
            }
            
            return pre
          }, [])
        }
        return loop(parentId)
      }

      const result = getTreeData(flatArr, 0)
      console.log('result', result)

打印結(jié)果如圖

非遞歸方式

這種方法看起來就很簡單代碼也很簡潔

    const flatArr = [
        { id: '01', parentId: 0, name: '節(jié)點1' },
        { id: '011', parentId: '01', name: '節(jié)點1-1' },
        { id: '0111', parentId: '011', name: '節(jié)點1-1-1' },
        { id: '02', parentId: 0, name: '節(jié)點2' },
        { id: '022', parentId: '02', name: '節(jié)點2-2' },
        { id: '023', parentId: '02', name: '節(jié)點2-3' },
        { id: '0222', parentId: '022', name: '節(jié)點2-2-2' },
        { id: '03', parentId: 0, name: '節(jié)點3' },
     ]
      
    function getData (arr) {
        // 利用兩層filter實現(xiàn)
        let data = arr.filter(item => {
          item.children = arr.filter(e => {
            return item.id === e.parentId
          })
          return !item.parentId
        })

        return data
      }
      const res = getData(flatArr)
      console.log('res', res)

打印結(jié)果如圖

小結(jié)

實現(xiàn)的方法很多，選擇自己喜歡的就好，到此這篇關(guān)于JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu) 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: