如何遍历树形结构数组并等待结果？未知嵌套层级解决方案

问题背景 #

有一个嵌套层级不确定的树形结构数组，每个节点包含childs字段存储子节点。当前用硬编码多层for循环的方式，没法覆盖所有层级，得实现能遍历所有节点并收集结果的方案。

给定数组结构示例：

const arr = [
  {
    "id": 1,
    "name": "父节点1",
    "url": "/parent1",
    "childs": [
      {
        "id": 2,
        "parent": 1,
        "name": "子节点1-1",
        "url": "/parent1/child1",
        "childs": [{}] // 支持更深层级嵌套
      },
      {
        "id": 3,
        "parent": 1,
        "name": "子节点1-2",
        "url": "/parent1/child2"
      }
    ]
  }
];

现有硬编码多层循环的问题：只能处理固定层级，遇到更深的嵌套会直接遗漏节点，完全适配不了未知深度的结构。

解决方案 #

方法1：递归遍历（简洁直观） #

用函数递归调用自身，处理每个节点的子节点，直到没有childs为止。同步收集所有节点数据，天然支持等待遍历完成。

function traverseTree(nodes, result = []) {
  // 遍历当前层级所有节点
  for (const node of nodes) {
    // 收集当前节点的目标数据（按需调整字段）
    result.push({
      category_name: node.name,
      category_url: node.url,
      // 需要其他字段可在此添加，比如node.shard、node.query等
    });
    
    // 有子节点就递归遍历
    if (node.childs && Array.isArray(node.childs)) {
      traverseTree(node.childs, result);
    }
  }
  return result;
}

// 使用示例
const categories = traverseTree(arr);
console.log(categories); // 所有节点的收集结果

方法2：迭代遍历（避免递归栈溢出） #

如果树形结构极深，递归可能触发栈溢出，这时可以用迭代法（栈/队列）模拟递归过程，同样能遍历所有节点。

function traverseTreeIterative(nodes) {
  const result = [];
  // 用栈存储待遍历节点，初始传入顶层节点数组
  const stack = [...nodes];
  
  while (stack.length > 0) {
    const node = stack.pop(); // 栈是后进先出，用shift()可实现队列的先进先出
    
    // 收集当前节点数据
    result.push({
      category_name: node.name,
      category_url: node.url,
    });
    
    // 有子节点就加入栈（倒序加入能保持和递归一致的遍历顺序）
    if (node.childs && Array.isArray(node.childs)) {
      stack.push(...[...node.childs].reverse());
    }
  }
  
  return result;
}

// 使用示例
const categories = traverseTreeIterative(arr);
console.log(categories);

关键说明 #

• 两种方法都能处理任意层级的嵌套结构，不用修改代码适配层级变化
• 收集数据的逻辑可按需调整：比如只收集叶子节点（判断!node.childs时再push），或者收集所有节点
• 同步遍历会自动等待所有节点处理完成，返回的结果就是完整的遍历结果

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