likes
comments
collection
share

数组扁平转树形结构数据(Tree)

作者站长头像
站长
· 阅读数 12

前言

之前面试有遇到过这个问题,面试官问:如何把一个数组数据扁平,然后转化为Tree结构数据,工作中刚好也用到了,在这里总结一下。

需求大致如下

把这个数组转为树形结构数据(Tree)

    const flatArr = [
        { id: '01', parentId: 0, name: '节点1' },
        { id: '011', parentId: '01', name: '节点1-1' },
        { id: '0111', parentId: '011', name: '节点1-1-1' },
        { id: '02', parentId: 0, name: '节点2' },
        { id: '022', parentId: '02', name: '节点2-2' },
        { id: '023', parentId: '02', name: '节点2-3' },
        { id: '0222', parentId: '022', name: '节点2-2-2' },
        { id: '03', parentId: 0, name: '节点3' },
      ]

最终结果

    [
        {
          id: '01',
          name: '节点1',
          parentId: 0,
          children: [
            {
              id: '011',
              name: '节点1-1',
              parentId: '01',
              children: [
                {
                  id: '0111',
                  name: '节点1-1-1',
                  parentId: '011',
                  children: [
                      ...
                  ],
                },
              ],
            },
          ],
        },
        {
          id: '02',
          name: '节点2',
          parentId: 0,
          children: [
              // 如上节点1
          ]
        },
        {
          id: '03',
          name: '节点3',
          parentId: 0,
          children: [
              // 如上节点1
          ]
        }
      ]

递归方式

递归方式实现是OK的,但是数据多的话会稍微慢一点哈

    const flatArr = [
        { id: '01', parentId: 0, name: '节点1' },
        { id: '011', parentId: '01', name: '节点1-1' },
        { id: '0111', parentId: '011', name: '节点1-1-1' },
        { id: '02', parentId: 0, name: '节点2' },
        { id: '022', parentId: '02', name: '节点2-2' },
        { id: '023', parentId: '02', name: '节点2-3' },
        { id: '0222', parentId: '022', name: '节点2-2-2' },
        { id: '03', parentId: 0, name: '节点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)

打印结果如图

数组扁平转树形结构数据(Tree)

非递归方式

这种方法看起来就很简单代码也很简洁

    const flatArr = [
        { id: '01', parentId: 0, name: '节点1' },
        { id: '011', parentId: '01', name: '节点1-1' },
        { id: '0111', parentId: '011', name: '节点1-1-1' },
        { id: '02', parentId: 0, name: '节点2' },
        { id: '022', parentId: '02', name: '节点2-2' },
        { id: '023', parentId: '02', name: '节点2-3' },
        { id: '0222', parentId: '022', name: '节点2-2-2' },
        { id: '03', parentId: 0, name: '节点3' },
     ]
      
    function getData (arr) {
        // 利用两层filter实现
        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)

打印结果如图

数组扁平转树形结构数据(Tree)

小结

实现的方法很多,选择自己喜欢的就好,如果有错误欢迎在评论区指出。