美文网首页
js使用filter递归过滤树形结构数组

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

作者: 清清清清风 | 来源:发表于2019-06-21 18:36 被阅读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)

相关文章

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

    今天遇到了这么一个问题,一个管理系统的前端使用vue,通过路由控制用户权限。由后端返回权限编码列表,前端菜单列表需...

  • 数组的filter递归

    注意:filter() 不会对空数组进行检测 ; filter() 不会改变原始数组。 使用递归和filter获取...

  • js 数组与树形结构对象相互转换

    数组 树形结构对象 数组转成树形结构 树形结构转成数组

  • filter用法----前端分页的实现

    JS中filter函数的使用方法以及实例 filter方法用来迭代一个数组,并且按给出的条件过滤符合的元素filt...

  • AngularJS

    过滤器 自定义过滤器: filter的定义和js中的使用. 在html中使用, filter可以连续使用多个. {...

  • js缓存加快运行速度

    今天在做一个树形结构计算时使用了递归,使用js计算,树一旦比较大了,页面经常卡顿,后来调试发现问题出在递归函数上,...

  • 【JS算法】JS数据结构

    JS的数据结构就2种,数组和链表链表可以演变成:树形结构、图形结构数组可以演变成:队列、栈树形结构是前端最重要的数...

  • ES6 过滤

    1、 filter()过滤数组 filter不会改变原始数组,会返回新的数组 2、 filter()遍历数组 3、...

  • 十、二叉树(Binary Tree)

    1、树形结构 之前所讲的那些数组、链表、栈、队列等都是线性结构。 下面就是树形结构: 为什么要用到树呢?使用树形结...

  • js 树形结构数据,递归成为正常数组

网友评论

      本文标题:js使用filter递归过滤树形结构数组

      本文链接:https://www.haomeiwen.com/subject/cgyuqctx.html