如何创建递归嵌套文件夹结构

本文揭秘了一种高效、健壮且无栈溢出风险的前端技术方案——利用 Map 与 reduce 一次遍历，将扁平化的 API 文件节点（含 id、parent、type）秒级构建成支持无限嵌套的树形结构，完美适配文件夹管理器、权限目录树等真实场景；不仅自动识别 FOLDER/STANDARD 类型、动态挂载 children、智能补全占位父节点，还兼顾万级数据性能、循环引用防护与 TypeScript 友好扩展，堪称构建层级 UI 的工业级标准实践。

本文介绍如何将扁平的 API 文件节点数组（含 id、parent 和 type）高效转换为具有无限层级嵌套的树形结构，支持 FOLDER/STANDARD 类型识别与动态 children 挂载。

本文介绍如何将扁平的 API 文件节点数组（含 `id`、`parent` 和 `type`）高效转换为具有无限层级嵌套的树形结构，支持 FOLDER/STANDARD 类型识别与动态 children 挂载。

在前端开发中，处理文件系统类数据（如资源管理器、权限目录树）时，后端常返回扁平化节点列表，每个节点通过 parent 字段指向其父级 id。要渲染为树形 UI（如可折叠文件夹），必须将其重构为嵌套结构。关键挑战在于：需支持任意深度的递归关系，且避免重复遍历或性能陷阱。

推荐使用 Array.prototype.reduce() 配合 Map 实现 O(n) 时间复杂度的一次性构建——相比多次 filter 或递归查找，该方案更高效、无栈溢出风险，且天然支持循环引用检测（可扩展）。

以下是完整实现：

function buildFolderTree(data) {
  return data.reduce(
    ({ nodes, roots }, node) => {
      // 确保当前节点存在；若为 FOLDER，则初始化 children 数组（即使暂为空）
      const normalizedNode = node.type === 'FOLDER'
        ? { ...node, children: nodes.get(node.id)?.children || [] }
        : node;

      // 将当前节点存入 Map（key: id），便于后续快速查找父节点
      nodes.set(node.id, normalizedNode);

      if (!node.parent) {
        // 无 parent 的节点为根节点
        roots.push(normalizedNode);
      } else {
        // 确保父节点存在：若 Map 中无对应 parent，则创建一个占位父节点（类型默认为 FOLDER）
        if (!nodes.has(node.parent)) {
          nodes.set(node.parent, { id: node.parent, type: 'FOLDER', children: [] });
        }
        // 将当前节点推入父节点的 children 数组
        nodes.get(node.parent).children.push(normalizedNode);
      }

      return { nodes, roots };
    },
    { nodes: new Map(), roots: [] }
  ).roots;
}

// 示例数据
const data = [
  { id: 'node_292f637b-b33d-4d3d-bc96-8afc7ee1b949', conditions: 'string', type: 'FOLDER' },
  { id: 'node_292f637b-b33d-4d3d-bc96-8afc7ee1b948', conditions: 'string', type: 'FOLDER', parent: 'node_292f637b-b33d-4d3d-bc96-8afc7ee1b949' },
  { id: 'node_292f637b-b33d-4d3d-bc96-8afc7ee1b957', conditions: 'string', type: 'STANDARD', parent: 'node_292f637b-b33d-4d3d-bc96-8afc7ee1b948' },
  { id: 'node_292f637b-b33d-4d3d-bc96-8afc7ee1b936', conditions: 'string', type: 'STANDARD' }
];

console.log(buildFolderTree(data));

✅ 输出效果：

• 根节点 node_...b949（FOLDER）包含 children 数组，内含 b948；
• b948 同样为 FOLDER，其 children 包含 b957；
• b936 无 parent，独立为根级 STANDARD 节点（无 children 字段）；
• 所有中间节点自动补全 children: []，确保树结构一致性。

⚠️ 注意事项：

• STANDARD 类型节点不会被强制赋予 children 属性（除非显式初始化），但若后续动态添加子项，建议统一初始化为 [] 以保持结构稳定；
• 若数据中存在无效 parent（如 ID 不存在且非根节点），当前逻辑会为其创建空 FOLDER 占位符——生产环境建议增加校验并抛出警告；
• 如需兼容 TypeScript，可定义 TreeNode 接口明确 children?: TreeNode[] 可选性；
• 此方案不依赖递归函数调用，规避了深层嵌套下的调用栈限制，适合万级节点场景。

该方法兼顾性能、可读性与健壮性，是构建前端文件树、组织架构图、菜单权限体系等层级数据的标准实践。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何创建递归嵌套文件夹结构》文章吧，也可关注golang学习网公众号了解相关技术文章。