用扁平数组实现多级菜单映射，通过idMap和childrenMap索引支持O(1)父子查询、O(k)祖先/后代遍历，可扩展path路径用于路由与权限控制。
用数组实现多级菜单映射，核心是把菜单结构建模为「父子关系的扁平化列表」，再通过遍历或索引快速定位任意节点的父、子、祖先、后代。不依赖树形递归或复杂对象嵌套，轻量、易维护、适合配置驱动场景。
一、用扁平数组描述多级菜单结构
每个菜单项用一个对象表示，必须包含唯一 id 和 parent_id（根节点 parent_id 为 null 或 0）：
const menuList = [
{ id: 1, name: '首页', parent_id: null },
{ id: 2, name: '产品中心', parent_id: null },
{ id: 3, name: 'Web 应用', parent_id: 2 },
{ id: 4, name: '移动应用', parent_id: 2 },
{ id: 5, name: 'iOS 版', parent_id: 4 },
{ id: 6, name: 'Android 版', parent_id: 4 },
{ id: 7, name: '关于我们', parent_id: null },
{ id: 8, name: '团队介绍', parent_id: 7 },
{ id: 9, name: '加入我们', parent_id: 7 }
];
这种结构天然支持动态增删（只需改 parent_id），也方便后端统一返回、前端缓存复用。
二、构建父子关系索引，提升查找效率
遍历一次数组，生成两个关键映射表：
- idMap：id → 菜单项对象（O(1) 查单个节点）
- childrenMap：parent_id → 子节点数组（O(1) 查所有直接子项）
代码示例：
function buildMenuIndex(list) {
const idMap = {};
const childrenMap = {};
list.forEach(item => {
idMap[item.id] = item;
const pid = item.parent_id ?? 0;
if (!childrenMap[pid]) childrenMap[pid] = [];
childrenMap[pid].push(item);
});
return { idMap, childrenMap };
}
const { idMap, childrenMap } = buildMenuIndex(menuList);
三、实战：快速查任意变量的父子关系
基于上面的索引，以下查询都不需要递归，时间复杂度均为 O(1) 或 O(k)（k 为层级深度）：
-
查父节点：直接读
idMap[item.parent_id] -
查所有直接子节点：读
childrenMap[item.id] || [] - 查所有祖先（向上链）：循环取 parent_id，查 idMap，直到 parent_id 为空
- 查所有后代（向下展开）：BFS 或 DFS 遍历 childrenMap，从目标 id 开始逐层展开
例如查 id=5（iOS 版）的完整路径：
function getAncestors(id, idMap, childrenMap) {
const path = [];
let current = idMap[id];
while (current && current.parent_id !== null) {
current = idMap[current.parent_id];
path.unshift(current);
}
return path;
}
// getAncestors(5, idMap, childrenMap)
// → [{id:2,name:'产品中心'}, {id:4,name:'移动应用'}]
四、扩展技巧：支持路径标识与权限校验
可在构建索引时预计算每个节点的 path 字符串（如 "2/4/5"），用于路由匹配或权限判断：
function buildMenuIndexWithPath(list) {
const idMap = {};
const childrenMap = {};
list.forEach(item => {
idMap[item.id] = { ...item };
});
// 第二遍补全 path 和 level
list.forEach(item => {
const parent = item.parent_id ? idMap[item.parent_id] : null;
const path = parent ? `${parent.path}/${item.id}` : String(item.id);
idMap[item.id].path = path;
idMap[item.id].level = parent ? parent.level + 1 : 0;
if (!childrenMap[item.parent_id]) childrenMap[item.parent_id] = [];
childrenMap[item.parent_id].push(idMap[item.id]);
});
return { idMap, childrenMap };
}
这样，idMap[5].path === "2/4/5"，可用于前端路由守卫（如只允许访问 path 前缀为 "2" 的菜单）、或 RBAC 权限比对。
