先上完整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对象数据，需要前端自己转化成树形结构
关系图.png
关系.png
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)
测试结果1.png
思路第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)
测试结果2.png
完毕
