js如何实现树形数组的筛选？

Question

问题描述

给定一个这样的数组arr

    var arr=[{
            "name": "Baseinfo",
            "children": [{
                "name": "Baseinfo_School",
                "children": [{
                    "name": "Baseinfo_Test"
                }]
            }, {
                "name": "Baseinfo_Teacher"
            }]
        }]

如何从这个数组test中筛选出相同的结构

 var test = [{
                path: '/baseinfo',
                //组件名
                name: 'Baseinfo',
                component: Home,
                children: [{
                        path: '/baseinfo/school',
                        name: 'Baseinfo_School',
                        component: BaseinfoSchool,
                        children: [{
                            path: '/baseinfo/school/test',
                            name: 'Baseinfo_Test',
                            component: BaseinfoSchoolTest
                        } ]
                    },
                    {
                        path: '/baseinfo/teacher',
                        name: 'Baseinfo_Teacher',
                        component: BaseinfoTeacher,
                        children: [{
                            path: '/baseinfo/teacher/test',
                            name: 'Baseinfo_Test1',
                            component: BaseinfoTeacherTest
                        } ]
                    },
                ]
            },
            {
                path: '/others',
                name: 'Others',
                component: Others
            }
        ]

得到这样的结果result,就是去除了other项和baseinfoTeacherTest项

var result  = [{
                path: '/baseinfo',
                //组件名
                name: 'Baseinfo',
                component: Home,
                children: [{
                        path: '/baseinfo/school',
                        name: 'Baseinfo_School',
                        component: BaseinfoSchool,
                        children: [{
                            path: '/baseinfo/school/test',
                            name: 'Baseinfo_Test',
                            component: BaseinfoSchoolTest
                        } ]
                    },
                    {
                        path: '/baseinfo/teacher',
                        name: 'Baseinfo_Teacher',
                        component: BaseinfoTeacher
                    },
                ]
            }
        ]

数据结构小白，那位大佬可以写个案例吗？

Answer 1

  var arr = [
    {
      name: 'Baseinfo',
      children: [
        {
          name: 'Baseinfo_School',
          children: [
            {
              name: 'Baseinfo_Test',
            },
          ],
        },
        {
          name: 'Baseinfo_Teacher',
        },
      ],
    },
  ];

  var test = [
    {
      path: '/baseinfo',
      //组件名
      name: 'Baseinfo',
      component: 'Home',
      children: [
        {
          path: '/baseinfo/school',
          name: 'Baseinfo_School',
          component: 'BaseinfoSchool',
          children: [
            {
              path: '/baseinfo/school/test',
              name: 'Baseinfo_Test',
              component: 'BaseinfoSchoolTest',
            },
          ],
        },
        {
          path: '/baseinfo/teacher',
          name: 'Baseinfo_Teacher',
          component: 'BaseinfoTeacher',
          children: [
            {
              path: '/baseinfo/teacher/test',
              name: 'Baseinfo_Test1',
              component: 'BaseinfoTeacherTest',
            },
          ],
        },
      ],
    },
    {
      path: '/others',
      name: 'Others',
      component: 'Others',
    },
  ];

  function select(from, target, ret = []) {
    from.forEach((item, index) => {
      const name = item.name;
      const child = target[index];

      if (!child || child.name !== name) {
        return;
      }

      ret[index] = { ...child };

      delete ret[index].children;

      if (item.children && child.children) {
        const childClonedList = select(item.children, child.children);

        if (childClonedList.length) {
          ret[index].children = childClonedList;
        }
      }
    });

    return ret;
  }

  console.log(select(arr, test));