递归函数未按预期迭代变量：多层导航结构重构遇异常

我太懂这种踩坑的感觉了！处理无限嵌套的导航结构时，递归函数的迭代逻辑很容易出问题，尤其是还要兼顾按大小排序和多列布局的需求。我来一步步帮你理清解决方案：

先把数据结构和排序逻辑理清楚 #

首先得确保你的数据结构是明确的，比如示例数据大概是这样（我补了size字段，毕竟要按大小排序嘛）：

const navItems = [
  { name: "产品中心", size: 8, sub: [{ name: "智能硬件", size: 5 }, { name: "软件服务", size: 3 }] },
  { name: "关于我们", size: 2 },
  { name: "解决方案", size: 10, sub: [{ name: "企业数字化", size: 7, sub: [{ name: "云部署方案", size: 6 }] }] }
];

这里默认你说的"按大小排序"是指每个层级的项都按size字段排序（如果你的"大小"是子项数量，逻辑完全通用）。关键是每个层级的项在递归处理前都要排序，不能只排最外层：

// 通用排序函数：按size降序，想升序就改成a.size - b.size
const sortItemsBySize = (items) => {
  return [...items].sort((a, b) => b.size - a.size);
};

修复递归函数的迭代逻辑 #

递归的核心就是「处理当前层 → 递归处理子层」，之前迭代异常大概率是这几个问题：要么没在递归前排序，要么循环变量引用错了，要么没处理空的子数组。给你一个能正常工作的递归生成HTML的示例：

function generateNestedNav(items) {
  // 先对当前层级的项排序，用扩展运算符拷贝避免修改原数组
  const sortedItems = sortItemsBySize(items);
  
  // 如果当前层没有项，直接返回空字符串，避免生成空ul
  if (!sortedItems.length) return "";

  let html = "<ul>";
  
  // 用for...of迭代排序后的项，确保每一项都被正确处理
  for (const item of sortedItems) {
    html += `<li>${item.name}`;
    // 检查是否有子项且子项不为空，再递归生成子导航
    if (item.sub && item.sub.length) {
      html += generateNestedNav(item.sub);
    }
    html += "</li>";
  }
  
  html += "</ul>";
  return html;
}

踩过的坑给你提个醒 #

我之前也犯过这些错：

• 只在最外层排序，结果子层级的项还是乱的，看起来像迭代逻辑出问题
• 用了var声明循环变量，导致递归时变量被覆盖（现在用const/let就没这问题了）
• 没判断子数组是否为空，生成了一堆空的<ul>，导致DOM结构混乱

多列布局交给CSS就好 #

生成HTML后，多列布局完全不需要在递归里处理，用CSS实现更优雅，还能保证结构和样式分离：

/* 给最外层导航设置多列 */
nav > ul {
  columns: 3; /* 改成你需要的列数 */
  column-gap: 2.5rem;
  list-style: none;
  padding: 0;
}

/* 子层级导航保持单列，避免嵌套列混乱 */
nav ul ul {
  columns: 1;
  margin-left: 1.5rem;
  margin-top: 0.5rem;
}

调试小技巧 #

如果还是有问题，就在递归函数里加个console.log，比如每次处理时打印item.name和sortedItems，看看是不是排序或迭代顺序不对；先从1-2层的简单结构测起，再逐步加嵌套层数，很快就能找到问题所在。

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