本文介绍如何将 javascript 对象数组按指定属性顺序（如 ['a', 'b', 'c', 'd']）递归分组，构建符合图表库要求的嵌套树形结构（每个节点含 name 和可选 children），支持任意深度、自动去重与层级展开。
在数据可视化场景中（如 ECharts 的 tree 或 sunburst 图），常需将扁平的对象数组转换为严格的层级嵌套结构。例如，给定一组具有相同属性键（A/B/C/D）的对象，需按属性值逐层聚类，形成 name + children 的递归树。核心挑战在于：既要保持属性顺序（A → B → C → D），又要正确合并共享前缀路径的节点，并将末级属性值作为叶子节点。
以下是一个健壮、可复用的实现方案：
function groupByKeys(data, keys) {
// 步骤1：构建多层嵌套对象（键路径映射）
const root = {};
for (const item of data) {
let node = root;
for (const key of keys) {
const value = item[key];
// 使用 ??= 确保深层对象自动创建（ES2021+）
node = (node[value] ??= {});
}
}
// 步骤2：递归转换为目标树结构
const buildTree = (obj) => {
return Object.entries(obj).map(([name, child]) => {
// 若 child 为空对象（即无子节点），则为叶子节点
if (Object.keys(child).length === 0) {
return { name: Number(name) }; // 自动转数字（适配示例中的数值）
}
// 否则递归构建 children
return {
name: Number(name),
children: buildTree(child)
};
});
};
// 返回根节点（因 keys 非空，root 必有且仅有一个顶层 key）
const result = buildTree(root);
return result.length > 0 ? result[0] : {};
}
// ✅ 示例1：相同 A/B/C，不同 D → D 成为叶子
const data1 = [
{ A: 1, B: 5, C: 7, D: 67 },
{ A: 1, B: 5, C: 7, D: 69 }
];
console.log(groupByKeys(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(groupByKeys(data2, ['A', 'B', 'C', 'D']));
// → { name: 1, children: [{ name: 5, children: [{ name: 4, children: [{ name: 67 }] }, { name: 7, children: [{ name: 69 }] }] }] }关键设计说明：
- 路径构建安全：使用 node[value] ??= {} 替代 node[value] || (node[value] = {})，避免 undefined 或 null 导致错误；
- 类型一致性：Number(name) 统一将键名转为数字（因示例中所有值均为数值，若含字符串请移除此转换）；
- 空对象判据：Object.keys(child).length === 0 是判断叶子节点的可靠方式（比 !child 更精准）；
- 可扩展性：keys 参数支持任意长度和顺序（如 ['C', 'A']），无需修改逻辑；
- 无副作用：纯函数式实现，不修改原始数据。
注意事项：
立即学习“Java免费学习笔记（深入）”；
- 若输入 data 为空数组，函数返回 {}，建议调用前校验；
- 属性值必须为可序列化为对象键的类型（推荐字符串/数字；Symbol 或对象会触发 toString() 导致意外行为）；
- 如需稳定排序（如数字升序），可在 Object.entries() 后添加 .sort((a, b) => Number(a[0]) - Number(b[0]))；
- 在旧版浏览器中，替换 ??= 为兼容写法：node[value] = node[value] || {}。
该方案兼顾简洁性与工程鲁棒性，可直接集成至数据预处理流程，高效支撑各类嵌套图表渲染需求。
