JavaScript多维对象按字段分组教程

本文深入讲解了如何用原生 JavaScript 高效实现多维嵌套对象（如 keyResults 和 metrics）按指定字段（如 product）进行跨数组合并分组，提供了一种零依赖、高性能（O(n) 时间复杂度）、易扩展且无副作用的哈希表预聚合方案——通过动态键注入和 Object.values() 转换，轻松应对数据聚合、报表生成等真实业务场景，即使未来新增数据源（如 feedbacks）也只需一行配置，兼具健壮性、可维护性与广泛浏览器兼容性，是前端工程师处理复杂结构化数据的实用利器。

本文详解如何将嵌套结构中的多个数组（如 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 等任意字段的多源聚合需求，大幅提升数据处理代码的可读性与可维护性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~