news 2026/5/1 9:21:48

树形结构遍历与递归应用解析

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
树形结构遍历与递归应用解析

一、核心知识点概述

本案例通过递归算法实现树形结构的遍历,主要涉及以下知识点:

  1. 树形结构的递归遍历
  2. Set数据结构的去重特性
  3. 层级结果的合并逻辑
  4. 条件判断与递归终止条件

二、递归实现原理分析

举个例子
基础数据

const mockData = [{id: 1, labe: '父节点1', children: [{id:11,label:'子节点1',},{id:12,label:'子节点2',},{id:13,label:'子节点3',},],},{id: 2, labe: '父节点2', children: [{id:21,label:'子节点1',},{id:22,label:'子节点2',},{id:23,label:'子节点3',},],},{id: 3, labe: '父节点3', children: [{id: 31, label: '子节点1', children: [{id:311,label:'子节点1.1',},{id:312,label:'子节点1.2',},{id:313,label:'子节点1.3',},],},{id:32,label:'子节点2',},{id:33,label:'子节点3',},],},];
const selectKey = [1,11,12,22];

需求:根据给定选中的节点id值,自动填充其父级在节点id

1. 递归函数结构

constcollectAllParents=(nodes,checkedKeys)=>{constresult=newSet();nodes.forEach(item=>{// 基础判断:当前节点是否被选中if(checkedKeys.has(item.id))result.add(item.id);// 递归处理子节点if(item?.children?.length>0){constsubResult=collectAllParents(item.children,checkedKeys);// 合并子结果与当前节点if(subResult.size>0){result.add(item.id);// 父节点自动选中subResult.forEach(id=>result.add(id));}}});returnresult;};

2. 递归终止条件

  • 当节点无子节点(item.children.length === 0)时,递归自然终止
  • 当遍历完所有子节点后,返回当前层级的结果集

3. 递归执行流程

  1. 从根节点开始遍历
  2. 检查当前节点是否被选中
  3. 若存在子节点,递归处理子节点集合
  4. 合并子节点结果与当前节点结果
  5. 返回包含当前层级及子层级结果的集合

三、Set数据结构的作用

1. 去重特性

constcheckedKeys=newSet(selectKey);
  • 确保遍历过程中节点ID的唯一性
  • 提供O(1)时间复杂度的成员判断(has()方法)

2. 结果集的合并

subResult.forEach(id=>result.add(id));
  • 利用Set的自动去重特性合并多级结果
  • 避免手动去重的复杂性

四、层级结果合并机制

1. 父子节点关联逻辑

当子节点被选中时:

if(subResult.size>0){result.add(item.id);// 自动选中父节点// 合并子节点结果}
  • 父节点自动被标记为选中
  • 子结果集通过forEach合并到父级结果

2. 多层级数据穿透

// 从根节点到最深层子节点的递归穿透constsubResult=collectAllParents(item.children,checkedKeys);
  • 实现自底向上的结果收集
  • 确保所有父节点都被正确标记

五、条件判断逻辑

1. 当前节点选中判断

if(checkedKeys.has(item.id))result.add(item.id);
  • 直接判断当前节点是否在选中列表

2. 子节点结果判断

if(subResult.size>0){...}
  • 通过子结果集的大小判断是否存在被选中的子节点

六、 核心知识点

递归遍历每层涉及的变量值是相互独立的,在每一层收集之后进行合并整合

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/1 6:09:15

如何在消费级GPU上运行Qwen3-8B:高效低成本的大模型实践

如何在消费级GPU上运行Qwen3-8B:高效低成本的大模型实践 在AI技术飞速演进的今天,大语言模型已经不再是少数机构的专属工具。越来越多的开发者、研究者和创业者开始尝试将LLM集成到自己的产品或实验中。然而,现实却常常令人望而却步——动辄…

作者头像 李华
网站建设 2026/4/29 18:36:21

使用Docker安装Qwen3-8B镜像,快速搭建本地大模型环境

使用Docker安装Qwen3-8B镜像,快速搭建本地大模型环境 在如今AI技术飞速发展的背景下,越来越多的开发者希望能在自己的机器上运行大语言模型——不是为了炫技,而是真正用于实验、原型开发甚至产品化。但现实往往很骨感:下载模型权…

作者头像 李华
网站建设 2026/4/29 16:43:19

远程桌面方案全对比:RDP/VNC/Parsec怎么选

本文对比主流远程桌面方案的特点、性能、适用场景,帮你找到最适合的远程控制方案。前言 远程桌面需求越来越多: 在家远程办公远程协助家人访问公司电脑远程打游戏(是的,可以) 市面上远程桌面方案五花八门,到…

作者头像 李华
网站建设 2026/5/1 6:18:51

【Qt开源项目】— ModbusScope-day 5

第5天:数据处理层深入攻略(ExpressionParser与GraphDataHandler) 目标:用5-6小时掌握表达式解析、寄存器替换、数学计算的核心流程,理解原始数据如何转化为最终曲线数值。上午(3小时)&#xff1…

作者头像 李华
网站建设 2026/5/1 6:28:23

小程序会员积分系统功能开发,抽奖,大富翁等,附分员积分系统源码

积分系统小程序搭建大概会分为5个步骤:1. 需求分析、2. 系统设计、3. 开发、4. 测试、5. 部署。就这几个步骤起码需要三个人:产品经理、技术人员、测试人员。 如果是只是要搭建自己企业的积分商城,根本没必要自己搭建,因为最后拆…

作者头像 李华
网站建设 2026/5/1 8:38:00

PyTorch动态图机制如何支撑Qwen3-VL-30B的训练灵活性?

PyTorch动态图如何赋能Qwen3-VL-30B的灵活训练? 在构建下一代AI Agent的征途中,视觉语言模型(VLM)正扮演着越来越核心的角色。以Qwen3-VL-30B为代表的超大规模多模态模型,凭借其300亿参数量和强大的跨模态理解能力&…

作者头像 李华