1. 引言与目标
1.1 为什么需要将树形数据扁平化
在前端开发中，树形数据常用于菜单、分类、组织结构等场景。把树形结构转换为扁平化的数组，可以让数据的检索、筛选、排序和权限控制更加高效。本文聚焦于 JavaScript树形结构转换技巧，提供高效将树形数据扁平化为数组的实战指南，帮助你在实际项目中快速落地。通过扁平化，我们也能更容易地进行数据绑定和渲染。性能与可维护性是设计的重点。
此外，扁平化的结果通常包含层级信息，如 level、path、parentId 等，便于 UI 层进行分组和导航。正确的设计还能避免重复遍历与重复构造，提高整体应用的响应速度。本文将从递归、迭代、数据结构设计等维度展开，提供可直接落地的实现方案。
1.2 目标数据结构与输出格式
典型的树节点包含 id、name 与 children 属性：{ id, name, children }。扁平化的目标是得到一个数组，每个元素保留原有字段，并附加 parentId、level、以及可选的 path 等字段，使后续的筛选、排序和重建树更加高效。
一个简单的扁平化输出示例可以是：{ id, name, parentId, level, path } 的集合。这样既能保持节点的唯一性，又能在无需递归整个树的情况下快速定位父子关系。下面的代码示例将演示如何实现这种输出格式。
// 示例输入结构
const tree = [{ id: 1, name: 'A', children: [{ id: 2, name: 'B', children: [{ id: 3, name: 'C' }]},{ id: 4, name: 'D' }]},{ id: 5, name: 'E' }
];// 递归实现的输出结构
// [{ id, name, parentId, level, path }, ...]
2. 树形结构的扁平化思路
2.1 递归法（深度优先遍历 DFS）
递归法是最直观的实现方式，代码可读性强，适合中小型树。核心思想是在遍历时依次访问节点、记录层级信息，并将当前节点推入结果数组中。优点是简洁易懂，缺点是对于极深的树，可能出现调用栈溢出的风险，需要根据实际数据量评估。
在实现中，通常会维护一个结果数组和一个辅助的 dfs 函数。每访问一个节点，就将其扁平化信息推入结果，并递归地处理其 children
function flattenTreeRecursive(nodes) {const result = [];const dfs = (list, parentId, level, path) => {for (const node of list) {const { id, name, children } = node;const currentPath = path ? `${path}/${id}` : String(id);result.push({ id, name, parentId, level, path: currentPath });if (children?.length) dfs(children, id, level + 1, currentPath);}};dfs(nodes, null, 0, '');return result;
}
2.2 迭代法（使用显式栈，避免调用栈限制）
对于大树或对调用栈深度有严格限制的场景，迭代法通过显式栈来模拟 DFS，避免了递归带来的风险。实现要点是：用栈存放待处理的节点及其上下文信息，出栈时将节点信息写入结果，并把子节点按正确的顺序推入栈中。
迭代法的核心在于控制节点的顺序，确保输出顺序与递归版本一致，同时为每个节点注入正确的 parentId、level、path 信息。
function flattenTreeIterative(nodes) {const result = [];const stack = nodes.map(n => ({ node: n, parentId: null, level: 0, path: '' }));while (stack.length) {const { node, parentId, level, path } = stack.pop();const { id, name, children } = node;const currentPath = path ? `${path}/${id}` : String(id);result.push({ id, name, parentId, level, path: currentPath });if (children?.length) {// 倒序入栈，保证输出顺序与递归一致for (let i = children.length - 1; i >= 0; i--) {stack.push({ node: children[i], parentId: id, level: level + 1, path: currentPath });}}}return result;
}
2.3 如何保留层级信息（level、path 的设计要点）
层级信息用于快速定位和渲染有层次结构的 UI，例如菜单高亮、树形导航等。level 表示深度，path 可以直观地反映从根到当前节点的路径。设计时应考虑以下要点：唯一性、可读性、以及在变更树结构时对比和更新的成本。
为确保可维护性，建议在扁平化输出中统一字段命名，例如：id、name、parentId、level、path，并在文档中明确字段含义。若需要更轻量的输出，可以省略 path，仅保留 level 与 parentId。下面给出一个仅包含部分信息的快速示例。
// 仅输出基础字段
function flattenLite(nodes) {const res = [];function dfs(list, parentId, level) {for (const n of list) {res.push({ id: n.id, name: n.name, parentId, level });if (n.children?.length) dfs(n.children, n.id, level + 1);}}dfs(nodes, null, 0);return res;
}
3. 常见数据结构与兼容性
3.1 节点属性设计（id、parentId、level、children）
在设计树形数据的节点结构时，id 应唯一、稳定，parentId 用于快速定位父节点，level 方便渲染时布局，children 则是原始树形关系的直接载体。保持这些字段的一致性，有助于后续的批量处理和数据同步。
如果原始数据中没有 parentId，你可以在扁平化阶段自动填充；若需要双向导航，可以在扁平化结果中再构造一个 children 的引用表，以快速重建树。
3.2 处理空节点与循环引用的策略
在实际数据中，可能会遇到空节点、缺失子节点、或意外的循环引用。实现应具备防御性编程能力，例如在遍历时进行必要的空值检查、对已访问节点进行缓存以防止重复处理、以及在检测到循环时抛出明确的错误信息。
为提升健壮性，可以在扁平化前对树进行预处理：去除空节点、统一结构、并对每个节点附加一个唯一的“visited”标记，确保不会重复进入同一条分支。
4. 性能优化与边界情况
4.1 内存占用与大树处理
对于极大规模的树，递归实现的调用栈限制和大量对象创建都可能成为瓶颈。优先考虑迭代法以减少栈深度带来的风险，同时尽量在扁平化阶段就把需要的字段限定在最小集合，避免重复克隆对象。
在浏览器端，批量分块处理（chunked processing）也能缓解卡顿问题，例如将树分成若干片段分批输出到数组中，并使用 requestIdleCallback 或 setTimeout 让渲染进程有时间处理 UI 更新。
4.2 流式扁平化与分页输出
当树结构和输出数组都很大时，直接一次性生成可能导致内存峰值。流式扁平化思路是边遍历边输出分块数据，或者把结果分成分页来渲染。这样既能减少内存占用，又能实现渐进式渲染的 UX 优势。
实现要点包括：控件化的分块大小、对每块数据的独立处理、以及在 UI 层实现滚动监听以触发下一块数据的加载。下面给出一个分块输出的简化示例。
function flattenTreeInBlocks(nodes, blockSize = 100) {const iterator = (list, parentId, level, path) => {const stack = [...list];let i = 0;while (i < stack.length) {const node = stack[i++];const currentPath = path ? `${path}/${node.id}` : String(node.id);yield { id: node.id, name: node.name, parentId, level, path: currentPath };if (node.children?.length) {// 将子节点按需要的顺序添加到栈中stack.push(...node.children);}}};// 真实实现中需配合分页逻辑，这里仅示意const inBlocks = [];// ... 将 iterator 的输出分块推送到 inBlocksreturn inBlocks;
}
5. 实战案例：菜单数据的扁平化
5.1 菜单树的结构设计
在实际的菜单场景中，节点通常包含 id、title、path、以及 children。将其扁平化后，parentId、level、以及可选的 icon、权限 字段可以帮助渲染高效的导航、进行权限控制和快速筛选。
下面的示例演示一个简单的菜单树扁平化过程，并给出一个包含 parentId 与 level 的输出结构，便于后续的多维排序和筛选。
const menuTree = [{ id: 1, title: '首页', path: '/', children: [{ id: 2, title: '仪表盘', path: '/dashboard', children: [] },{ id: 3, title: '管理', path: '/admin', children: [{ id: 4, title: '用户', path: '/admin/users' },{ id: 5, title: '角色', path: '/admin/roles' }] }]},{ id: 6, title: '设置', path: '/settings' }
];function flattenMenu(nodes) {const res = [];const dfs = (list, parentId, level, path) => {for (const n of list) {const currentPath = path ? `${path}/${n.id}` : String(n.id);res.push({ id: n.id, title: n.title, path: currentPath, parentId, level });if (n.children?.length) dfs(n.children, n.id, level + 1, currentPath);}};dfs(nodes, null, 0, '');return res;
}// 调用
const flatMenu = flattenMenu(menuTree);
5.2 结果验证与对比
通过对比，递归实现的扁平化结果与迭代实现的在结构一致性方面通常是一致的，差异仅在实现方式与性能边界上。一致性与 正确性是最关键的验证点，确保同一树在两种实现下输出的父子关系、层级信息均保持一致。
在实际项目中，你可以基于上述实现，结合自定义字段（如权限、图标、是否可访问等）进行扩展。最后，确保在数据源发生变化时，扁平化过程具有幂等性，即多次执行结果保持一致，并且对增量更新有良好的支持。
