需要tree但拿到的是arr

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

就大概是像下面这样一个数组了，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组件进行展示了

思路

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

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

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

总结

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