本文介绍如何将扁平的 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[] 可选性；
- 此方案不依赖递归函数调用，规避了深层嵌套下的调用栈限制，适合万级节点场景。
该方法兼顾性能、可读性与健壮性，是构建前端文件树、组织架构图、菜单权限体系等层级数据的标准实践。
