深入解析递归转化树形结构:从列表到树形的数据处理之道

在数据处理中,将列表型数据转化为树形结构是一种常见的需求。这种转化在很多场景中都非常重要,例如文件系统、组织结构等。本文将深入探讨这种转化的业务逻辑,并给出相应的解决方法。

  • 首先,我们需要分析数据的关联关系。在树形结构中,每个节点都有一个父节点和多个子节点。因此,我们需要找到一种方式来标识这种关系。通常,我们可以通过父节点的值来识别子节点。
  • 其次,我们需要将这种关联关系转化为层级结构 。这意味着我们需要递归地遍历列表中的每个元素,并根据其父节点的值来找到其子节点。

为了实现上述转化,我们可以封装一个递归函数。这个函数的基本思路是:

  1. 遍历列表中的每个元素。
  2. 对于每个元素,检查其父节点的值是否与当前元素的id相等
  3. 如果相等,那么当前元素就是我们要找的子节点,我们递归地调用函数来找到它的所有子节点。
  4. 将找到的子节点添加到当前元素的children属性中。
  5. 将当前元素添加到结果数组中。

下面是相关的代码:

js 复制代码
// 封装列表·数据转换成树形数据方法
export function transListToTreeData(list, rootValue) {
  // 传入两个参数
  const arr = []
  // 遍历列表数据
  list.forEach((item) => {
    // 找到数据关联
    // 列表数据存在如下关系:子节点的pid===父节点的id
    if (item.pid === rootValue) {
      // 递归 找到节点的子节点
      const children = transListToTreeData(list, item.id)
      // 将子节点赋给当前节点
      item.children = children
      // 存储为一个有树形结构的数组
      arr.push(item)
    }
  })
  return arr
}

在这个代码中,transListToTreeData函数是递归的核心。它接受两个参数 :一个列表和一个rootValue。列表是我们要转化 的数据,而rootValue是我们想要作为根节点 的值。函数首先创建一个空数组 来存储结果。然后,它遍历列表中的每个元素,并检查其pid属性是否与rootValue相等 。如果相等,那么这个元素就是我们要找的根节点,我们递归地调用函数 来找到它的所有子节点,并将这些子节点添加到children属性中。最后,我们将这个元素添加到结果数组中。

现在,假设我们有一个组织结构的列表数据,每个员工都有一个唯一的id和一个上级领导的id。我们可以使用递归转化树形结构的方法将这个列表数据转化为树形结构,以便更好地表示员工之间的层级关系。

js 复制代码
const list = [
  { id: 1, name: '总经理', pid: null },
  { id: 2, name: '部门经理1', pid: 1 },
  { id: 3, name: '员工1', pid: 2 },
  { id: 4, name: '员工2', pid: 2 },
  { id: 5, name: '部门经理2', pid: 1 }
]

const tree = transListToTreeData(list, null) //调用方法
console.log(tree)

输出结果可能类似于:

js 复制代码
  [{
    id: 1,
    name: '总经理',
    children: [
      {
        id: 2,
        name: '部门经理1',
        children: [
          { id: 3, name: '员工1' },
          { id: 4, name: '员工2' }
        ]
      },
      { id: 5, name: '部门经理2' }
    ]
  }]

补充:递归特点

  • 一般用来处理未知层级的数据
  • 递归要有跳出条件
  • 自身调用自身时参数不能重复
相关推荐
telllong5 小时前
C++20 Modules:从入门到真香
java·前端·c++20
叫我一声阿雷吧5 小时前
JS 入门通关手册(21):原型链:JS 继承的底层原理
开发语言·javascript·前端面试·原型链·js继承·js进阶·js面向对象
是Yu欸5 小时前
LangGraph 智能体状态管理与决策
java·javascript·数据库
计算机学姐5 小时前
基于SpringBoot的中药材店铺管理系统
java·vue.js·spring boot·后端·spring·tomcat·推荐算法
齐鲁大虾5 小时前
如何在HTML/JavaScript中禁用Ctrl+C
前端·javascript·html
qq_406176146 小时前
深入浅出 Vue 路由:从基础到进阶全解析
前端·javascript·vue.js
陈随易6 小时前
MoonBit访谈:MoonBit开发moonclaw实现“养虾”自由
前端·后端·程序员
汀沿河6 小时前
3 LangChain 1.0 中间件(Middleware)- after_model、after_agent
前端·中间件·langchain
紫金修道6 小时前
【OpenClaw】让openclaw根据需求创造自定义skill记录
前端·javascript·chrome
mengqudoh6 小时前
vue springboot mybatis实现自定义条件检索功能
vue.js·spring boot·mybatis