js 递归实现筛选出两个(树状数组)中相同的数据

445 阅读1分钟

对比图

image.png

JSON数据(树状)

menus 请求的角色的菜单路由
const menus = [
    {
        "menuId": 39,
        "name": "营销",
        "path": "marketing",
        "children": [
            {
                "menuId": 56,
                "name": "优惠券",
                "path": "coupon",
                "children": null
            },
            {
                "menuId": 316,
                "name": "积分商城",
                "path": "integralMall",
                "children": [
                    {
                        "menuId": 320,
                        "name": "分类管理",
                        "path": "sortManagement",
                        "children": null
                    },
                    {
                        "menuId": 322,
                        "name": "兑换记录",
                        "path": "exchangeRecord",
                        "children": null
                    }
                ]
            }
        ]
    }
]
asyncRoutes 本地所有的菜单路由
const asyncRoutes = [
    {
        "title": "营销",
        "name": "marketing",
        component: {...},
        "children": [
            {
                "title": "优惠券",
                "name": "coupon",
                "component": {...},
                "children": null
            },
            {
                "title": "整点秒杀",
                "name": "seckilling",
                "component": {...},
                "children": null
            },
            {
                "title": "积分商城",
                "name": "integralMall",
                "component": {...},
                "children": [
                    {
                        "title": "分类管理",
                        "name": "sortManagement",
                        "component": {...},
                        "children": null
                    },
                    {
                        "title": "兑换记录",
                        "name": "exchangeRecord",
                        "component": {...},
                        "children": null
                    }
                ]
            }
        ]
    }
]

递归方法

// asyncRoutes 本地所有的菜单路由
// menus 请求的角色的菜单路由
const _arrRoutes = (menus, localRoutes) => {
  const list = []
  localRoutes.filter(item => menus.some(ele => {
    if (item.children && item.children.length) {
      const routeChild = _arrRoutes(ele.children ?? [], item.children ?? [])
      if (routeChild.length) item.children = routeChild
    }
    // 筛选条件
    if (item.name === ele.path) {
      list.push(item)
    }
  }))
  return list
}

调用方法

const routes = _arrRoutes(menus, asyncRoutes)
console.log(routes, '筛选后的数据')