本文详解如何将嵌套结构中的多个数组（如 keyresults 和 metrics）按指定字段（如 product）合并分组，生成结构清晰、可扩展的分组结果，适用于数据聚合与报表场景。
本文详解如何将嵌套结构中的多个数组（如 keyresults 和 metrics）按指定字段（如 product）合并分组，生成结构清晰、可扩展的分组结果，适用于数据聚合与报表场景。
在实际前端开发中，我们常需对来自不同数据源但具有相同分类标识（如 product）的对象进行归类整合——例如将 KPI 指标（keyResults）与运营度量（metrics）按产品维度统一组织。这类需求无法通过简单 Array.prototype.reduce() 一次性完成，因为需同时遍历多个数组并动态构建分组结构。下面以一个典型嵌套数据为例，提供零依赖、高性能、易维护的原生 JavaScript 实现方案。
✅ 核心思路：哈希表预聚合 + 动态键注入
我们不直接操作最终数组，而是先用普通对象（即哈希表）以 product 值为键缓存每组数据，再统一转为数组。该方式时间复杂度为 O(n)，避免重复查找，且天然支持新增字段（如未来加入 feedbacks 数组）。
? 示例代码（含完整可运行逻辑）
const a = {
products: {
keyResults: [
{ leader: "Aaron", product: "Product 1" },
{ leader: "Addie", product: "Product 1" },
{ leader: "Mindy", product: "Product 1" },
{ leader: "Wiley", product: "Product 2" }
],
metrics: [
{ leader: "Aaron", product: "Product 1" },
{ leader: "Wiley", product: "Product 2" }
]
}
};
// 步骤 1：初始化空哈希表，用于按 product 分组
const grouped = {};
// 步骤 2：遍历所有需聚合的字段名（支持扩展）
const sourceKeys = ['keyResults', 'metrics'];
for (const key of sourceKeys) {
const items = a.products[key] || [];
for (const item of items) {
const productId = item.product;
// 若该 product 尚未初始化，则创建默认结构
if (!grouped[productId]) {
grouped[productId] = {
product: productId,
keyResults: [],
metrics: []
};
}
// 将当前 item 推入对应子数组
grouped[productId][key].push(item);
}
}
// 步骤 3：转换为标准数组格式并封装为新结构
const b = {
products: Object.values(grouped)
};
console.log(b);
// 输出符合预期的分组结构（见问题描述）⚠️ 注意事项与最佳实践
- 字段健壮性：代码中使用 a.products[key] || [] 防止某字段缺失导致报错，生产环境建议配合 TypeScript 或运行时校验；
- 扩展性设计：若后续新增 feedbacks 字段，只需在 sourceKeys 数组中追加 'feedbacks'，无需修改核心逻辑；
- 性能对比：相比多次 filter() + reduce() 组合（O(n²)），本方案仅遍历一次各数组，效率更高；
- 避免副作用：所有操作均为纯函数式（不修改原始数据 a），符合现代前端开发规范；
- 兼容性：全部使用 ES5+ 原生语法，无需 Polyfill，兼容 IE11+ 及所有现代浏览器。
✅ 总结
按字段分组嵌套对象的本质是「分类收集」而非「排序或筛选」。采用哈希表作为中间载体，既能保证唯一性，又支持动态字段注入；Object.values() 则优雅收尾，输出标准数组结构。掌握此模式后，你可轻松应对类似 category、status、team 等任意字段的多源聚合需求，大幅提升数据处理代码的可读性与可维护性。
