前端面试题之---树形数据结构化

170 篇文章 3 订阅

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。

话不多说,直接上题。

const data = [
    {
        id:2,
        pid:0,
        path:'/course',
        name:'Course',
        title:'课程管理'
    },
    {
        id:3,
        name:'CourseOperate',
        path:'operate',
        link:'/course/operate',
        pid:2,
        title:'课程操作'
    },
    {
        id:4,
        name:'CourseInfoData',
        path:'info_data',
        link:'/course/operate/info_data',
        pid:3,
        title:'课程数据'
    },
    {
        id:5,
        name:'CourseAdd',
        path:'add',
        link:'/course/add',
        pid:2,
        title:'增加课程'
    },
    {
        id:6,
        pid:0,
        path:'/student',
        name:'Student',
        title:'学生管理'
    },
    {
        id:7,
        name:'StudentOperate',
        path:'operate',
        link:'/student/operate',
        pid:6,
        title:'学生操作'
    },
    {
        id:8,
        name:'StudentAdd',
        path:'add',
        link:'/student/add',
        pid:6,
        title:'增加学生'
    }
];

把这组数据,整理成树形结构。
pid对应id。
比如:第一组数据它的pid为0,那么它就是最顶层元素,第二组数据的pid为2,那么它就对应在id为2的数据下面。
最后要通过代码整理成下面这样的数据。
在这里插入图片描述
解决方法有很多,最简单的应该是使用递归。
我的答案如下:

function formDataTree(data){
    let parents = data.filter(p => p.pid === 0),
        children = data.filter(c => c.pid !== 0);
    console.log(parents,children);

    dataToTree(parents,children);

    return parents;

}
function dataToTree(parents,children){
    parents.map(p => {
        children.map((c,i) => {
            if(c.pid == p.id){
                let _children = JSON.parse(JSON.stringify(children)); 
                _children.splice(i,1);
                dataToTree([c],_children)
                if(p.children){
                    p.children.push(c);
                }else{
                    p.children = [c];
                }
            }
        })
    })
}

在这里插入图片描述
更多关于前端的面试题内容关注我的公众号Code程序人生


有微信小程序课设、毕设需求联系个人QQ:505417246

关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢!

在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

CreatorRay

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

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

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

打赏作者

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

抵扣说明:

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

余额充值