JavaScript 中怎么将接口返回的扁平数组转换为树形结构-js教程-PHP中文网

javascript扁平数组转树形结构的核心是用map建立id到节点的映射，再遍历一次挂载子节点，最后提取parentid为空的根节点；时间复杂度o(n)，支持多根与任意层级。

javascript 中怎么将接口返回的扁平数组转换为树形结构

JavaScript 中将扁平数组转为树形结构，核心是利用 id 和 parentId（或类似父子标识字段）建立引用关系，再通过一次遍历完成构建。关键在于避免嵌套循环，用空间换时间。

确认数据具备树形映射条件

扁平数组中的每个对象需至少包含两个字段：

id：唯一标识当前节点（如 "id": 1）
parentId：指向父节点的 id（根节点通常为 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 }
]

用 Map 一次性建立 id → 节点映射

先遍历数组，把每个节点存进 Map（或普通对象），以 id 为键。这样后续查找父节点时可 O(1) 获取，不用每次 find。

代码示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const map = new Map();
data.forEach(item => map.set(item.id, { ...item, children: [] }));

遍历并挂载子节点

再次遍历原始数组，对每个节点：

从 map 中取出当前节点（curr）
若 parentId 存在且不为空，从 map 中取出父节点（parent）
将 curr 推入 parent.children

根节点（parentId 为空）自然不会被挂载，保留在 map 中，最后筛选出来即可。

提取根节点并返回结果

遍历 map.values()，找出所有 parentId 为空的节点，它们就是树的顶层根节点：

const roots = [];
for (const node of map.values()) {
  if (node.parentId == null || node.parentId === 0 || node.parentId === undefined) {
    roots.push(node);
  }
}
return roots;

完整封装函数可直接复用，支持任意层级、多根节点，时间复杂度 O(n)，不递归、不嵌套循环，稳定高效。