js整理树状结构

给定一组散的array数组数据,每一项都包含父级的id,将array传入进这个方法,可以直接整理出来树状结构,记录下来,方便自己使用。

const formatTree=(arr)=> {
    console.log(arr);
    // 有可能存在多个最外层的父级节点,先把他们找出来
    function findParents(arr) {
      // arr为原数组
      //通过reduce方法把数组转换成对象,作为一个哈希表(说白了就是个对象)存储他们的id
      const map = arr.reduce((obj, cur) => {
        let id = cur['id']; // 获取每一项的id
        obj[id] = id;
        return obj;
      }, {});
      // 最后做一次筛选,找出最外层的父级节点数据
      return arr.filter((item) => !map[item.parentId]);
    }
    let parents = findParents(arr); // 获取最外层父级节点
    // console.log(parents);
    // 查找每个parents 对应的子孙节点,此处开始递归
    function findChildren(parents) {
      if (!parents) return;
      parents.forEach((p) => {
        arr.forEach((item) => {
          // 如果原数组arr里面的每一项中的parentId恒等于父级的某一个节点的id,则把它推进父级的children数组里面
          if (p.id === item.parentId) {
            if (!p.children) {
              p.children = [];
            }
            p.children.push(item);
          }
        });
        // 最后进行一次递归,找儿子们的儿子们
        findChildren(p.children);
      });
    }
    findChildren(parents);
    console.log(parents);
    return parents;
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值