本文介绍一种简洁高效的递归方法，将包含多级分类路径的扁平对象数组（如文档分类数据）构建成符合层级语义的嵌套树结构，支持任意深度嵌套与同级去重，并正确挂载终端节点（如文档）。
本文介绍一种简洁高效的递归方法，将包含多级分类路径的扁平对象数组（如文档分类数据）构建成符合层级语义的嵌套树结构，支持任意深度嵌套与同级去重，并正确挂载终端节点（如文档）。
在前端开发中，常需将后端返回的扁平化分类数据（如 category: ["Test", "Test 2", "Test 3"]）动态渲染为树形菜单、导航侧边栏或可折叠分类面板。这类场景的核心挑战在于：既要按路径逐层创建节点，又要避免重复创建同名中间节点，同时确保终端内容（如 "Document 1"）准确挂载到最深层而非作为独立兄弟节点。
以下是一个经过验证的通用解决方案，基于纯 JavaScript 实现，无需依赖第三方库：
function buildTree(flatData) {
const root = { label: 'root', children: [] };
function insert(node, path, value) {
if (path.length === 0) {
// 到达路径终点：添加终端节点（如文档）
node.children.push({ label: value });
return;
}
const [currentLabel, ...remainingPath] = path;
let childNode = node.children.find(child => child.label === currentLabel);
// 若当前层级节点不存在，则创建并加入 children
if (!childNode) {
childNode = { label: currentLabel, children: [] };
node.children.push(childNode);
}
// 递归处理下一级路径
insert(childNode, remainingPath, value);
}
// 遍历每条原始记录，插入树中
flatData.forEach(item => {
const categoryPath = Array.isArray(item.category) ? item.category : [];
const documentLabel = Array.isArray(item.otherFields) && item.otherFields.length > 0
? item.otherFields[0]
: 'Untitled';
insert(root, categoryPath, documentLabel);
});
return root.children; // 返回实际根节点列表（不含虚拟 'root'）
}
// 使用示例
const data = [
{ category: ["Kat1"], otherFields: ["Document 1"] },
{ category: ["Kat1"], otherFields: ["Document 2"] },
{ category: ["Test", "Test 2"], otherFields: ["Document 1"] },
{
category: ["Test", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6", "Test 7", "Test 8", "Test 9", "Test 10", "Test 11"],
otherFields: ["Document 1"]
}
];
const tree = buildTree(data);
console.log(JSON.stringify(tree, null, 2));
✅ 关键设计说明：
- 路径驱动构建：以 category 数组作为层级路径，每项代表一个树节点标签；
- 自动去重合并：通过 find() 检查同名节点是否存在，确保相同路径前缀只生成一个中间节点；
- 终端精准挂载：当 path.length === 0 时才插入文档节点，杜绝“文档”出现在非叶节点；
- 健壮性处理：对 category 和 otherFields 做了空值/类型校验，提升生产环境兼容性。
⚠️ 注意事项：
- 该算法时间复杂度为 O(n × d)（n 为数据量，d 为平均路径深度），适用于千级以内数据；超大规模建议结合 Map 加速查找；
- 若需支持节点元信息（如 id、type、count 等），可在 insert 中扩展参数并注入节点对象；
- 输出结构遵循标准树形规范（含 label 与 children 字段），可直接用于 Ant Design、Element Plus 或自定义 Vue/React 树组件。
此方法已成功应用于多个文档管理系统与知识库前端，逻辑清晰、易于调试与扩展，是处理多级分类扁平数据的可靠范式。
