数组变成树状结构封装

前言

对数组变成树状结构一般的应用场景非常的广泛，有后台权限的管理，侧边栏的渲染等，相信大家对数组变成树状结构一定不陌生，大家一般工作中经常会遇到，运气好点的，后台已经帮你处理好了数据，得到的就是帮你处理好了的数据，不好的，那就需要自己手动处理下数据了。今天就和大家详细解析下如何高效的把数组变成树状结构。

---

使用步骤

将数组变成树状结构封装，可以更好的方便项目中有需要的地方可以直接调用。

1. 假设现有数据如下，有pid的代表为子级，pid的内容对应的id就是他的父级

list:[
   { 'id': '29', 'pid': '',     'name': '总裁办' },
   { 'id': '2c', 'pid': '',     'name': '财务部' },
   { 'id': '2d', 'pid': '2c', 'name': '财务核算部'},
   { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'},
   { 'id': 'd2', 'pid': '',     'name': '技术部'},
   { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部'}
 ]

2. 因为项目开发过程中，都是模块化管理，因此我们直接把他封装起来
   先定义两个中间变量

export function tranListToTreeData(list) {
  const treeList = [],  // 最终要产出的树状数据的数组
        map = {}        // 存储映射关系
        }

3. 先把数据遍历出来，建立一个映射关系，并给每个元素补充children属性，方便路由的配置
   （映射关系: 目的是让我们能通过id快速找到对应的元素） 补充children：让后边的计算更方便

```
list.forEach(item => {
if (!item.children) {    // 如果list遍历出来的数据没有children，就给他的数据里增加一个children，并赋值一个空数组
  item.children = []
}
map[item.id] = item      //这里的map是一个空对象
```

4. 在遍历一遍list数据，这里主要是用于判断数据有没有pid属性，有的话，就说明不是顶层数据，则代表在children对象中，反之，没有就代表是顶层数据

 list.forEach(item => {
    // 对于每一个元素来说，先找它的上级
    //    如果能找到，说明它有上级，则要把它添加到上级的children中去
    //    如果找不到，说明它没有上级，直接添加到 treeList
    const parent = map[item.pid]
    // 如果存在则表示item不是最顶层的数据
    if (parent) {
      parent.children.push(item)
    } else {
      // 如果不存在 则是顶层数据
      treeList.push(item)
    }
  })
  // 返回出去
  return treeList
}

完整代码

export function tranListToTreeData(list) {
  const treeList = [], 
        map = {}     
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    map[item.id] = item
  })

  list.forEach(item => {
    const parent = map[item.pid]
    if (parent) {
      parent.children.push(item)
    } else {
      treeList.push(item)
    }
  })
  return treeList
}

---

总结

把一个没有分类的数据成功转换成了树状结构，接下来直接渲染到页面就可以了，大家还有什么更好的转换数据的方法吗，有的话欢迎大家留言，我给大家一起看看。