JavaScript 中怎么用递归函数遍历树形菜单结构-js教程-PHP中文网

递归遍历树形菜单的核心是先处理当前节点，再对其children数组中每个子节点递归调用；典型数据为嵌套对象数组，节点含id、name及可选children字段；需用array.isarray安全判断子菜单存在性。

javascript 中怎么用递归函数遍历树形菜单结构

用递归函数遍历树形菜单结构，核心是：对每个节点，先处理自身，再对其 children 数组里的每个子节点调用同一函数。

明确树形结构的数据格式

典型菜单数据是嵌套对象数组，每个节点包含基本信息（如 id、name）和可选的 children 字段（类型为数组）：

[
  {
    id: 1,
    name: "首页",
    children: []
  },
  {
    id: 2,
    name: "产品",
    children: [
      { id: 21, name: "Web 应用", children: [] },
      {
        id: 22,
        name: "移动端",
        children: [
          { id: 221, name: "iOS", children: [] },
          { id: 222, name: "Android", children: [] }
        ]
      }
    ]
  }
]

写一个基础递归遍历函数（深度优先）

函数接收节点列表（通常是顶层菜单数组），逐个访问，遇到有子菜单的就递归调用自己：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function traverseMenu(items) {
  items.forEach(item => {
    console.log(item.name); // 处理当前节点（比如打印、收集、渲染）

    // 如果有子菜单，递归处理
    if (Array.isArray(item.children) && item.children.length > 0) {
      traverseMenu(item.children);
    }
  });
}

// 调用
traverseMenu(menuData); // 输出：首页 → 产品 → Web 应用 → 移动端 → iOS → Android

扩展：带层级信息或路径的遍历

实际开发中常需知道当前节点在第几层，或生成完整路径（如“产品 / 移动端 / iOS”）。可增加参数传递上下文：

用 level 参数记录当前深度（从 0 或 1 开始）
用 path 数组累积祖先名称，每进一层 push，回退时 pop（若需精确控制）；更简单做法是传入拼接好的字符串

function traverseWithLevel(items, level = 0, prefix = "") {
  items.forEach(item => {
    const indent = "  ".repeat(level);
    const fullPath = prefix ? `${prefix} / ${item.name}` : item.name;
    console.log(`${indent}${item.name} (level: ${level}, path: "${fullPath}")`);

    if (Array.isArray(item.children) && item.children.length > 0) {
      traverseWithLevel(item.children, level + 1, fullPath);
    }
  });
}

注意边界与健壮性

避免运行时报错，建议检查关键字段是否存在且类型正确：

始终用 Array.isArray(item.children) 判断，而不是 item.children && item.children.length（后者对 undefined 或字符串会误判）
如果数据可能含循环引用（极少见但存在），需额外加已访问标识防止栈溢出
深层嵌套可能导致调用栈溢出，前端菜单一般不会超 10 层，基本无需担心；后端处理超大结构时可改用栈模拟递归

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南