算法逻辑题

关于前端js处理扁平化数据变成tree结构    扁平化数据如下:

 const data = [{
            id: 2,
            pid: 0,
            path: '/course',
            name: 'Course',
            title: '课程管理'
        }, {
            id: 3,
            pid: 2,
            path: '/course',
            name: 'Course',
            title: '课程管理'
        }, {
            id: 4,
            pid: 3,
            path: '/course',
            name: 'Course',
            title: '课程管理'
        }, {
            id: 5,
            pid: 2,
            path: '/course',
            name: 'Course',
            title: '课程管理'
        }, {
            id: 6,
            pid: 0,
            path: '/course',
            name: 'Course',
            title: '人员管理'
        }, {
            id: 7,
            pid: 6,
            path: '/course',
            name: 'Course',
            title: '课程管理'
        }, {
            id: 8,
            pid: 6,
            path: '/course',
            name: 'Course',
            title: '课程管理'
        }]
function formatDataTree(data) {
            //拿到这个tree的所有顶级父级
            let parents = data.filter((p) => {
                    return p.pid === 0
                })
                //拿到这个tree的所有子级
            let children = data.filter((c) => {
                return c.pid !== 0
            })


            function dataToTree(parents, children) {
                //循环一下所有的顶级父级
                parents.map((p) => {
                    //循环一下所有的子级
                    children.map((c) => {
                        //如果子级的pid等于父级的id
                        if (c.pid === p.id) {
                            //判断顶级父级有没有children
                            if (p.children) {
                                //有的话就push这个子级
                                p.children.push(c)
                            } else {
                                //否则的话就给这个顶级父级添加一个children,并且把这个子级添加给children
                                p.children = [c]
                            }
                        }
                    })
                })
            }

            //处理元素之间的父子关系
            dataToTree(parents, children)
            console.log(parents);
        }

        formatDataTree(data)

使用递归来进行无限级树循环

      function dataMax(data) {
        //1.找出所有顶级父级
        let parents = data.filter((p) => {
          return p.pid === 0;
        });
        //2.找出所有子级
        let children = data.filter((c) => {
          return c.pid !== 0;
        });
        function FileToTreeData(parents, children) {
          //先循环父级一共能循环两次
          parents.map((p) => {
            //每循环一次父级循环一次全部的子级
            children.map((c,i) => {
              //如果子级的pid等于当前父级的id的话
              if (c.pid == p.id) {
                  //深拷贝一份子级数据
                  let _children = JSON.parse(JSON.stringify(children))
                  //从这份数据里把当前匹配出来的数据给删除掉
                  //原因是:删除掉以后当前这个拷贝的数据里就没有这个子级了,再进行递归操作的时候,第一个参数是当前匹配出来的子级
                  //,_children里就不会有当前这个c
                  _children.splice(i,1)
                  FileToTreeData([c],_children)
                //如果当前这个父级p有children的话就把c给push进去
                if (p.children) {
                  p.children.push(c);
                } else {
                //否则给当前父级p添加一个children把c塞进去
                  p.children = [c];
                }
              }
            });
          });
        }
        FileToTreeData(parents, children);
        return parents;
      }
      console.log(dataMax(data));

最终处理结果

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值