递归遍历树形菜单的核心是先处理当前节点，再对其children数组中每个子节点递归调用；典型数据为嵌套对象数组，节点含id、name及可选children字段；需用Array.isArray安全判断子菜单存在性。
用递归函数遍历树形菜单结构，核心是：对每个节点，先处理自身，再对其 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”）。可增加参数传递上下文：
立即学习“Java免费学习笔记（深入）”；
- 用
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 层，基本无需担心；后端处理超大结构时可改用栈模拟递归
