求实现无限层级嵌套数组转扁平化数组并添加层级与URL的算法

要实现将包含无限层级child数组的对象数组转换为无嵌套的扁平化数组，并为每个元素添加level（层级）和url（父级到当前元素的title拼接路径）字段，可以通过递归或迭代两种方式实现，以下是具体方案：

方案一：递归实现（直观易读） #

递归方法逻辑简洁，适合大多数常规层级的场景：

function flattenTree(nodes, parentUrl = '', level = 1) {
  let result = [];
  for (const node of nodes) {
    // 解构移除child属性，构造包含level和url的新对象
    const { child, ...rest } = node;
    const currentUrl = parentUrl ? `${parentUrl}/${node.title}` : node.title;
    const flattenedNode = {
      ...rest,
      url: currentUrl,
      level: level
    };
    result.push(flattenedNode);
    
    // 递归处理子节点，层级+1，父路径更新为当前节点的url
    if (child?.length) {
      result = result.concat(flattenTree(child, currentUrl, level + 1));
    }
  }
  return result;
}

// 测试示例
const test = [
    {
    id: "1",
    title: "test1",
    description: "some text",
    child: [
        {
        id: "2",
        title: "test2",
        description: "some text2",
        child: [
          {
            id: "4",
            title: "test4",
            description: "some text4",
            child: [
              {
                id: "5",
                title: "test5",
                description: "some text5",
              }
            ]
          }
        ]
      }, 
      {
        id: "3",
        title: "test3",
        description: "some text3",
      }
    ]
  }
];

const order = flattenTree(test);
console.log(order);

逻辑说明 #

• 函数接收三个参数：待处理的节点数组、父级路径（默认空字符串）、当前层级（默认1）
• 遍历每个节点，生成移除child属性的新对象，拼接当前节点的url
• 若节点存在子数组，递归调用函数处理子节点，将结果合并到最终数组中

方案二：迭代实现（避免栈溢出） #

如果处理的层级极深（如上万层），递归会触发栈溢出，此时可以用栈结构实现迭代遍历：

function flattenTreeIterative(nodes) {
  const result = [];
  // 栈存储待处理节点及对应的父路径、层级
  const stack = nodes.map(node => ({ node, parentUrl: '', level: 1 }));
  
  while (stack.length) {
    const { node, parentUrl, level } = stack.pop();
    const { child, ...rest } = node;
    const currentUrl = parentUrl ? `${parentUrl}/${node.title}` : node.title;
    const flattenedNode = {
      ...rest,
      url: currentUrl,
      level: level
    };
    result.push(flattenedNode);
    
    // 子节点倒序入栈，保证处理顺序与递归一致（栈为后进先出）
    if (child?.length) {
      for (let i = child.length - 1; i >= 0; i--) {
        stack.push({
          node: child[i],
          parentUrl: currentUrl,
          level: level + 1
        });
      }
    }
  }
  
  return result;
}

// 测试
const orderIterative = flattenTreeIterative(test);
console.log(orderIterative);

逻辑说明 #

• 初始化栈，将根节点与对应的父路径、层级存入栈中
• 循环弹出栈顶元素，处理节点并添加到结果数组
• 子节点倒序入栈，确保弹出处理时的顺序和递归遍历顺序一致

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