JavaScript中实现对象数组的SQL式分组与聚合

在前端开发，尤其是在使用ReactJS等框架时，我们经常需要处理来自API或本地的数据集合。这些数据通常以对象数组的形式存在，而我们面临的一个常见需求是对这些数据进行分组和聚合，例如按某个字段进行分组，并计算其他字段的总和、平均值或计数。这与关系型数据库中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 总和 (TotalAmount) 和 Hours 总和 (TotalHours)，最终得到类似以下结构的结果：

[
  {
    ProjectType: "Lima",
    TotalAmount: 60, // 20 + 40
    TotalHours: 15,  // 5 + 10
  },
  {
    ProjectType: "Romeo",
    TotalAmount: 50,
    TotalHours: 15,
  }
]

初学者可能会尝试使用 array.filter() 结合 array.reduce() 来实现，但这通常会导致针对每个分组键进行多次过滤和规约操作，代码重复且效率不高。例如，要获取 "Lima" 项目类型的 Amount 总和，可能会写出如下代码：

立即学习“Java免费学习笔记（深入）”；

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

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

这种方法虽然能得到正确结果，但如果需要获取所有 ProjectType 的聚合数据，就需要重复调用 filterByProjectType 并手动组合结果，显然不是最佳实践。

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

0

查看详情

高效的分组与聚合方法

在JavaScript中，实现类似SQL GROUP BY 和 SUM 的高效方法是利用一个临时对象作为累加器，通过一次遍历来完成分组和聚合。

核心思路

1. 初始化一个空对象：这个对象将用作一个哈希表（或字典），其键是分组依据的字段值（例如 ProjectType），其值是该分组的聚合结果。
2. 遍历原始数组：对数组中的每个元素进行处理。
3. 动态聚合：对于每个元素，检查其分组键是否已存在于累加器对象中。
   • 如果不存在，则为该键创建一个新的聚合结果对象，并初始化聚合字段（如 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" }
];

const items = {}; // 步骤1: 初始化一个空对象作为累加器

// 步骤2&3: 遍历原始数组并进行动态聚合
frames.forEach( ({ ProjectType, Amount, Hours }) => {
  // 如果当前 ProjectType 还没有对应的聚合对象，则初始化
  if (!items[ProjectType]) {
    items[ProjectType] = { ProjectType, TotalAmount: 0, TotalHours: 0 };
  }
  // 累加 Amount 和 Hours
  items[ProjectType].TotalAmount += Amount;
  items[ProjectType].TotalHours += Hours;
});

// 步骤4: 将聚合结果对象转换为数组
const output = Object.values(items);
console.log(output);

运行上述代码，将得到以下预期结果：

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

代码详解

• const items = {};：我们创建了一个名为 items 的空对象。这个对象将临时存储按 ProjectType 分组后的数据。例如，items['Lima'] 将存储所有 ProjectType 为 "Lima" 的项目的聚合结果。
• frames.forEach(({ ProjectType, Amount, Hours }) => { ... });：我们使用 forEach 方法遍历 frames 数组中的每个项目。这里使用了ES6的解构赋值，直接从每个项目对象中提取 ProjectType、Amount 和 Hours 属性，使代码更简洁。
• if (!items[ProjectType]) { ... }：在处理每个项目时，我们首先检查 items 对象中是否已经存在以当前项目的 ProjectType 为键的属性。
  • 如果 items[ProjectType] 不存在（即这是我们第一次遇到这个 ProjectType），我们就为它创建一个新的对象 { ProjectType, TotalAmount: 0, TotalHours: 0 }，并将其赋值给 items[ProjectType]。TotalAmount 和 TotalHours 初始化为0，作为该分组的起始累加值。
  • 如果 items[ProjectType] 已经存在，说明我们之前已经处理过这个 ProjectType 的项目，直接跳过初始化步骤。
• items[ProjectType].TotalAmount += Amount; 和 items[ProjectType].TotalHours += Hours;：无论 ProjectType 是首次出现还是已经存在，我们都将当前项目的 Amount 和 Hours 值分别累加到 items[ProjectType] 对象的 TotalAmount 和 TotalHours 属性中。
• const output = Object.values(items);：当 forEach 循环完成后，items 对象将包含所有 ProjectType 的最终聚合数据。例如，items 可能看起来像这样：

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

  登录后复制

  Object.values() 方法用于提取一个对象所有可枚举属性的值，并将其作为一个数组返回。这正是我们所需的最终数据结构。

注意事项与最佳实践

1. 单次遍历效率高：这种方法只需要对原始数组进行一次遍历，因此对于大型数据集来说，其性能通常优于多次 filter 和 reduce 的组合。
2. 可扩展性强：如果需要聚合更多的字段（例如 TotalCount、AverageAmount 等），只需在 if (!items[ProjectType]) 块中初始化这些字段，并在累加步骤中更新它们即可。
3. 可读性好：相较于复杂的 reduce 链式调用，使用 forEach 配合一个外部累加器对象的方式，通常更容易理解和维护。
4. Immutability（不变性）：此方法不会修改原始 frames 数组，而是生成一个新的聚合结果数组，符合函数式编程中保持数据不变性的原则。
5. 适用于多种聚合场景：除了求和，这种模式也可以轻松扩展到计算平均值（需要同时累加总和和计数）、最大值、最小值等其他聚合操作。

总结

在JavaScript中，实现类似SQL SUM 和 GROUP BY 的功能，最有效且易于理解的方法是利用一个中间对象作为累加器，通过一次遍历原始数组来动态地构建分组和聚合结果。这种模式不仅性能优越，而且代码结构清晰，易于扩展和维护，是处理前端数据聚合任务的推荐实践。

以上就是JavaScript中实现对象数组的SQL式分组与聚合的详细内容，更多请关注php中文网其它相关文章！