如何拼接嵌套ActiveRoute数组中所有path属性为字符串？

我明白你现在需要把嵌套多层的ActiveRoute数组里的所有节点路径拼接成完整的字符串，嵌套forEach确实容易因为路径上下文维护不当出现拼接错误或者遗漏的问题。这里给你两种简洁可靠的实现方式，不管你的路由嵌套多少层都能完美处理：

方法一：递归法（直观易读） #

递归是处理嵌套结构最自然的方式，我们可以写一个函数，每次遍历当前层级的路由，拼接出当前节点的完整路径，然后递归处理它的子路由，把所有结果收集起来：

export interface ActiveRoute {
  path: string;
  children?: ActiveRoute[];
  middleware?: string[];
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
  activeMessage?: string;
}

function buildFullPaths(routes: ActiveRoute[], parentPath = ''): string[] {
  const fullPaths: string[] = [];
  
  for (const route of routes) {
    // 拼接当前节点的完整路径：父路径 + 当前路径
    const fullPath = parentPath + route.path;
    fullPaths.push(fullPath);
    
    // 如果有子路由，递归处理并合并结果
    if (route.children && route.children.length > 0) {
      const childPaths = buildFullPaths(route.children, fullPath);
      fullPaths.push(...childPaths);
    }
  }
  
  return fullPaths;
}

// 测试你的示例数据
let prova: ActiveRoute[] = [
  { 
    path: '/Root', 
    method: 'GET', 
    children: [ 
      { 
        path: '/Son', 
        method: 'GET', 
        children: [ 
          { 
            path: '/Grandson', 
            method: 'GET', 
            children: [ 
              { path: '/Boh', method: 'GET', activeMessage: 'End' } 
            ] 
          } 
        ] 
      } 
    ], 
    middleware: ['middleware1'] 
  }
];

console.log(buildFullPaths(prova));
// 输出结果：['/Root', '/Root/Son', '/Root/Son/Grandson', '/Root/Son/Grandson/Boh']

关键逻辑说明： #

• 函数接收当前路由数组和父路径作为参数，默认父路径为空字符串（处理根路由）
• 遍历每个路由时，先拼接出当前节点的完整路径并加入结果数组
• 如果当前路由有子路由，就把当前完整路径作为父路径，递归调用函数处理子路由，再把子路由的结果合并到总数组中

方法二：迭代法（避免递归深度限制） #

如果你的路由嵌套层级极深（虽然实际场景很少见），递归可能会触发栈溢出，这时可以用迭代法，借助栈来模拟递归过程：

function buildFullPathsIterative(routes: ActiveRoute[]): string[] {
  const fullPaths: string[] = [];
  // 栈中存储的是 [当前路由, 父路径]
  const stack: [ActiveRoute, string][] = routes.map(route => [route, '']);
  
  while (stack.length > 0) {
    const [route, parentPath] = stack.pop()!;
    const fullPath = parentPath + route.path;
    fullPaths.push(fullPath);
    
    // 注意：栈是后进先出，所以要反转子路由顺序，保证遍历顺序和递归一致
    if (route.children && route.children.length > 0) {
      const reversedChildren = [...route.children].reverse();
      reversedChildren.forEach(child => stack.push([child, fullPath]));
    }
  }
  
  // 因为栈是后进先出，结果顺序会和递归相反，所以需要反转回来
  return fullPaths.reverse();
}

// 测试示例
console.log(buildFullPathsIterative(prova));
// 输出结果：['/Root', '/Root/Son', '/Root/Son/Grandson', '/Root/Son/Grandson/Boh']

关键逻辑说明： #

• 用栈存储每个待处理的路由和对应的父路径
• 每次从栈顶取出元素，拼接完整路径后加入结果数组
• 把当前路由的子路由反转后压入栈（因为栈是后进先出，反转后能保证子路由的处理顺序和递归一致）
• 最后反转结果数组，得到和递归法相同的顺序

为什么嵌套forEach容易出问题？ #

嵌套forEach需要手动在每一层维护当前的路径上下文，比如第一层遍历根路由时记录/Root，第二层遍历子路由时要手动拼接/Root/Son，但如果层级变多，这种手动维护很容易出现路径拼接错误、遗漏子路由，或者代码变得非常臃肿。而上面两种方法都能自动维护每个节点的父路径，代码更简洁也更可靠。

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