本文深入探讨如何在J*aScript和ReactJS环境中，高效地对对象数组执行按组求和与聚合操作，以模拟SQL中SUM和GROUP BY的功能。通过采用单次遍历结合哈希映射（J*aScript对象）的策略，我们能够根据指定的分组键（如ProjectType）对特定数值字段（如Amount和Hours）进行累加，最终生成结构清晰的聚合结果，显著提升数据处理效率。

理解对象数组的数据聚合需求

在前端开发中，尤其是在处理从后端获取的数据时，我们经常会遇到需要对对象数组进行统计分析的场景。例如，给定一个包含多个项目记录的数组，每条记录包含项目类型、金额和工时等信息，我们可能需要计算每个项目类型的总金额和总工时。这与关系型数据库中sql的sum和group by操作异曲同工，即根据一个或多个字段进行分组，然后对组内的其他数值字段进行汇总计算。

考虑以下项目数据结构：

const frames = [
  { ProjectName: "Blue", EmployeeGroup: false, Amount: 50, Hours: 15, ProjectType: "Romeo" },
  { ProjectName: "Red", EmployeeGroup: false, Amount: 20, Hours: 5, ProjectType: "Lima" },
  { ProjectName: "Green", EmployeeGroup: true, Amount: 40, Hours: 10, ProjectType: "Lima" }
];

我们的目标是根据ProjectType字段进行分组，并计算每个ProjectType对应的Amount和Hours的总和，生成如下格式的聚合结果：

[
  { ProjectType: "Lima", TotalAmount: 60, TotalHours: 15 },
  { ProjectType: "Romeo", TotalAmount: 50, TotalHours: 15 }
]

传统方法与局限性分析

一种直观但效率不高的方法是，首先获取所有不重复的ProjectType，然后对每个ProjectType分别进行过滤（filter）和累加（reduce）操作。例如，要获取ProjectType为"Lima"的总金额，可以这样做：

const filterByProjectType = (array, projectType) => {
     const reducer = (accumulator, currentVal) => accumulator + currentVal.Amount;
     const filteredAndReduced = array
          .filter((item) => item.ProjectType.includes(projectType))
          .reduce(reducer, 0);
     return filteredAndReduced;
}

console.log(filterByProjectType(frames, "Lima")); // 输出 60

这种方法虽然能得到正确结果，但存在明显缺陷：

青泥AI

青泥学术AI写作辅助平台

360 查看详情

1. 多次遍历：对于每个分组键和每个需要聚合的字段，都需要进行一次或多次数组遍历，导致性能低下，尤其是在数据量较大时。
2. 代码重复：如果需要聚合多个字段（如Amount和Hours），或者有多个分组键，代码会变得冗余且难以维护。
3. 非聚合输出：它只返回单个聚合值，而不是一个包含所有分组聚合结果的结构化数组。

高效聚合策略：单次遍历与哈希映射

为了实现高效且简洁的数据聚合，我们可以采用一种单次遍历结合哈希映射的策略。这种方法的核心思想是：在一次遍历原始数组的过程中，利用一个普通的J*aScript对象（作为哈希映射或字典）来存储中间聚合结果。对象的键是分组依据（例如ProjectType），值是该组的累加数据。

实现步骤

1. 初始化累加器对象：创建一个空对象，用于存储按ProjectType分组的中间聚合数据。
2. 遍历原始数组：使用forEach、for...of或reduce方法遍历frames数组中的每一个对象。
3. 动态分组与累加：
   • 对于当前遍历到的每个项目对象，提取其ProjectType作为分组键。
   • 检查累加器对象中是否已存在该ProjectType的条目。
   • 如果不存在，则创建一个新的条目，并初始化TotalAmount和TotalHours为0。
   • 如果已存在，则直接将当前项目的Amount和Hours累加到对应ProjectType条目的TotalAmount和TotalHours中。
4. 转换为最终数组：遍历结束后，累加器对象将包含所有分组的聚合数据。使用Object.values()方法将其转换为一个数组，即可得到最终的聚合结果。

代码示例

const frames = [
  { ProjectName: "Blue", EmployeeGroup: false, Amount: 50, Hours: 15, ProjectType: "Romeo" },
  { ProjectName: "Red", EmployeeGroup: false, Amount: 20, Hours: 5, ProjectType: "Lima" },
  { ProjectName: "Green", EmployeeGroup: true, Amount: 40, Hours: 10, ProjectType: "Lima" }
];

/**
 * 对对象数组进行按分组键的求和聚合
 * @param {Array