本文介绍如何将扁平的 javascript 对象数组，按指定属性顺序（如 `['a', 'b', 'c', 'd']`）递归分组，生成符合图表库要求的嵌套树形结构（含 `name` 与 `children` 字段），支持任意层级、自动去重与深度优先展开。
在数据可视化场景中（如 ECharts 的 tree 图、D3.js 层级布局或自定义钻取组件），常需将平面数据转换为具有明确父子关系的嵌套结构。本教程提供一种健壮、可扩展、无副作用的实现方案，核心思想分为两步：构建嵌套哈希树 → 递归展平为标准树节点。
✅ 核心实现逻辑
我们不依赖外部库，仅用原生 JavaScript 实现：
- 第一阶段（构建层级映射）：遍历每个对象，按 keys 顺序（如 ['A','B','C','D']）逐层下钻，在内存中构建一个嵌套对象字典（类似 Trie 结构），键为对应属性值，值为下一层子对象；
- 第二阶段（结构转换）：通过递归函数 hierarchy() 将该字典转换为目标格式：若子对象非空，则生成带 children 的节点；若为空（即叶子节点），则只保留 name。
以下是完整可运行代码：
function groupByProperties(data, keys) {
// 边界处理：空输入或无 keys
if (!Array.isArray(data) || data.length === 0 || !Array.isArray(keys) || keys.length === 0) {
return null;
}
// 构建嵌套字典：{ A1: { B5: { C7: { D67: {}, D69: {} } } } }
const root = {};
for (const item of data) {
let node = root;
for (const key of keys) {
const value = item[key];
// 确保 value 是合法 key（避免对象/undefined/null 作为 key）
if (value == null || typeof value === 'object') {
throw new Error(`Invalid grouping value at key "${key}": ${JSON.stringify(value)}`);
}
node = (node[value] ??= {});
}
}
// 递归转换为 name/children 树结构
const hierarchy = (obj) =>
Object.entries(obj).map(([name, child]) => ({
name: name,
children: Object.keys(child).length > 0 ? hierarchy(child) : undefined
})).map(node =>
node.children === undefined ? { name: node.name } : node
);
const result = hierarchy(root);
return result.length > 0 ? result[0] : { name: null };
}
// ✅ 示例 1：相同 A/B/C，不同 D
const data1 = [
{ A: 1, B: 5, C: 7, D: 67 },
{ A: 1, B: 5, C: 7, D: 69 }
];
console.log(groupByProperties(data1, ['A', 'B', 'C', 'D']));
// → { name: "1", children: [{ name: "5", children: [{ name: "7", children: [{ name: "67" }, { name: "69" }] }] }] }
// ✅ 示例 2：C 层级分化
const data2 = [
{ A: 1, B: 5, C: 4, D: 67 },
{ A: 1, B: 5, C: 7, D: 69 }
];
console.log(groupByProperties(data2, ['A', 'B', 'C', 'D']));
// → { name: "1", children: [{ name: "5", children: [{ name: "4", children: [{ name: "67" }] }, { name: "7", children: [{ name: "69" }] }] }] }⚠️ 注意事项与最佳实践
- 类型安全：代码中已校验 value 是否为有效对象键（字符串/数字/布尔值），禁止传入 null、undefined 或对象——否则会导致静默错误或意外分组；
- 顺序敏感：keys 数组顺序决定树的层级深度与结构，务必严格按业务语义排列（如 ['region', 'category', 'year', 'quarter']）；
- 性能考量：时间复杂度为 O(n × m)（n=数据条数，m=keys长度），适用于万级以内数据；超大数据建议结合 Web Worker 或服务端预聚合；
- 扩展性增强：如需支持自定义节点字段（如添加 id、label、metadata），可在 hierarchy 映射中注入额外属性；
- 空值处理：当前策略抛出明确错误；生产环境可改为跳过非法项并记录警告（使用 console.warn）。
✅ 总结
该方案以“字典建模 + 递归展平”双阶段设计，兼顾可读性、健壮性与性能，完美适配各类需要层级化数据的前端图表库。只需传入原始数组和属性路径，即可获得开箱即用的树形结构，无需手动维护中间状态或嵌套循环，是处理多维分组需求的推荐范式。
立即学习“Java免费学习笔记（深入）”；
