js 字典数组递归搜索

Question

现有数组字典数组如下：

const globalRoutes = [
    {
        path: '/user',
        meta: {
            title: 'UserManager',
            icon: 'el-icon-user'
        },
        children: [{
            path: 'userinfo',
            meta: {
                title: 'UserInfo',
            }
        },
        {
            path: 'roleinfo',
            meta: {
                title: 'Roleinfo'
            }
        },
        {
            path: 'rolemenu',
            meta: {
                title: 'roleMenu'
            }
        }
        ]
    },
    {
        path: '/test',
        meta: {
            title: 'TestMenu',
            icon: 'el-icon-setting'
        }
    }
]

后台返回的用户菜单列表如下：

const menuRoutes = ['userinfo', '/test', '/user','roeleinfo]

期望返回数据:

[

    {
        path: '/user',
        meta: { title: 'UserManager', icon: 'el-icon-user' },
        children: [
            { path: 'userinfo', meta: { title: 'UserInfo' } },
            { path: 'roleinfo', meta: { title: 'Roleinfo' } },
        ]
    },
    {
        path: '/test',
        meta: { title: 'TestMenu', icon: 'el-icon-setting' }
    }
]

望大神帮忙提供下解决方法，自己写的代码递归的时候总会有多余的值。

Answer 1

贴下自己写的方法，不过现在方法出来的值不是想要的。

const globalRoutes = [
    {
        path: '/user',
        meta: {
            title: 'UserManager',
            icon: 'el-icon-user'
        },
        children: [{
            path: 'userinfo',
            meta: {
                title: 'UserInfo',
            }
        },
        {
            path: 'roleinfo',
            meta: {
                title: 'Roleinfo'
            }
        },
        {
            path: 'rolemenu',
            meta: {
                title: 'roleMenu'
            }
        }
        ]
    },
    {
        path: '/test',
        meta: {
            title: 'TestMenu',
            icon: 'el-icon-setting'
        }
    }
]


const menuRoutes = ['userinfo', '/test', '/user','roeleinfo]

function Test1(routes) {
    res = []
    for(let route of routes){
        console.log(route.path)
        const data = {}
        let menuIndex = menuRoutes.indexOf(route.path)
        if(menuIndex > -1){
            data.path = route.path
            data.meta = route.meta
        }else{
            if(route.children){
                data.path = route.path
                data.meta = route.meta
                data.children = Test1(route.children)
            }
        }
        if (Object.keys(data).length > 0){
            res.push(data)
        }

    }
    return res
}

console.log(Test1(globalRoutes))

Answer 2

很简单的啊，看代码。

function generateRouters(routers = [], paths=[]) {
  const relativePaths = [], absolutePaths = []
  paths.forEach(v => {
    if (v.startsWith('/')) {
      absolutePaths.push(v)
    } else {
      relativePaths.push(v)
    }
  })
  return routers.filter(v => {
    if (Array.isArray(v.children)) {
      v.children = v.children.filter(child => {
        return relativePaths.includes(child.path)
      })
    }
    return absolutePaths.includes(v.path)
  })
}

const globalRoutes = [
  {
      path: '/user',
      meta: {
          title: 'UserManager',
          icon: 'el-icon-user'
      },
      children: [{
          path: 'userinfo',
          meta: {
              title: 'UserInfo',
          }
      },
      {
          path: 'roleinfo',
          meta: {
              title: 'Roleinfo'
          }
      },
      {
          path: 'rolemenu',
          meta: {
              title: 'roleMenu'
          }
      }
      ]
  },
  {
      path: '/test',
      meta: {
          title: 'TestMenu',
          icon: 'el-icon-setting'
      }
  }
]

const menuRoutes = ['userinfo', '/test', '/user','roleinfo']

generateRouters(globalRoutes, menuRoutes)