将具有父子孙结构的平级数据转换成树形结构

将数组arr处理成下面的结构

// parentdId为0的都是一级,二级的parentId等于一级的id
  let arr = [
     {
       id: 1,
       menuName: "并列的一级(1)",
       parentId: 0,
       children: [],
     },
     {

       id: 10,
       menuName: "(1)的下一级",
       parentId: 1,
       children: [],
     },
     {

       id: 100,
       menuName: "(1)的下一级的下一级",
       parentId: 10,
       children: [],
     },
     {
       id: 2,
       menuName: "并列的一级(2)",
       parentId: 0,
       children: [],
     },
     {
       id: 20,
       menuName: "(2)的下一级",
       parentId: 2,
       children: [],
     }
  ]

  function handleTree(data, id, parentId, children) {
     let config = {
          id: id || 'id',
          parentId: parentId || 'parentId',
          childrenList: children || 'children'
        };
     console.log(data);

     var childrenListMap = {};
     var nodeIds = {};
     var tree = [];

     for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
            childrenListMap[parentId] = [];
          }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
      }
  console.log(nodeIds);  // 是一个对象  属性是menuId   属性值是menuId等于属性的对象
  console.log(childrenListMap);  // 是一个对象  属性是parentId   属性值是一个数组,里面是所有parentId等于属性的对象

     for (let d of data) {
         let parentId = d[config.parentId];
         if (nodeIds[parentId] == null) {  // 找所有的一级数组
             tree.push(d);
            }
         }

       console.log(tree);  // 所有一级数组在所的数组

      for (let t of tree) {
           adaptToChildrenList(t);
         }

      function adaptToChildrenList(o) {
          if (childrenListMap[o[config.id]] !== null) {    // 如果childrenListMap里有属性和o的menuId一样的,就把他们放在o的children数组里
              o[config.childrenList] = childrenListMap[o[config.id]];
            }
          if (o[config.childrenList]) {   // 如果o的children存在就继续循环数组里的对象然后调用adaptToChildrenList
             for (let c of o[config.childrenList]) {
                   adaptToChildrenList(c);
                 }
             }
         }
            return tree;
      }
    var treeArr = handleTree(arr, 'id')
    console.log(treeArr);  // 处理完的数组

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是来写bug的吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值