前端根据一个数组便利出部门树，菜单树，一个js便利函数即可解决

便利出部门树，菜单树，一个js便利函数即可解决"/>

前端根据一个数组便利出部门树，菜单树，一个js便利函数即可解决

部门树，菜单树其实底层都是一样的，这是后端返回的数组

let lists = [{ name: '系统管理', id: '1', pid: '0' },{ name: '系统管理二级菜单1', id: '10', pid: '1' },{ name: '系统管理二级菜单2', id: '11', pid: '1' },{ name: '系统管理二级菜单子菜单1', id: '110', pid: '11' },{ name: '系统管理二级菜单子菜单的子菜单', id: '1101', pid: '110' },{ name: '角色管理', id: '2', pid: '0' },{ name: '角色管理二级菜单', id: '20', pid: '2' },{ name: '角色管理三级菜单', id: '200', pid: '20' },{ name: '角色管理四级菜单', id: '2000', pid: '200' },{ name: '角色管理五级菜单', id: '20000', pid: '2000' },{ name: '用户管理', id: '3', pid: '0' },{ name: '用户管理二级', id: '30', pid: '3' }
]

这是我们的遍历函数

let fun = function (list, id) {let child = []; // 这是用来装子级的数组list.forEach(item => {if (item.pid == id) { // 是当前循环的菜单的子集，写入数组// 然后当前整个item可能还不是最后一集菜单，继续执行这个fun方法，找找看有没有子集child.push(item)item.child = fun(list, item.id)}})return child; // 返回当前循环最后得到的菜单集合
}

最后只需要调用这个方法，即可得到想要的部门数，适用于动态部门树，比如后台可自动添加，前端有不知道到底有多少层级，用这个函数就完美解决啦

let obg = fun(lists, "0") // 我这里的一级菜单pid都为0,所以第一次调用传0，可以根据实际情况变化
// 最后得出的结果如下
let menu = [{"name": "系统管理", "id": "1", "pid": "0", "child": [{"name": "系统管理二级菜单1", "id": "10", "pid": "1", "child": [ ]}, {"name": "系统管理二级菜单2", "id": "11", "pid": "1", "child": [{"name": "系统管理二级菜单子菜单1", "id": "110", "pid": "11", "child": [{"name": "系统管理二级菜单子菜单的子菜单", "id": "1101", "pid": "110", "child": [ ]}]}]}]}, {"name": "角色管理", "id": "2", "pid": "0", "child": [{"name": "角色管理二级菜单", "id": "20", "pid": "2", "child": [{"name": "角色管理三级菜单", "id": "200", "pid": "20", "child": [{"name": "角色管理四级菜单", "id": "2000", "pid": "200", "child": [{"name": "角色管理五级菜单", "id": "20000", "pid": "2000", "child": [ ]}]}]}]}]}, {"name": "用户管理", "id": "3", "pid": "0", "child": [{"name": "用户管理二级", "id": "30", "pid": "3", "child": [ ]}]}
]