news 2026/4/3 5:26:15

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

作者头像

张小明

前端开发工程师

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/3/26 1:45:43

好写作AI:让学术大脑也能玩转商业文案,效率与创意的“端水大师”

当你的论文致谢写得比商业计划书还深情,当实验数据图表比营销PPT还精美——是时候承认了,严谨的学术大脑在商业文案的创意江湖里,有时确实需要一位“翻译官”兼“外挂”。 亲爱的研究者、跨界学霸们,你是否也曾面对一个简单的产品…

作者头像 李华
网站建设 2026/3/30 13:04:40

好写作AI:论文人的“智能副驾”,带你通关从0到1的全流程

还在为论文的“从零到一”而熬夜爆肝吗?从灵光一闪的构思,到最终格式规范的成稿,每一步都像在闯关打怪。别慌,你的“智能副驾”——好写作AI已上线,专为辅助你打通论文创作的全流程。好写作AI官方网址:http…

作者头像 李华
网站建设 2026/4/3 4:30:15

好写作AI:论文人的“赛博搭档”,一键解忧,润色到底!

还在为论文从零到一的“漫长工期”和永无止境的“细节打磨”而头秃吗?在导师的“再改一版”和Deadline的“步步紧逼”之间反复横跳?别急,你的“赛博学术搭档”——好写作AI已经升级了“一键生成”与“深度润色”的双核模式,专为论…

作者头像 李华
网站建设 2026/4/2 6:40:54

LobeChat提示词模板管理系统使用指南

LobeChat提示词模板管理系统使用指南 在今天这个大语言模型(LLM)遍地开花的时代,打开一个网页就能和AI聊天早已不是新鲜事。但你有没有遇到过这样的场景:每次想让AI扮演“Python专家”写代码,都得重新输入一遍“你是一…

作者头像 李华
网站建设 2026/4/3 0:43:56

Linux服务器部署Qwen3-32B并启用GPU加速步骤

Linux服务器部署Qwen3-32B并启用GPU加速步骤 在大模型技术飞速演进的今天,越来越多企业与研究机构开始尝试将百亿参数级别的语言模型部署到自有服务器上。然而,面对 Qwen3-32B 这类拥有320亿参数的庞然大物,如何在标准Linux服务器环境中高效运…

作者头像 李华