核心是用 reduce 构建 id 映射和 roots 列表：先存所有节点到 map 并初始化 children，若 parent_id 为根值则入 roots，否则挂到父节点 children 下；最终返回 roots 即树形结构。

用 reduce() 把扁平数组转成带父子结构的树形 JSON，核心在于：**按 parent_id 关联子节点，并找到顶层（parent_id 为空或为指定根值）节点作为入口**。不需要递归调用 reduce，一次遍历 + 哈希索引就能完成。

明确数据结构和根标识

扁平数组通常类似：

[ { id: 1, name: "首页", parent_id: null }, { id: 2, name: "产品", parent_id: null }, { id: 3, name: "Web端", parent_id: 2 }, { id: 4, name: "App端", parent_id: 2 }, { id: 5, name: "登录页", parent_id: 3 } ]

关键点：

• 每个项有唯一 id
• 用 parent_id 指向父节点（可能是 null、undefined 或字符串 "0"，需统一判断）
• 顶层节点的 parent_id 应视为“无父”，比如 null、0 或 ""

用 reduce 构建 id → 节点映射 + 子节点数组

分两步走：先建立所有节点的引用映射，再把每个节点挂到其父节点的 children 下。reduce 在这里用于累积一个包含两个部分的对象：map（id 到节点）和 roots（顶层节点列表）。

示例代码：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

const listToTree = (list, idKey = 'id', parentKey = 'parent_id', rootValue = null) => { return list.reduce((acc, item) => { const id = item[idKey]; const parentId = item[parentKey]; // 初始化当前节点（确保 children 数组存在） const node = { ...item, children: [] }; // 存入 map，方便后续查找父节点 acc.map[id] = node; // 如果是顶层节点，推入 roots if (parentId === rootValue || parentId == null) { acc.roots.push(node); } else { // 找到父节点，把当前节点加进它的 children const parent = acc.map[parentId]; if (parent) { parent.children.push(node); } // 若父节点还没出现（顺序不保证），暂不处理；后续总会遇到 } return acc; }, { map: {}, roots: [] }).roots; };

处理“父节点后出现”的情况（健壮性增强）

上面代码假设父节点可能在子节点之后才出现。为避免 parent.children.push 失败，可分两轮：第一轮只建 map 和 roots；第二轮再补 children。但 reduce 本身适合单次遍历，更简洁做法是——在第一次遍历时，对未就位的父节点延迟挂载：

• 遇到子节点时，若父节点不在 map 中，先记录一条“待挂载关系”（如 { parentId, childNode }）
• 最后再遍历待挂载列表，补上 children

不过实践中，只要最终执行一次 roots 返回，且后续不依赖中间状态，多数场景下直接用上面单次 reduce 就足够稳定 —— 因为 JS 对象属性访问快，即使父节点后到，只要在同次 reduce 中后续遇到它，acc.map[parentId] 就会被创建，子节点也能正确挂上。

使用与输出示例

调用：

const tree = listToTree(list);

结果（简化）：

[ { "id": 1, "name": "首页", "parent_id": null, "children": [] }, { "id": 2, "name": "产品", "parent_id": null, "children": [ { "id": 3, "name": "Web端", "parent_id": 2, "children": [ { "id": 5, "name": "登录页", "parent_id": 3, "children": [] } ] }, { "id": 4, "name": "App端", "parent_id": 2, "children": [] } ] } ]

这就是标准的递归 JSON 树结构，可直接用于 Tree 组件、菜单渲染或后端接口返回。