如何递归过滤一个数组，如下代码

Question

问题

1. 一个数组拥有全部数据
2. 另一个数组只拥有部分数据
3. 2个数组每层的相同字段有name,children
4. 拥有全部数组数组要根据拥有部分数据的数组，过滤得到新的数组

代码

拥有全部数据的数组

      let allRoutes = [
        {
          path: '/',
          name: 'home',
          component: () => import('@/views/Home.vue'),
          children: [
            {
              path: '/role',
              name: 'role',
              meta: {
                tile: '角色'
              },
              component: () => import('@/views/role/index.vue'),
              redirect: '/role/list',
              children: [
                {
                  path: 'create',
                  name: 'roleCreate',
                  meta: {
                    tile: '创建角色'
                  },
                  component: () => import('@/views/role/create.vue')
                },
                {
                  path: 'list',
                  name: 'roleList',
                  meta: {
                    tile: '角色列表'
                  },
                  component: () => import('@/views/role/list.vue')
                },
                {
                  path: 'update',
                  name: 'roleUpdate',
                  meta: {
                    tile: '修改角色'
                  },
                  component: () => import('@/views/role/update.vue')
                }
              ]
            },
            {
              path: '/adminUser',
              name: 'adminUser',
              meta: {
                tile: '管理员'
              },
              component: () => import('@/views/adminUser/index.vue'),
              children: [
                {
                  path: 'create',
                  name: 'adminUserCreate',
                  meta: {
                    tile: '创建管理员'
                  },
                  component: () => import('@/views/adminUser/create.vue')
                },
                {
                  path: 'list',
                  name: 'adminUserList',
                  meta: {
                    tile: '管理员列表'
                  },
                  component: () => import('@/views/adminUser/list.vue')
                },
                {
                  path: 'update',
                  name: 'adminUserUpdate',
                  meta: {
                    tile: '修改管理员'
                  },
                  component: () => import('@/views/adminUser/update.vue')
                }
              ]
            }
          ]
        },
        {
          path: '*',
          name: '404',
          component: () => import('@/views/404.vue')
        }
      ]

拥有部分数据的数组

      let someRoutes = [
        {
          name: 'home',
          children: [
            {
              name: 'role',
              children: [{ name: 'roleList' }, { name: 'roleUpdate' }]
            },
            {
              name: 'adminUser',
              children: [
                { name: 'adminUserCreate' },
                { name: 'adminUserList' },
                { name: 'adminUserUpdate' }
              ]
            }
          ]
        }
      ]

最终想要过滤得到的结果

没有name: 'roleCreate',这一层

                {
                  path: 'create',
                  name: 'roleCreate',
                  meta: {
                    tile: '创建角色'
                  },
                  component: () => import('@/views/role/create.vue')
                },

想要过滤得到的数组

      let allRoutes = [
        {
          path: '/',
          name: 'home',
          component: () => import('@/views/Home.vue'),
          children: [
            {
              path: '/role',
              name: 'role',
              meta: {
                tile: '角色'
              },
              component: () => import('@/views/role/index.vue'),
              redirect: '/role/list',
              children: [
                {
                  path: 'list',
                  name: 'roleList',
                  meta: {
                    tile: '角色列表'
                  },
                  component: () => import('@/views/role/list.vue')
                },
                {
                  path: 'update',
                  name: 'roleUpdate',
                  meta: {
                    tile: '修改角色'
                  },
                  component: () => import('@/views/role/update.vue')
                }
              ]
            },
            {
              path: '/adminUser',
              name: 'adminUser',
              meta: {
                tile: '管理员'
              },
              component: () => import('@/views/adminUser/index.vue'),
              children: [
                {
                  path: 'create',
                  name: 'adminUserCreate',
                  meta: {
                    tile: '创建管理员'
                  },
                  component: () => import('@/views/adminUser/create.vue')
                },
                {
                  path: 'list',
                  name: 'adminUserList',
                  meta: {
                    tile: '管理员列表'
                  },
                  component: () => import('@/views/adminUser/list.vue')
                },
                {
                  path: 'update',
                  name: 'adminUserUpdate',
                  meta: {
                    tile: '修改管理员'
                  },
                  component: () => import('@/views/adminUser/update.vue')
                }
              ]
            }
          ]
        }
      ]

Answer 1

function doFilter(target, filter) {
    return filter.map(e => {
        var mapped = target.find(i => i.name === e.name)
        if(e.children && mapped.children) {
            mapped.children = doFilter(mapped.children, e.children)
        }
        return mapped
    })
}
var result = doFilter(allRoutes, someRoutes)
console.log(result)

这个实现有点缺陷,执行完之后allRoutes也会跟着发生变化，要避免这个副作用的话可以这么写

function doFilter(target, filter) {
    return filter.map(e => {
        var mapped = Object.assign({}, target.find(i => i.name === e.name))
        if(e.children && mapped.children) {
            mapped.children = doFilter(mapped.children, e.children)
        }
        return mapped
    })
}