在不知道顶级节点的情况下，如何生成父子节点树

2020-04-23 12:04:08 阅读：225 来源： 互联网

由于项目要做旭日图，由于后端只帮我提取的数据库中扁平化的对象数组，所以需要我来进行数据处理，为了这个我还得处理一下数据，下面是我的数据处理过程,。

// 本算法在不确定顶级节点的情况下，优先过滤出顶级节点，在进行遍历
// 进行数据的大量缓存，用空间换时间，让生成tree的速度像柔丝般顺滑
function generatorTree(data) {
  const value = 'value';
  const name = 'name';
  const id = 'id';
  const pid = 'pid';
  // 保存所有ID，然后找到pid没有对应节点的就是顶级节点
  const hasId = {};
  // 顶层父节点数组
  const topPIdArr = [];
  // 将每个节点对应的子节点对应起来
  const nodeToChildren = {};
  // 获取所有父ID（包括顶级节点的父ID）
  const pidSet = new Set();
  data.forEach(e => {
    // 之后通过topPIdArr数组可以通过深度遍历生成父子节点tree
    if (nodeToChildren[e[pid]]) {
      nodeToChildren[e[pid]].push({name: e[name], value: e[value], id: e[id], children: []})
    } else {
      nodeToChildren[e[pid]] = [{name: e[name], value: e[value], id: e[id], children: []}];
    }
    pidSet.add(e[pid]);
    hasId[e[id]] = true;
  });
  // 遍历父ID集合
  for (const pid of pidSet) {
    if (!hasId[pid]) {
      // 如果idObj没有该pid节点，说明它是顶级父节点
      topPIdArr.push(pid);
    }
  }
  // 如果你不想改变nodeToChildren，建议深拷贝一下，当然里面如果属性有undefined，函数或者symbol那你得自己实现一个深拷贝方法
  const copyNodeToChildren = JSON.parse(JSON.stringify(nodeToChildren));
  // 用来存储生成的树状结构数据
  const nodeTree = [];
  // 找到所有顶级节点，开始递归生成tree，tree，tree，真的脆
  data.filter(e => topPIdArr.includes(e.pid)).forEach((e, index) => {
    nodeTree.push({name: e[name], value: e[value], id: e[id], children: []});
    deepCreateTree(nodeTree[index].id, nodeTree[index].children);
  });
  // 通过深度优先遍历的思路，生成父子Tree
  function deepCreateTree (id, children) {
  // 存在的话，说明该id的节点存在子节点
    if (copyNodeToChildren[id]) {
    // 将数据推进对应id节点的children中
      children.push(...copyNodeToChildren[id]);
      copyNodeToChildren[id].forEach(e => {
        deepCreateTree(e.id, e.children);
      });
    }
  }
  console.log(nodeTree, 847587)
}

generatorTree([
  {id: 1, value: 2, name: 'A', pid: 0},
  {id: 2, value: 2, name:'B', pid: 1},
  {id: 3, value: 2, name:'C', pid: 2},
  {id: 4, value: 2, name:'D', pid: 3},
  {id: 5, value: 2, name:'E', pid: 0}
  ]);

如果喜欢我的实现，可以连同下面的链接一同分享，谢谢
https://www.cnblogs.com/smallZoro/p/12695978.html

标签：const,name,顶级,pid,value,节点,父子,id
来源： https://www.cnblogs.com/smallZoro/p/12759819.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在不知道顶级节点的情况下，如何生成父子节点树