先上完整js代码供复制,再一步步分析思路,让你能明白怎么样思考才能对付这种递归类的算法处理
首先说明,函数命名很重要,因为某种程度上,命名的好坏能够决定你第一眼看到这个函数,能否想象或理解出它的大致实现思路。之前看网上一些写法,就是因为他们命名的问题,半天没理解这个思路,为什么可以这么做?他是怎么想到的。所以自己整理了此篇文章。并规范了函数命名
通常有两种叫法menu和submenus,parent和children,逻辑都一样,两种叫法都贴出来,复制后稍加修改即可
// 模拟数据
var menuList= [
{ 'id': '1', 'name': '动物', 'pid': '0' },
{ 'id': '2', 'name': '鸟类动物', 'pid': '1' },
{ 'id': '3', 'name': '鱼类动物', 'pid': '1' },
{ 'id': '4', 'name': '爬行类动物', 'pid': '1' },
{ 'id': '5', 'name': '杜鹃鸟', 'pid': '2' },
{ 'id': '6', 'name': '喜鹊', 'pid': '2' },
{ 'id': '7', 'name': '鲨鱼', 'pid': '3' },
{ 'id': '8', 'name': '比目鱼', 'pid': '3' },
{ 'id': '9', 'name': '鲸鱼', 'pid': '3' },
{ 'id': '10', 'name': '蜥蜴', 'pid': '4' }
]
/**
* 封装完善子级菜单的方法
* @param {obj} menu 父级菜单对象
* @param {obj} menuList 菜单数据(list或array)
*/
function completeSubmenus(menu, menuList) {
const submenus = []
// 1.筛选出符合条件的子菜单
for (const item of menuList) {
if (item.pid === menu.id) {
submenus.push(item)
}
}
// 2.如果子菜单存在,则封装属性
if (submenus.length > 0) {
// 递归封装子菜单中的子子菜单
for (const submenu of submenus) {
completeSubmenus(submenu, menuList)
}
menu.submenus = submenus
}
// 3.返回封装后的menu对象
return menu
}
// 测试代码
const topMenu = { 'id': '1', 'name': '动物', 'pid': '0' }
completeSubmenus(topMenu, menuList)
console.log(topMenu)
// 模拟数据
var moduleList = [
{ 'id': '1', 'name': '动物', 'pid': '0' },
{ 'id': '2', 'name': '鸟类动物', 'pid': '1' },
{ 'id': '3', 'name': '鱼类动物', 'pid': '1' },
{ 'id': '4', 'name': '爬行类动物', 'pid': '1' },
{ 'id': '5', 'name': '杜鹃鸟', 'pid': '2' },
{ 'id': '6', 'name': '喜鹊', 'pid': '2' },
{ 'id': '7', 'name': '鲨鱼', 'pid': '3' },
{ 'id': '8', 'name': '比目鱼', 'pid': '3' },
{ 'id': '9', 'name': '鲸鱼', 'pid': '3' },
{ 'id': '10', 'name': '蜥蜴', 'pid': '4' }
]
/**
* 封装完善子级分类的方法
* @param {obj} parentObj 父级分类对象
* @param {obj} moduleList 分类模块数据(list或array)
*/
function completeChildren(parentObj, moduleList) {
const children = []
// 1.筛选出符合条件的子分类
for (const item of moduleList) {
if (item.pid === parentObj.id) {
children.push(item)
}
}
// 2.如果子分类存在,则封装属性
if (children.length > 0) {
// 递归封装子分类中的子子分类
for (const item of children) {
completeChildren(item, moduleList)
}
parentObj.children = children
}
// 3.返回封装后的parentObj对象
return parentObj
}
// 测试代码
const parentObj = { 'id': '1', 'name': '动物', 'pid': '0' }
completeChildren(parentObj, moduleList)
console.log(parentObj)
分析
1.list转树形结构需求简介
list转树形结构是一种前端很常见的需求
比如角色管理的权限层级树,比如侧边导航栏的动态多级菜单等等,这种需求实在是太常见了
以角色管理的权限层级树为例,通常我们数据库设计这种有层级关系的数据结构,往往是有个子父级关系字段在里面
比如code与parent_code,id与pid等等,用来表示他们的父级归属关系
但是后端写的方法,往往返回给前端的就是这一堆的list对象数据,需要前端自己转化成树形结构
2.原理分析
那么怎么转,怎么入手?
是个开发,都他娘的知道肯定要用上循环遍历或者递归调用之类的东西,但是说清楚这递归组装的思路,多少还是有些难度的
我们一步步入手:
先定义一个list数据
// 定义一个list数据
var menuList = [
{ 'id': '1', 'name': '动物', 'pid': '0' },
{ 'id': '2', 'name': '鸟类动物', 'pid': '1' },
{ 'id': '3', 'name': '鱼类动物', 'pid': '1' },
{ 'id': '4', 'name': '爬行类动物', 'pid': '1' },
{ 'id': '5', 'name': '杜鹃鸟', 'pid': '2' },
{ 'id': '6', 'name': '喜鹊', 'pid': '2' },
{ 'id': '7', 'name': '鲨鱼', 'pid': '3' },
{ 'id': '8', 'name': '比目鱼', 'pid': '3' },
{ 'id': '9', 'name': '鲸鱼', 'pid': '3' },
{ 'id': '10', 'name': '蜥蜴', 'pid': '4' }
]
思路第1步
:如果要写个函数,封装顶级菜单层下的第一层子菜单,实现是不是很简单:把顶级菜单对象和list数据一起传入函数,遍历list,如果pid与顶级菜单id相等,就放入
function completeSubmenus(menu, menuList) {
const submenus = []
// 1.筛选出符合条件的子菜单
for (const item of menuList) {
if (item.pid === menu.id) {
submenus.push(item)
}
}
// 2.如果子菜单存在,则封装属性
if (submenus.length > 0) {
menu.submenus = submenus
}
// 3.返回封装后的menu对象
return menu
}
const topMenu = { 'id': '1', 'name': '动物', 'pid': '0' }
completeSubmenus(topMenu, menuList)
console.log(topMenu)
思路第2步
:一级子菜单既然能用该函数封装完成,那么遍历这些一级子菜单,调用相同的方法,是不是也能将这些子菜单的子子菜单一一封装完毕呢?答案是肯定的
我们稍微改下代码,加个递归
即可
function completeSubmenus(menu, menuList) {
const submenus = []
// 1.筛选出符合条件的子菜单
for (const item of menuList) {
if (item.pid === menu.id) {
submenus.push(item)
}
}
// 2.如果子菜单存在,则封装属性
if (submenus.length > 0) {
// 递归封装子菜单中的子子菜单
for (const submenu of submenus) {
completeSubmenus(submenu, menuList)
}
menu.submenus = submenus
}
// 3.返回封装后的menu对象
return menu
}
const topMenu = { 'id': '1', 'name': '动物', 'pid': '0' }
completeSubmenus(topMenu, menuList)
console.log(topMenu)
完毕