前端数组转树arrToTree

3,614 阅读2分钟

需要tree但拿到的是arr

今天给大家分享一个前端开发过程中遇到的数组转树的操作,最终想要的效果是像下图这样的树形控件,但是一般后端返回给我们的都是一个数组

904819.png

就大概是像下面这样一个数组了,parent的值为父节点的key值,如果这个节点为一级节点,parent就为0, isLeaf表示是否为叶子节点,这个数组只是为了演示用的,我实际遇到的情况是一级节点并没有parent字段,每个节点也没有children字段,我在拿到请求数据的时候先用map处理了一下

let arrData = [
      { key: 1, title: '1', parent: 0, isLeaf: false, children: [] },
      { key: 11, title: '1-1', parent: 1, isLeaf: false, children: [] },
      { key: 111, title: '1-1-1', parent: 11, isLeaf: true, children: [] },
      { key: 112, title: '1-1-2', parent: 11, isLeaf: false, children: [] },
      { key: 1121, title: '1-1-2-1', parent: 112, isLeaf: true, children: [] },
      { key: 12, title: '1-2', parent: 1, isLeaf: false, children: [] },

      { key: 2, title: '2', parent: 0, isLeaf: false, children: [] },
      { key: 21, title: '2-1', parent: 2, isLeaf: true, children: [] },
      { key: 22, title: '2-2', parent: 2, isLeaf: false, children: [] },
      { key: 221, title: '2-2-1', parent: 22, isLeaf: true, children: [] },

      { key: 3, title: '3', parent: 0, isLeaf: false, children: [] },
      { key: 31, title: '3-1', parent: 3, isLeaf: true, children: [] },
      { key: 32, title: '3-2', parent: 3, isLeaf: true, children: [] }
    ]

arrToTree函数

有了处理好的数组以后,就是需要将arr转成tree了,不废话直接上代码

function arrToTree(arr, parentId) {
  return arr.filter(item => parentId === undefined ? item.parent === 0 : item.parent === parentId ).map( item => {
    item.children = arrToTree(arr, item.key)
    return item
  })
}

let tree = arrToTree(arrData)

tree就是转换后的结果了,打印一下,可以看到已经成功的转成树了,可以套入各ui组件进行展示了

1147.png

思路

结果拿到了,那么来分享一下我的思路, 总的思路就两点

  • 找到同一级的节点
  • 将这些同一级的节点添加到他们所属的父节点的children中

那么首先肯定就是找一级节点了,那就是找parent为0的节点了,第一次使用arrToTree,只传了arr,并没有传parentId,使用filter判断一下,找到parent为0的节点,作为一级节点,然后就是找这些一级节点的children了,继续用arrToTree,这时候就可以把当前的节点key值作为parentId传进去了,找自己的孩子节点。然后就继续往找下级节点。

总结

刚开始我也是在网上找了一个方法去处理的(毕竟不用动脑子,哈哈),但是数据量大的时候,后一半就会出现错误,我也没有去深究原因,因为要完成开发任务,就想着自己写一下吧,其实最主要的还是要有想法,理清逻辑关系,写代码就简单了。还有就是理解以后自己写的东西,不会忘,哈哈哈。