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

码字不易,有帮助的同学希望能关注一下我的微信公众号: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等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢!

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_46171043/article/details/113280439