JavaScript将扁平数据转树形结构的核心是用Map建立id映射实现O(1)查找，遍历两次：首次初始化节点并设children=[]，第二次根据parentId挂载子节点或归入roots；需明确定义id、parentId字段及根节点判定条件（如parentId==null），最后可选清理空children。
JavaScript 处理接口返回的扁平化数据转树形结构，核心是通过 id 和 parentId（或类似字段）建立父子关系，再用一次遍历完成构建。关键在于避免嵌套循环、正确处理根节点（如 parentId === null 或 0 或 undefined），并确保引用关系准确。
确认扁平数据的结构特征
典型扁平数据长这样：
[
{ id: 1, name: "首页", parentId: null },
{ id: 2, name: "产品", parentId: null },
{ id: 3, name: "Web端", parentId: 2 },
{ id: 4, name: "App端", parentId: 2 },
{ id: 5, name: "登录页", parentId: 3 }
]
你需要明确：
- 标识唯一节点的字段名（通常是
id） - 指向父节点的字段名（常见为
parentId、parent_id、pId等） - 根节点的判定条件（如
parentId === null、parentId === 0、!parentId—— 注意0是 falsy，慎用）
用 Map 一次性建立 id → 节点映射
先遍历原始数组，把每个节点存进 Map，以 id 为键。这步让后续查找父节点变成 O(1) 操作，效率远高于每次 find()。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const map = new Map();
data.forEach(item => map.set(item.id, { ...item, children: [] }));
注意：这里给每个节点初始化了 children: []，后续直接往里 push 子节点，不污染原数据。
遍历并挂载子节点
再次遍历原始数据，对每个节点：
- 从
Map中取出当前节点（curr） - 如果它有父节点（
parentId存在且不为空），就从Map中取出父节点（parent），再把curr推入parent.children - 否则，说明它是根节点，推入最终的
roots数组
const roots = [];
data.forEach(item => {
const curr = map.get(item.id);
const parentId = item.parentId;
if (parentId == null) {
roots.push(curr);
} else {
const parent = map.get(parentId);
if (parent) parent.children.push(curr);
}
});
⚠️ 注意：parentId == null 用双等（兼容 null 和 undefined），但若 0 是合法父 ID，必须写成 parentId === null || parentId === undefined 或更稳妥的 map.has(parentId) 判断。
返回结果并可选递归清理空 children
最终 roots 就是树形结构的根节点数组。如需移除没有子节点的 children: []，可加个简单递归清理：
function cleanEmptyChildren(node) {
if (Array.isArray(node.children) && node.children.length === 0) {
delete node.children;
} else {
node.children?.forEach(cleanEmptyChildren);
}
}
roots.forEach(cleanEmptyChildren);
这一步非必需，取决于后端或 UI 组件是否要求严格精简字段。
