将JavaScript数据（如数组、对象）转换为树结构是处理层级数据（如菜单、组织架构）的常见需求，核心思路是通过递归或迭代遍历原始数据，根据标识父子关系的字段（如parentId、id）构建层级关系，通常需为每个节点定义children属性存储子节点，先构建节点映射表（id到节点的映射），再通过遍历将节点挂载到对应父节点下，最终形成根节点明确、层级分明的树形结构，便于前端渲染或后端处理，实现数据的层级展示与操作。
JavaScript 扁平化数据转树结构的实现与优化
在软件开发中，处理具有层级关系的数据是常见场景，例如组织架构、菜单系统、评论嵌套、文件目录等，这类数据若以扁平化数组形式存储（如 `[ {id: 1, name: '部门A', parentId: null}, {id: 2, name: '部门B', parentId: 1} ]`），虽便于存储和传输，但在前端渲染或逻辑处理时，往往需要转换成“树结构”（嵌套结构）以清晰体现层级关系，本文将深入探讨 JavaScript 中将扁平化数据高效转换为树结构的多种方法、性能优化策略及实际应用场景。
为何需要树结构？
树结构是一种非线性数据结构，由节点和边组成，每个节点可包含零个或多个子节点，相较于扁平化数组,其核心优势在于：
- 层级关系直观清晰：父子关系一目了然，例如组织架构中“总公司-分公司-部门”的嵌套层级。
- 高效遍历与渲染：前端框架（如 React、Vue）天然支持递归渲染树形组件（如菜单、树形选择器）,开发体验更佳。
- 快速子节点定位：通过树结构可高效获取某个节点的所有子节点或完整的父节点路径。
核心概念：扁平化数据 vs 树结构
扁平化数据
通常是一维数组，每个元素包含唯一标识符（`id`）和父节点标识符（`parentId`），根节点的 `parentId` 可为 `null` 或特定值（如 `0`）。
const flatData = [
{ id: 1, name: '总公司', parentId: null },
{ id: 2, name: '分公司A', parentId: 1 },
{ id: 3, name: '分公司B', parentId: 1 },
{ id: 4, name: '技术部', parentId: 2 },
{ id: 5, name: '市场部', parentId: 2 },
{ id: 6, name: '研发部', parentId: 3 },
];
树结构
嵌套的对象结构，每个节点可能包含 `children` 数组（存储子节点）。
const treeData = [
{
id: 1,
name: '总公司',
parentId: null,
children: [
{
id: 2,
name: '分公司A',
parentId: 1,
children: [
{ id: 4, name: '技术部', parentId: 2, children: [] },
{ id: 5, name: '市场部', parentId: 2, children: [] },
],
},
{
id: 3,
name: '分公司B',
parentId: 1,
children: [
{ id: 6, name: '研发部', parentId: 3, children: [] },
],
},
],
},
];
核心转换方法：从扁平化到树结构
转换的核心逻辑是：利用 `parentId` 关联父子节点，将子节点挂载到对应的父节点下,以下是两种主流实现方案及其优化分析。
递归法（直观但性能受限）
步骤解析：
- 筛选根节点：找出所有 `parentId` 为 `null` 或不存在的节点。
- 递归构建子树：对每个根节点，递归查找其子节点（`id` 等于其他节点的 `parentId` 的节点）。
- 终止条件：当节点无子节点时,递归终止。
代码实现：
function arrayToTreeRecursive(flatData) {
// 1. 筛选根节点
const roots = flatData.filter(item => item.parentId === null);
// 2. 递归查找并挂载子节点
const buildChildren = (parent) => {
const children = flatData.filter(item => item.parentId === parent.id);
if (children.length > 0) {
parent.children = children;
children.forEach(child => buildChildren(child)); // 递归处理子节点
} else {
parent.children = []; // 确保无子节点的节点也有空 children 数组（可选）
}
};
// 3. 为每个根节点构建子树
roots.forEach(root => buildChildren(root));
return roots;
}
// 使用示例
const treeData = arrayToTreeRecursive(flatData);
console.log(treeData);
优缺点分析：
- 优点：逻辑直观，易于理解与实现,适合小规模数据或层级较浅的场景。
- 缺点：
- 递归深度过深时可能引发栈溢出（Stack Overflow）。
- 每次递归需遍历整个数组，时间复杂度为 O(n²),数据量增大时性能显著下降。
迭代法（高效，推荐）
步骤解析：
- 构建节点映射表：使用 `Map` 或对象以 `id` 为键，节点对象为值，实现 O(1) 时间复杂度的节点查找。
- 初始化节点结构：为每个节点创建 `children` 数组。
- 挂载子节点：遍历扁平化数据，对每个节点：
- 通过 `parentId` 从映射表中查找父节点。
- 若父节点存在，将当前节点推入其 `children` 数组；否则,作为根节点暂存。
- 提取根节点：最终未被挂载的节点即为根节点。
代码实现：
function arrayToTreeIterative(flatData) {
const nodeMap = new Map();
const roots = [];
// 1. 创建节点映射表并初始化 children 数组
