js如何实现数组分组

浅墨大大_5480

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

695人浏览过

来源于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

构造函数上的静态方法。

科学计算器在线使用工具代码

html5 css3制作在线科学计算器ui布局，3D计算器面板，加减乘除数字计算器工具特效。

下载

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

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

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 }
]
*/

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