js如何实现数组分组

月夜之吻

发布时间：2025-08-21 12:48:01

675人浏览过

来源于php中文网

原创

在javascript中，数组分组的核心是通过属性值作为键将元素归类，主要使用reduce或原生groupby方法实现。1. 使用reduce可灵活处理复杂逻辑，结合map或普通对象存储结果，适合多条件分组；2. array.prototype.groupby（实际为object.groupby和map.groupby）提供更简洁、语义化的分组方式，但存在浏览器兼容性限制且灵活性不如reduce；3. 分组后可通过foreach、for...of或object.entries等方法遍历结果，并对每组数据进行聚合或筛选操作，从而实现高效的数据处理。

js如何实现数组分组

在JavaScript中，实现数组分组的核心思路是根据某个（或多个）属性的值作为键，将原始数组中的元素归类到不同的集合中。这通常通过遍历数组，并利用

Map

对象或普通JavaScript对象来存储分组结果来完成。近期，原生的

Array.prototype.groupBy

方法也为我们提供了更简洁、语义化的选择。

解决方案

对我来说，处理数组分组，

reduce

简直是瑞士军刀般的存在。它能把一个数组“折叠”成任何你想要的数据结构，包括一个按特定键分组的对象或

Map

。

假设我们有一组用户数据，想按城市分组：

const users = [
  { id: 1, name: 'Alice', city: 'New York' },
  { id: 2, name: 'Bob', city: 'London' },
  { id: 3, name: 'Charlie', city: 'New York' },
  { id: 4, name: 'David', city: 'Paris' },
  { id: 5, name: 'Eve', city: 'London' },
];

// 使用 reduce 和 Map 进行分组
const groupedByCity = users.reduce((acc, user) => {
  const city = user.city;
  if (!acc.has(city)) {
    acc.set(city, []); // 如果这个城市还没出现过，就创建一个空数组
  }
  acc.get(city).push(user); // 把当前用户加到对应城市的数组里
  return acc;
}, new Map()); // 初始值是一个空的 Map

console.log(groupedByCity);
/*
Map(3) {
  'New York' => [ { id: 1, name: 'Alice', city: 'New York' }, { id: 3, name: 'Charlie', city: 'New York' } ],
  'London' => [ { id: 2, name: 'Bob', city: 'London' }, { id: 5, name: 'Eve', city: 'London' } ],
  'Paris' => [ { id: 4, name: 'David', city: 'Paris' } ]
}
*/

// 如果你更喜欢普通对象作为结果，可以这样：
const groupedByCityObject = users.reduce((acc, user) => {
  const city = user.city;
  acc[city] = acc[city] || []; // 如果这个城市还没出现过，就初始化一个空数组
  acc[city].push(user);
  return acc;
}, {}); // 初始值是一个空对象

console.log(groupedByCityObject);
/*
{
  'New York': [ { id: 1, name: 'Alice', city: 'New York' }, { id: 3, name: 'Charlie', city: 'New York' } ],
  'London': [ { id: 2, name: 'Bob', city: 'London' }, { id: 5, name: 'Eve', city: 'London' } ],
  'Paris': [ { id: 4, name: 'David', city: 'Paris' } ]
}
*/

选择

Map

还是普通对象作为结果，主要看你的键类型。如果键可能是数字、布尔值甚至是对象引用（虽然不常见），

Map

会更可靠。如果键总是字符串或符号，普通对象就足够了，而且可能更方便直接访问。

Array.prototype.groupBy

方法有什么优势和限制？

说实话，每次写

reduce

来分组，我总觉得有点重复劳动。所以，当

Array.prototype.groupBy

提案出来的时候，我真的挺兴奋的。它在 ES2023 中被标准化，提供了一种更声明式、更直观的方式来完成数组分组。

优势：

语义化和可读性： 代码意图非常明确，一眼就能看出是在进行分组操作。
简洁性： 相比
```
reduce
```
的手动累加逻辑，
```
groupBy
```
显著减少了样板代码。
性能潜力： 作为原生方法，它可能在底层实现上进行优化，理论上比纯 JavaScript 循环更高效（尽管对于小到中等规模的数据集，差异可能不明显）。
返回
Map
或
Object
：
```
groupBy
```
和
```
groupByToMap
```
提供了两种返回结果类型，可以根据需求选择。

限制：

浏览器兼容性： 这是目前最大的限制。因为它是一个相对较新的特性，旧版浏览器可能不支持。你需要考虑使用 Babel 等工具进行转译，或者提供一个 Polyfill。
灵活性略逊于
reduce
：虽然它很方便，但
```
groupBy
```
专注于“分组”这个单一任务。如果你在分组的同时还需要进行一些复杂的聚合计算（比如计算每个组的总和、平均值等），
```
reduce
```
仍然是更强大的选择，因为它允许你在每次迭代中执行任意逻辑。
默认返回对象：
```
Array.prototype.groupBy
```
默认返回一个普通对象，这意味着如果你的分组键是非字符串类型（例如数字或布尔值），它们会被强制转换为字符串。如果你需要保持键的原始类型，你需要使用
```
Array.prototype.groupByToMap
```
。

groupBy

示例：

// 假设还是上面的 users 数组
const users = [
  { id: 1, name: 'Alice', city: 'New York' },
  { id: 2, name: 'Bob', city: 'London' },
  { id: 3, name: 'Charlie', city: 'New York' },
  { id: 4, name: 'David', city: 'Paris' },
  { id: 5, name: 'Eve', city: 'London' },
];

// 按城市分组，结果是普通对象
const groupedByCityNative = Object.groupBy(users, user => user.city);
console.log(groupedByCityNative);
/*
{
  'New York': [ { id: 1, name: 'Alice', city: 'New York' }, { id: 3, name: 'Charlie', city: 'New York' } ],
  'London': [ { id: 2, name: 'Bob', city: 'London' }, { id: 5, name: 'Eve', city: 'London' } ],
  'Paris': [ { id: 4, name: 'David', city: 'Paris' } ]
}
*/

// 如果要返回 Map
const groupedByCityNativeMap = Map.groupBy(users, user => user.city);
console.log(groupedByCityNativeMap);
/*
Map(3) {
  'New York' => [ { id: 1, name: 'Alice', city: 'New York' }, { id: 3, name: 'Charlie', city: 'New York' } ],
  'London' => [ { id: 2, name: 'Bob', city: 'London' }, { id: 5, name: 'Eve', city: 'London' } ],
  'Paris' => [ { id: 4, name: 'David', city: 'Paris' } ]
}
*/

注意，

Object.groupBy

是直接在

Object

构造函数上的静态方法，而不是

Array.prototype

上的实例方法。而

Map.groupBy

也是

Map

构造函数上的静态方法。

I-Shop购物系统

部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

下载

如何根据多个条件或复杂逻辑进行数组分组？

当分组条件变得复杂时，比如要根据年龄段、状态和部门同时分组，或者分组键需要通过计算才能得出，

reduce

的灵活性就体现出来了。它允许你在回调函数中编写任意复杂的逻辑来生成分组键。

举个例子，我们想把用户按“活跃状态”和“年龄段”进行分组：

const people = [
  { name: 'Anna', age: 25, status: 'active', department: 'HR' },
  { name: 'Ben', age: 35, status: 'inactive', department: 'IT' },
  { name: 'Chloe', age: 28, status: 'active', department: 'IT' },
  { name: 'Daniel', age: 40, status: 'active', department: 'HR' },
  { name: 'Ella', age: 19, status: 'active', department: 'Sales' },
  { name: 'Frank', age: 50, status: 'inactive', department: 'Sales' },
];

const groupedByStatusAndAgeRange = people.reduce((acc, person) => {
  let ageRange;
  if (person.age < 25) {
    ageRange = 'Under 25';
  } else if (person.age >= 25 && person.age <= 35) {
    ageRange = '25-35';
  } else {
    ageRange = 'Over 35';
  }

  // 组合多个条件作为键
  const groupKey = `${person.status}-${ageRange}`;

  acc[groupKey] = acc[groupKey] || [];
  acc[groupKey].push(person);
  return acc;
}, {});

console.log(groupedByStatusAndAgeRange);
/*
{
  'active-25-35': [ { name: 'Anna', age: 25, status: 'active', department: 'HR' }, { name: 'Chloe', age: 28, status: 'active', department: 'IT' } ],
  'inactive-25-35': [ { name: 'Ben', age: 35, status: 'inactive', department: 'IT' } ],
  'active-Over 35': [ { name: 'Daniel', age: 40, status: 'active', department: 'HR' } ],
  'active-Under 25': [ { name: 'Ella', age: 19, status: 'active', department: 'Sales' } ],
  'inactive-Over 35': [ { name: 'Frank', age: 50, status: 'inactive', department: 'Sales' } ]
}
*/

这里，我们通过字符串拼接的方式创建了一个复合键。这种方法非常灵活，你可以根据业务需求，在

reduce

的回调函数中编写任何复杂的逻辑来决定每个元素应该归入哪个组。这比

groupBy

方法中只能提供一个简单的属性名或单一函数回调要强大得多。当然，如果

groupBy

的回调函数本身足够复杂，也能实现类似效果，但

reduce

在聚合数据方面有更天然的优势。

数组分组后如何处理和遍历数据？

一旦数组被分组，我们得到的结果通常是一个

Map

对象或一个普通对象。接下来的任务就是如何有效地遍历这些分组，并对每个组内的数据进行进一步的操作。

遍历

Map

类型的结果：

如果你的分组结果是

Map

，你可以使用

forEach

、

for...of

循环，或者通过

keys()

、

values()

、

entries()

方法来获取迭代器。

// 假设 groupedByCity 是一个 Map 对象
console.log("--- 遍历 Map 结果 ---");
groupedByCity.forEach((usersInCity, city) => {
  console.log(`城市：${city}，人数：${usersInCity.length}`);
  // 可以在这里对 usersInCity 数组进行进一步操作，比如计算平均年龄
  const totalAge = usersInCity.reduce((sum, user) => sum + user.id, 0); // 假设id代表年龄
  console.log(`  总ID值 (假设年龄)：${totalAge}`);
});

// 或者使用 for...of
for (const [city, usersInCity] of groupedByCity.entries()) {
  console.log(`[${city}] 包含 ${usersInCity.length} 位用户。`);
}

遍历普通对象类型的结果：

如果你的分组结果是普通对象，通常会使用

Object.keys()

、

Object.values()

或

Object.entries()

结合

forEach

或

for...of

循环。

// 假设 groupedByCityObject 是一个普通对象
console.log("--- 遍历 普通对象 结果 ---");
Object.entries(groupedByCityObject).forEach(([city, usersInCity]) => {
  console.log(`城市：${city}，用户列表：`);
  usersInCity.forEach(user => console.log(`  - ${user.name}`));
});

// 计算每个城市的用户数量
const cityCounts = Object.keys(groupedByCityObject).map(city => ({
  city: city,
  count: groupedByCityObject[city].length
}));
console.log(cityCounts);
/*
[
  { city: 'New York', count: 2 },
  { city: 'London', count: 2 },
  { city: 'Paris', count: 1 }
]
*/

在实际应用中，分组后的数据往往是进一步分析或展示的基础。比如，你可能需要计算每个组的平均值、总和，或者筛选出符合特定条件的组。这些操作都可以在遍历分组结果时，对每个子数组（即每个组）进行独立的处理。记住，每个组本身就是一个数组，你可以对其应用任何常规的数组方法（