用数组分组的更佳方式：探索 JavaScript 的新解决方案

2024-02-09 07:13:01







## JavaScript 数组分组：传统的烦恼

数组分组是 JavaScript 开发中的常见任务，涉及根据特定属性将数组元素组织到组中。虽然 Array.prototype.reduce() 等现有方法可以完成这项任务，但它们往往效率低下，难以扩展以处理更复杂的场景。

传统分组方法的局限性包括：

- **代码冗余：** 每个分组属性都需要编写单独的 reduce 函数，导致代码重复和难以维护。
- **性能瓶颈：** reduce() 的嵌套调用会对性能产生负面影响，尤其是在处理大型数组时。
- **有限的灵活性：** 这些方法难以适应不断变化的分组需求，例如按多个属性分组或创建嵌套组。

## 创新解决方案：数组分组函数

为了解决这些痛点，我们提出了一种创新的数组分组函数 `groupBy()`，它利用 JavaScript 的 Map 数据结构提供了一个更简洁、更高效、更灵活的解决方案。

```js
const groupBy = (array, key) => {
  const map = new Map();
  array.forEach((item) => {
    const value = map.get(item[key]) || [];
    value.push(item);
    map.set(item[key], value);
  });
  return map;
};

该函数接收两个参数：array（要分组的数组）和 key（分组属性）。它返回一个 Map 对象，其中键是分组属性的值，值是具有相同属性值的元素数组。

优势一览

与传统方法相比，groupBy() 函数提供了以下优势：

代码简洁： 只需一行代码，即可对任意属性进行分组，无需编写冗长的 reduce 函数。
性能卓越： Map 对象的快速查找和插入操作确保了出色的性能，即使在处理大型数组时也是如此。
高度灵活： 该函数支持按多个属性分组，创建嵌套组，以及使用自定义分组逻辑。

应用场景

groupBy() 函数在各种数组分组场景中都有广泛的应用，包括：

按用户 ID 对订单分组
根据部门对员工分组
按照产品类别对销售数据分组
创建嵌套组，例如按国家/地区和城市分组地址

使用示例

以下示例演示了如何使用 groupBy() 函数按 name 属性对数组进行分组：

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'John' },
  { id: 4, name: 'Mary' },
];

const groupedUsers = groupBy(users, 'name');
console.log(groupedUsers);

输出：

Map {
  'John' => [
    { id: 1, name: 'John' },
    { id: 3, name: 'John' },
  ],
  'Jane' => [
    { id: 2, name: 'Jane' },
  ],
  'Mary' => [
    { id: 4, name: 'Mary' },
  ],
}