讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript树形结构_递归算法实战

夜辰吖_9926

夜辰吖_9926

发布时间:2025-11-20 20:37:02

|

849人浏览过

|

来源于php中文网

原创

首先给出明确答案:JavaScript通过递归可高效操作树形结构。具体描述:1. 树形节点含id、name和children;2. findNodeById函数递归查找目标节点;3. addNode函数向指定父节点添加子节点;4. removeNode函数删除指定节点并调整父级children数组。核心是逐层遍历,注意children存在性判断与边界处理。

javascript树形结构_递归算法实战

处理树形结构是前端开发中常见的需求,尤其是在组织架构、菜单系统、文件目录等场景中。JavaScript 中通过递归算法可以高效地遍历、查找、增删改节点。下面结合实战讲解如何使用递归操作树形数据。

1. 树形结构的基本格式

一个典型的树形节点包含 id、name 和 children 字段:

[
  {
    id: 1,
    name: '部门A',
    children: [
      {
        id: 2,
        name: '小组A1',
        children: [
          { id: 5, name: '员工小张', children: [] }
        ]
      }
    ]
  },
  {
    id: 3,
    name: '部门B',
    children: []
  }
]

2. 递归查找节点

根据 id 查找某个节点,适合在深层嵌套中定位目标。

function findNodeById(tree, targetId) {
  for (let node of tree) {
    if (node.id === targetId) {
      return node;
    }
    if (node.children && node.children.length > 0) {
      const found = findNodeById(node.children, targetId);
      if (found) return found;
    }
  }
  return null;
}

// 使用
const result = findNodeById(tree, 5); // 返回员工小张的节点

3. 递归添加子节点

找到指定节点后,在其 children 中追加新节点。

OC SSH Tunnel Node Recovery
OC SSH Tunnel Node Recovery

诊断并恢复通过 SSH 隧道连接的 OpenClaw 节点。用于解决配对必需错误、隧道冲突、远程端点错误以及 SSH 目标配置错误等问题。

下载

立即学习Java免费学习笔记(深入)”;

function addNode(tree, parentId, newNode) {
  for (let node of tree) {
    if (node.id === parentId) {
      node.children = node.children || [];
      node.children.push(newNode);
      return true;
    }
    if (node.children && node.children.length > 0) {
      const added = addNode(node.children, parentId, newNode);
      if (added) return true;
    }
  }
  return false;
}

// 使用:给 id=2 的节点添加子节点
addNode(tree, 2, { id: 6, name: '员工小李', children: [] });

4. 递归删除节点

删除指定 id 的节点(需处理父级 children 数组)。

function removeNode(tree, targetId) {
  for (let i = 0; i < tree.length; i++) {
    if (tree[i].id === targetId) {
      tree.splice(i, 1); // 删除当前节点
      return true;
    }
    if (tree[i].children && tree[i].children.length > 0) {
      const removed = removeNode(tree[i].children, targetId);
      if (removed) return true;
    }
  }
  return false;
}

// 使用
removeNode(tree, 6); // 删除 id=6 的节点

递归的核心在于:每次处理一层数据,对子节点调用自身函数。只要结构清晰,逻辑就容易维护。基本上就这些,不复杂但容易忽略边界判断,比如 children 不存在或为空的情况。实际项目中建议加上参数校验和异常处理。

热门AI工具

更多
SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

更多
页面置换算法
页面置换算法

页面置换算法是操作系统中用来决定在内存中哪些页面应该被换出以便为新的页面提供空间的算法。本专题为大家提供页面置换算法的相关文章,大家可以免费体验。

4636

2023.08.14

NumPy性能优化版本更新与常见报错排查
NumPy性能优化版本更新与常见报错排查

本专题整理 NumPy 性能优化、版本更新与常见报错排查相关教程,覆盖向量化计算、广播性能、内存布局、NumPy 2.0 升级、版本兼容冲突、安装导入报错、dtype 溢出、矩阵运算异常和 broadcasting 报错修复,帮助读者系统掌握 NumPy 性能调优与问题定位方法。

0

2026.09.22

Vibeknow在线使用入口合集
Vibeknow在线使用入口合集

本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程,涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作,并整理了免费版水印规则与手机端浏览器访问指南,助你快速将知识内容视频化。

20

2026.09.21

NumPy随机数文件读写与dtype数据类型
NumPy随机数文件读写与dtype数据类型

本专题整理 NumPy 随机数、文件读写与 dtype 数据类型相关教程,覆盖 Generator/random、随机数种子、正态分布采样、npy/npz/CSV/TXT 保存读取、loadtxt/savetxt、memmap、大文件处理、astype 类型转换、结构化 dtype、整数溢出和精度丢失等场景。

20

2026.09.21

NumPy矩阵运算与线性代数计算
NumPy矩阵运算与线性代数计算

本专题整理 NumPy 矩阵运算与线性代数计算相关教程,覆盖矩阵乘法、dot 与 @ 运算符、逆矩阵、行列式、特征值与特征向量、SVD、线性方程组、欧氏距离、矩阵分解和大规模矩阵性能优化等内容,帮助读者掌握 np.linalg 与矩阵计算实战。

0

2026.09.21

NumPy广播机制数学运算与统计分析
NumPy广播机制数学运算与统计分析

本专题整理 NumPy 广播机制、数组数学运算与统计分析相关教程,覆盖广播规则、维度对齐、矩阵与数组加减除法、向量化计算、均值方差、分位数、中位数、直方图和 unique 频次统计等场景,帮助读者掌握 ndarray 高效计算与统计处理方法。

0

2026.09.21

NumPy数组创建索引切片与数据选择
NumPy数组创建索引切片与数据选择

本专题整理 NumPy 数组创建、索引、切片与数据选择相关教程,覆盖 np.array、zeros/ones、多维数组形状、基础切片、花式索引、布尔索引、条件筛选、视图与副本等常用场景,帮助读者系统掌握 ndarray 数据构造与高效提取方法。

0

2026.09.21

Aionclaw智能助手介绍
Aionclaw智能助手介绍

本专题汇总了AionClaw(AI龙虾助手)的功能介绍与在线使用入口。AionClaw是杭州趣猿人工智能有限公司推出的桌面级AI智能体,能直接在电脑上读写文件、运行脚本、操作浏览器,自动交付Word、PPT、Excel等成品。

40

2026.09.20

AionClaw AI智能体与电脑自动化任务执行功能使用教程
AionClaw AI智能体与电脑自动化任务执行功能使用教程

AionClaw专题整理AI智能体与电脑自动化相关功能使用教程,涵盖安装部署、AI任务执行、Skills技能、文件处理、浏览器控制、电脑操作、持久记忆、聊天工具连接以及办公、编程和内容创作等功能,帮助用户快速掌握AionClaw的实际使用方法。

20

2026.09.20

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn