两种方式将平铺数据转化为树形结构

有时候我们需要用到树形结构的数据便于我们展示像组织架构、地区这种有层级结构的信息。那么我们就需要将普通平铺的数据转化为树形结构的数据。主要是使用递归算法。

观察这种数据不难发现，每条数据一般至少包含 id 和 pid 两个属性，id 是每条数据独一无二的身份标识，pid 则表示与其他数据的从属关系。如果当前数据的 pid 等于另外一条数据的 id，那当前数据就是另外一条数据的子数据。

封装一个工具方法，**src/utils/index.js**

第一种：使用递归算法遍历需要处理的数据。

/** *
 *
 *  将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 递归的关键在于要有一个入口和一个出口，入口  	*  表示递归开始，出口则标识递归的结束。没有出口会造成死循环
 *  遍历树形 有一个重点 要先找一个头儿
 * ***/
export function tranListToTreeData(list, rootValue) {
  var arr = [];
  list.forEach((item) => {
    if (item.pid === rootValue) {
      // 找到之后 就要去找 item 下面有没有子节点
      const children = tranListToTreeData(list, item.id);
      if (children.length) {
        // 如果children的长度大于0 说明找到了子节点
        item.children = children;
      }
      arr.push(item); // 将内容加入到数组中
    }
  });
  return arr;
}

第二种：上面的递归方式，每一次都需要遍历整个list，对于量特别大的数据来说，性能非常差，很大可能会造成卡死的情况。因此对于数据量比较大的情况（成千上万条数据），比如大型国企的人员组织架构，可以使用哈希表的方式实现树形数据的转化

// 数据量大时使用递归转化数据会有性能问题，可以使用哈希表优化
export function listToTree(list, rootValue) {
  let map = {},
    node,
    roots = [],
    i

  for (i = 0; i < list.length; i += 1) {
    map[list[i].org_id] = i // 初始化哈希表
    list[i].children = [] // 初始化 children
  }

  for (i = 0; i < list.length; i += 1) {
    node = list[i]
    if (node.parent_org_id !== rootValue) {
      // 如果存在父级
      if (map[node.parent_org_id] !== undefined) {
        list[map[node.parent_org_id]].children.push(node)
      }
      // else {
      //   console.error(
      //     `Parent ID ${node.parent_org_id} not found for node ID ${node.org_id}`
      //   )
      // }
    } else {
      // 如果是顶级节点
      roots.push(node)
    }
  }
  return roots
}