js使用filter递归过滤树形结构数组

男娘i 2022-11-12 08:16 102阅读 0赞

今天遇到了这么一个问题，一个管理系统的前端使用vue，通过路由控制用户权限。由后端返回权限编码列表，前端菜单列表需要对这些权限编码进行过滤。菜单是树形结构，如果父级菜单被过滤，则该父级下所有子级菜单也被过滤。由于是树形结构，肯定要用到递归，大致代码如下：

// 菜单列表
    const menuList = [{
        name: '系统管理',
        code: 'system_manage',
        children: [{
            name: '用户管理',
            code: 'user_manage',
            children: [{
                name: '添加用户',
                code: 'add_user'
            }, {
                name: '编辑用户',
                code: 'edit_user'
            }, {
                name: '删除用户',
                code: 'del_user'
            }]
        }, {
            name: '角色管理',
            code: 'role_manage',
            children: [{
                name: '添加角色',
                code: 'add_role'
            }]
        }]
    }, {
        name: '业务管理',
        code: 'bus_manage',
        children: [{
            name: '流程管理',
            code: 'process_manage'
        }]
    }, {
        name: '订单管理',
        code: 'order_manage'
    }]
    
    // 权限列表
    const myMenuCode = ['system_manage', 'user_manage', 'add_user', 'order_manage']
    
    const filterMenu = (menuList, menuCode) => {
        return menuList.filter(item => {
            return menuCode.indexOf(item.code) > -1
        }).map(item => {
            item = Object.assign({}, item)
            if (item.children) {
                item.children = filterMenu(item.children, menuCode)
            }
            return item
        })
    }
    
    // 过滤后的菜单
    const myMenu = filterMenu(menuList, myMenuCode)
    
    console.log(myMenu)