在现代前端应用开发中，尤其是在reactjs等框架中处理数据时，我们经常会遇到需要对数组中的对象进行分组和聚合计算的需求。这类似于关系型数据库中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对Amount和Hours进行求和，最终得到如下结构的数据：
[
{
ProjectType: "Lima",
TotalAmount: 60,
TotalHours: 15,
},
{
ProjectType: "Romeo",
TotalAmount: 50,
TotalHours: 15,
}
]直接使用array.filter和array.reduce组合虽然可以实现对单一ProjectType的求和，但如果需要对所有ProjectType进行聚合，这种方法会导致多次遍历和重复逻辑，效率较低且代码冗余。
实现分组求和的策略
为了高效地实现类似SQL GROUP BY和SUM的功能，我们可以采用一种常见的JavaScript模式：利用一个中间对象作为累加器，在一次遍历中完成分组和求和。
立即学习“Java免费学习笔记（深入）”；
核心实现步骤
- 初始化一个空对象作为累加器：这个对象将用于存储按ProjectType分组后的聚合数据。ProjectType将作为这个对象的键。
- 遍历原始数组：对frames数组中的每个元素进行迭代。
-
检查并初始化分组项：在每次迭代中，检查当前元素的ProjectType是否已作为键存在于累加器对象中。
- 如果不存在，则为该ProjectType创建一个新的聚合对象，并初始化TotalAmount和TotalHours为0。
- 如果已存在，则直接使用现有聚合对象。
- 累加数值：将当前元素的Amount和Hours累加到对应ProjectType的聚合对象中的TotalAmount和TotalHours。
- 提取最终结果：遍历完成后，累加器对象包含了所有分组的聚合数据。使用Object.values()方法将这个对象的值（即每个ProjectType的聚合结果）转换为一个数组，从而得到最终的期望输出。
示例代码
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" }
];
const items = {}; // 初始化一个空对象作为中间累加器
// 使用 forEach 遍历原始数组
frames.forEach( ({ ProjectType, Amount, Hours }) => {
// 检查当前 ProjectType 是否已存在于累加器中
if (!items[ProjectType]) {
// 如果不存在，则为该 ProjectType 初始化一个新的聚合对象
items[ProjectType] = { ProjectType, TotalAmount: 0, TotalHours: 0 };
}
// 累加 Amount 和 Hours
items[ProjectType].TotalAmount += Amount;
items[ProjectType].TotalHours += Hours;
});
// 使用 Object.values() 将累加器对象转换为最终的数组结果
const output = Object.values(items);
console.log(output);
/*
输出结果:
[
{ ProjectType: 'Lima', TotalAmount: 60, TotalHours: 15 },
{ ProjectType: 'Romeo', TotalAmount: 50, TotalHours: 15 }
]
*/代码解析
- const items = {};: items是一个普通JavaScript对象，它将以ProjectType的值作为键，存储每个项目类型的聚合数据。
- frames.forEach( ({ ProjectType, Amount, Hours }) => { ... });: 我们使用forEach方法遍历frames数组。这里使用了ES6的对象解构，直接从当前frame对象中提取了ProjectType、Amount和Hours这三个属性，使代码更简洁易读。
- if (!items[ProjectType]) { ... }: 这是分组逻辑的关键。它检查items对象中是否已经存在以当前ProjectType为键的属性。如果不存在（即这是我们第一次遇到这个ProjectType），就创建一个新的对象，并将其ProjectType、TotalAmount和TotalHours初始化。
- items[ProjectType].TotalAmount += Amount; 和 items[ProjectType].TotalHours += Hours;: 无论ProjectType是首次出现还是已经存在，我们都将当前Amount和Hours累加到对应ProjectType的TotalAmount和TotalHours上。
-
const output = Object.values(items);: forEach循环结束后，items对象看起来会是这样：
{ "Lima": { ProjectType: "Lima", TotalAmount: 60, TotalHours: 15 }, "Romeo": { ProjectType: "Romeo", TotalAmount: 50, TotalHours: 15 } }Object.values()方法用于返回一个给定对象自身的所有可枚举属性值的数组，顺序与for...in循环给出的顺序一致。这样，我们就得到了期望的数组格式结果。
注意事项与总结
- 效率：这种方法只需要对原始数组进行一次遍历（单趟操作），相比于多次filter和reduce的组合，在处理大型数据集时效率更高。
- 可读性：代码逻辑清晰，易于理解，符合JavaScript开发者常用的模式。
- 灵活性：如果需要聚合更多字段，只需在初始化时添加相应字段，并在累加步骤中增加对应的求和操作即可。
- ReactJS环境：在React组件中，你可以在useEffect钩子中执行此类数据处理，或者在组件状态更新时调用此函数，以确保数据始终是最新的。
通过这种迭代加中间对象的策略，我们可以有效地在JavaScript中模拟SQL的GROUP BY和SUM操作，实现复杂的数据聚合需求，为前端应用的数据展示和分析提供强大的支持。
