数组转树：处理扁平菜单数据技巧

本文深入解析了将后端返回的扁平化菜单数组高效转换为嵌套树形结构的核心技巧：通过两次线性遍历配合哈希映射（对象或Map），在O(n)时间复杂度内完成节点缓存、根节点识别与子节点挂载，兼顾性能与可读性；同时覆盖多级排序、层级标记、路径追踪、叶子节点判断等实用扩展，并直击真实项目中环引用、类型不一致、父子顺序错位等典型坑点，提供健壮、可落地的前端菜单处理方案。

后端返回的菜单数据通常是扁平结构的数组，每个对象带 id、parentId（或 pid）、name 等字段。要渲染侧边栏、导航栏或树形选择器，需将其转为嵌套的树形结构。核心思路是：**用 Map 或对象缓存所有节点，再遍历一次，把子节点挂到对应父节点的 children 数组下**。

识别根节点并建立映射表

先遍历一次原始数组，区分根节点（如 parentId === null、parentId === 0 或 parentId === undefined）和普通节点。同时用 JavaScript 对象（或 Map）以 id 为键缓存每个节点，方便后续快速查找父节点：

• 推荐用普通对象 {}，键为字符串化 id（如 map[item.id] = item），简单高效
• 注意检查 parentId 的实际值——有些接口用 "0" 字符串，有些用数字 0，有些用 null，需统一判断逻辑
• 给每个节点初始化空 children: []，避免后续 push 时报错

单次遍历挂载子节点

再次遍历数组，对每个节点：

• 若它是根节点（如 !item.parentId || item.parentId === '0' || item.parentId === 0），推入结果数组
• 否则，查出其父节点（map[item.parentId]），将当前节点 push 到父节点的 children 中

处理多级与排序需求

如果菜单要求按层级顺序展示（如一级菜单在前，其子菜单紧随其后），可在生成树后做一次 DFS 遍历展平并记录层级；若需前端控制展开/选中状态，建议在转换时就注入额外字段，例如：

• level: 0 表示根，每深入一层 +1
• path: ['1', '5', '12'] 记录从根到当前节点的 id 路径，便于高亮或定位
• isLeaf: !item.children?.length 标记是否为叶子节点，简化模板判断

兼容性与边界情况提醒

真实项目中常见坑点：

• 数据存在环引用（A 的 parent 是 B，B 的 parent 是 A）——转换前可加深度限制或 visited 集合检测
• 父节点在数组中出现在子节点之后——没关系，因为用的是映射表查找，不是顺序依赖
• id 或 parentId 类型不一致（字符串 vs 数字）——建议统一转为字符串比较，或使用宽松相等 ==（但需确认业务允许）
• 后端返回空数组或 null —— 转换函数开头加守卫： if (!Array.isArray(list) || list.length === 0) return []

今天关于《数组转树：处理扁平菜单数据技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！