本文介绍一种通用、递归的 javascript 方法，将含层级路径（如分类数组）的扁平数据高效转换为嵌套树结构，支持任意深度的父子关系与叶节点（如文档）插入。
本文介绍一种通用、递归的 javascript 方法，将含层级路径（如分类数组）的扁平数据高效转换为嵌套树结构，支持任意深度的父子关系与叶节点（如文档）插入。
在实际开发中（如文档管理系统、分类导航菜单或知识图谱构建），我们常遇到将扁平化的带路径字段（如 category: ["Test", "Test 2", "Test 3"]）的数据转换为树形结构的需求。核心挑战在于：既要正确还原多级目录嵌套，又要精准将终端内容（如 "Document 1"）挂载到最深层节点，而非错误地作为中间层级标签。
以下是一个简洁、健壮且可扩展的递归实现：
function buildTree(data) {
const root = { label: 'root', children: [] };
function insert(node, path, value) {
if (path.length === 0) {
// 到达路径终点：插入叶节点（如文档）
node.children.push({ label: value });
return;
}
const [currentLabel, ...restPath] = path;
let childNode = node.children.find(child => child.label === currentLabel);
// 若该层级节点不存在，则创建并加入 children
if (!childNode) {
childNode = { label: currentLabel, children: [] };
node.children.push(childNode);
}
// 递归处理下一级路径
insert(childNode, restPath, value);
}
// 遍历每条数据，按 category 路径插入
data.forEach(item => {
const path = item.category || [];
const value = Array.isArray(item.otherFields) && item.otherFields.length > 0
? item.otherFields[0]
: String(item.otherFields);
insert(root, path, value);
});
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));✅ 关键设计说明：
- 使用虚拟 root 节点统一入口，避免空数组或首层重复判断；最终返回 root.children 即真实树根；
- insert 函数严格区分路径节点（中间目录）与叶节点（otherFields[0] 内容），仅当 path.length === 0 时才插入文档；
- 利用 Array.find() 定位已有同名子节点，确保相同路径段复用而非重复创建；
- 支持任意深度嵌套（测试中 Test 11 层级可完美展开），时间复杂度为 O(N × D)，其中 N 是数据条目数，D 是平均路径长度。
⚠️ 注意事项：
- 若 category 字段可能为 null 或非数组类型，建议在 insert 前增加校验（如 Array.isArray(path)）；
- 当 otherFields 为空或 undefined 时，需提供默认值（如 'Untitled'），避免插入 undefined；
- 如需支持多文档（otherFields 含多个值），可将 node.children.push({ label: value }) 替换为 node.children.push(...item.otherFields.map(v => ({ label: v })))；
- 若需保留原始对象元数据（如 ID、时间戳），可在叶节点中扩展字段：{ label: value, ...item }。
该方案轻量、无依赖、逻辑清晰，适用于前端组件树渲染（如 Ant Design Tree、Element Plus Cascader）或后端 API 数据预处理场景。
