一个数组如何过滤另一个数组中的值,如下图和代码

问题

一个数组如何过滤另一个数组中的值,如下图和代码
一个数组拥有全部数据
另一个数组只拥有部分数据
拥有全部数组数组要根据拥有部分数据的数组,过滤得到新的数组

代码

拥有全部数据的数组

      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')
        }
      ]

拥有部分数据的数组

相比全部数据的数组,没有了name: 'roleCreate',

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

最终想要得到的结果

      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')
                }
              ]
            }
          ]
        },
        {
          path: '*',
          name: '404',
          component: () => import('@/views/404.vue')
        }
      ]
阅读 3.7k
2 个回答
let allRoutesSet = new Set(allRoutes)
let someRoutesSet = new Set(someRoutes)

let difference = Array.from(new Set([...allRoutesSet].filter(x => !someRoutesSet.has(x)))) // 差集,题主要的

let intersect = Array.from(new Set([...allRoutesSet].filter(x => someRoutesSet.has(x)))) // 交集

let union = Array.from(new Set([...allRoutesSet, ...someRoutesSet])); // 并集
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题