Node.js控制台嵌套菜单回退导航的数据结构选型咨询

嵌套数组 vs 扁平结构：短菜单的最优选择 #

对于短且简单的菜单结构，嵌套数组方案更适合实现回退导航，理由如下：

• 嵌套结构天然体现层级关系，不需要额外维护parentId，数据定义更简洁直观。
• 回退导航不需要在数据结构中查找父节点，只需要维护一个导航栈记录用户的路径即可，逻辑简单高效：

嵌套结构示例 + 导航栈实现 #

// 嵌套结构的菜单定义
const menu = [
  { id: 1, name: 'Menu - Choose food', options: [] },
  { 
    id: 2, 
    name: 'Fruit', 
    options: [
      { id: 3, name: 'Fruit Submenu: Orange', options: [] },
      { 
        id: 4, 
        name: 'Fruit Submenu: Apple', 
        options: [
          { id: 5, name: 'Apple Submenu: Gala', options: [] },
          { id: 6, name: 'Apple Submenu: Fuji', options: [] },
          { id: 7, name: 'Apple Submenu: Golden', options: [] }
        ]
      }
    ]
  },
  { 
    id: 8, 
    name: 'Vegetables', 
    options: [
      { id: 9, name: 'Vegetables Submenu: Cabbage', options: [] },
      { id: 10, name: 'Vegetables Submenu: Carrot', options: [] }
    ]
  },
  { 
    id: 11, 
    name: 'Animal products', 
    options: [
      { id: 12, name: 'AP: Honey', options: [] },
      { id: 13, name: 'AP: Milk', options: [] },
      { id: 14, name: 'AP: Eggs', options: [] }
    ]
  }
];

// 导航栈：记录当前路径的菜单层级
let navigationStack = [menu];

// 进入子菜单：比如选中id=2的"Fruit"
const enterSubmenu = (currentMenu, targetId) => {
  const selectedItem = currentMenu.find(item => item.id === targetId);
  if (selectedItem?.options.length) {
    navigationStack.push(selectedItem.options);
    // 此处可渲染新的子菜单
    console.log('当前菜单：', selectedItem.options.map(item => item.name));
  }
};

// 回退至上一级菜单
const goBack = () => {
  if (navigationStack.length > 1) {
    navigationStack.pop();
    // 渲染栈顶的菜单
    console.log('回退后菜单：', navigationStack[navigationStack.length - 1].map(item => item.name));
  } else {
    console.log('已在顶级菜单');
  }
};

// 示例操作
enterSubmenu(navigationStack[0], 2); // 进入Fruit子菜单
enterSubmenu(navigationStack[1], 4); // 进入Apple子菜单
goBack(); // 回退到Fruit菜单
goBack(); // 回退到顶级菜单

如果一定要用扁平结构，可以提前构建一个父节点映射表来优化回退效率，但对于短菜单来说，这属于额外的冗余工作：

const menu = [/* 你的扁平结构数组 */];
// 预构建父节点映射
const parentMap = new Map();
menu.forEach(item => {
  if (item.parentId !== null) {
    parentMap.set(item.id, menu.find(p => p.id === item.parentId));
  }
});
// 快速获取父节点
const parentItem = parentMap.get(5); // 获取id=5的父节点

XML方案是否大材小用？ #

是的，XML方案完全没必要。Node.js中使用DOM解析XML会引入额外的API复杂度和解析开销，你的菜单数据本身就是结构化的JS对象，直接用JS逻辑处理即可，转成XML属于画蛇添足，维护成本也更高。

更优替代方案 #

对于短菜单场景，嵌套结构+导航栈是最优解：

1. 嵌套结构保持数据的直观性，不需要额外的ID关联。
2. 导航栈通过简单的入栈/出栈操作实现回退，逻辑清晰且性能高效，完全不需要遍历数组或维护复杂的映射关系。

内容的提问来源于stack exchange，提问作者user2066480