js算法-两种将数组数据转为树结构记录

最新推荐文章于 2024-07-19 13:54:51 发布

风清云淡_A

最新推荐文章于 2024-07-19 13:54:51 发布

阅读量324

点赞数

分类专栏：再学javascript算法之美 js原生知识案例文章标签： javascript js

本文链接：https://blog.csdn.net/qq_27702739/article/details/115149775

版权

js原生知识案例同时被 2 个专栏收录

91 篇文章 1 订阅

订阅专栏

再学javascript算法之美

25 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript将一个包含父级ID的数组转换为树形结构的数据。主要涉及两个函数：`listToTree` 和 `transTree`，它们分别通过不同的方式处理数据，构建具有层级关系的对象。`listToTree` 通过遍历和过滤操作实现，而 `transTree` 则利用映射关系快速构造树形结构。这些方法对于处理层级数据和构建前端树状组件非常有用。

摘要由CSDN通过智能技术生成

let arr = [
      ];
      /* function listToTree(oldArr) {
        oldArr.forEach((element) => {
          let parentId = element.parentId;
          if (parentId !== 0) {
            oldArr.forEach((ele) => {
              if (ele.id == parentId) {
                //当内层循环的ID== 外层循环的parendId时，（说明有children），需要往该内层id里建个children并push对应的数组；
                if (!ele.children) {
                  ele.children = [];
                }
                ele.children.push(element);
              }
            });
          }
        });
        // console.log(oldArr); //此时的数组是在原基础上补充了children;
        oldArr = oldArr.filter((ele) => ele.parentId === 0); //这一步是过滤，按树展开，将多余的数组剔除；
        // console.log(oldArr);
        return oldArr;
      }
       */
      function transTree(data) {
        let result = [];
        let map = {};
        if (!Array.isArray(data)) {
          //验证data是不是数组类型
          return [];
        }
        data.forEach((item) => {
          //建立每个数组元素id和该对象的关系
          map[item.id] = item; //这里可以理解为浅拷贝，共享引用
        });
        data.forEach((item) => {
          let parent = map[item.parentId]; //找到data中每一项item的爸爸
          if (parent) {
            //说明元素有爸爸，把元素放在爸爸的children下面
            (parent.children || (parent.children = [])).push(item);
          } else {
            //说明元素没有爸爸，是根节点，把节点push到最终结果中
            result.push(item); //item是对象的引用
          }
        });
        return result; //数组里的对象和data是共享的
      }
      console.log(transTree(arr));

参考:https://www.jianshu.com/p/bbdc8178a2dc

https://www.jb51.net/article/167897.htm