news 2026/6/22 23:31:24

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

作者头像

张小明

前端开发工程师

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/6/22 23:13:08

雷科电力-REKE2195电缆路径及定位仪

一、概述:雷科电力-REKE2195电缆路径及定位仪是一套高性能专用地下电缆路径探测及识别仪,由信号发射机和接收机组成,可用于地下电缆及金属管线的路径探测、深度测量和管线普查,配合多种选配附件,可以进行唯一性识别&am…

作者头像 李华
网站建设 2026/6/21 10:18:44

轻量级部署方案:LobeChat在树莓派上的可行性实验

轻量级部署方案:LobeChat在树莓派上的可行性实验 在智能家居设备日益复杂的今天,确保无线连接的稳定性已成为一大设计挑战。然而,类似的边缘计算场景并不仅限于物联网控制——当大语言模型(LLM)开始渗透进日常生产力工…

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

口碑是营销出来的?格行真实用户实测:网速和售后真有那么好? “流量靠猜”“网速成迷”3 大场景实测给答案

随身WiFi市场长期被“信号不稳、流量虚标、售后缺位”三大痛点困扰,行业流量虚标率最高达67%,让消费者避坑难度陡增。近期主打“0虚量、0限速、0套路”的格行随身WiFi引发关注,我们从核心性能、实用性、售后保障等维度展开实测,还…

作者头像 李华
网站建设 2026/6/23 0:56:12

AI搜索排名GEO优化服务商行业排行榜

AI搜索排名GEO优化服务商行业排行榜随着数字化转型的加速,企业对于搜索引擎优化(SEO)的需求日益增长。特别是在地理定位优化(GEO)领域,选择合适的AI搜索排名GEO优化服务商变得尤为重要。本文将深入探讨当前…

作者头像 李华
网站建设 2026/6/23 14:24:44

AutoGPT支持Apple Silicon芯片加速了吗?M系列Mac实测

AutoGPT 在 M 系列 Mac 上的本地化智能代理实践:Apple Silicon 加速实测 在一台 MacBook Air 上,无需联网、不调用任何云 API,一个 AI 代理正安静地完成一项复杂任务:它自行搜索气候变化的科学报告,提取关键数据&#…

作者头像 李华