JavaScript中对接口扁平表格数据分组归类，核心是用reduce或groupBy按字段聚合并转嵌套结构；单字段分组最常用，多字段需拼唯一key，树形结构需两遍遍历构建父子关系，顺序与去重可用Map和Set保障。
JavaScript 中对接口返回的扁平表格数据进行分组归类，核心是用 Array.prototype.reduce() 或 Object.groupBy()（需环境支持）按指定字段聚合，再转为嵌套结构（如树形、分组对象或带子项的数组）。关键在于明确分组依据、处理重复键、保留原始数据完整性。
按单个字段分组（最常用）
适合按部门、状态、类型等单一维度归类。使用 reduce 构建以分组值为 key 的对象：
- 初始化空对象
{}，遍历每条数据，提取分组字段值（如item.category）作为 key - 若 key 不存在，创建新数组；否则推入当前项
- 最终得到形如
{ "A": [...], "B": [...] }的分组对象
示例：
const data = [
{ id: 1, name: "张三", category: "前端" },
{ id: 2, name: "李四", category: "后端" },
{ id: 3, name: "王五", category: "前端" }
];
const grouped = data.reduce((acc, item) => {
const key = item.category;
if (!acc[key]) acc[key] = [];
acc[key].push(item);
return acc;
}, {});
// 结果：{ "前端": [{id:1,...}, {id:3,...}], "后端": [{id:2,...}] }
按多个字段组合分组
当需要“部门 + 状态”联合分组时，把多个字段拼成唯一 key（推荐用数组转字符串，避免分隔符冲突）：
立即学习“Java免费学习笔记（深入）”；
- 用
[item.dept, item.status].join('|')生成 key，如"技术部|待办" - 同样用
reduce聚合，注意 key 命名需保证唯一性和可读性 - 后续如需还原多维结构，可对 key 拆分解析
示例：
const key = [item.dept, item.status].join('|');
acc[key] = acc[key] || [];
acc[key].push(item);
转换为树形结构（父子关系）
若数据含 id 和 parentId，需构建成层级菜单或组织架构。分两步：先建立 id → 节点映射，再遍历挂载子节点：
- 第一遍遍历：用
Map或对象缓存所有节点，key 为id - 第二遍遍历：对每个节点，查出其
parentId对应的父节点，将当前节点加入父节点的children数组 - 最后筛选出
parentId为空或为 0 的项，即为根节点
注意：确保数据中 parentId 类型一致（如全为字符串或全为数字），避免匹配失败。
保持顺序并去重分组
接口返回的数据可能有重复或乱序。如需按首次出现顺序分组且去重：
- 用
Map替代普通对象，保证插入顺序 - 在
reduce中检查该 key 是否已存在，避免重复初始化数组 - 去重可基于唯一字段（如
id）用Set记录已处理项
示例片段：
const seen = new Set();
const grouped = data.reduce((map, item) => {
if (seen.has(item.id)) return map;
seen.add(item.id);
const key = item.category;
const list = map.get(key) || [];
map.set(key, [...list, item]);
return map;
}, new Map());
