【前端JS】List/Array数据 转 树形结构数据（适用于侧边栏菜单，多级分类等）

先上完整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

完毕