JS数组分组技巧全解析

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JS数组分组方法详解》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

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

在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 构造函数上的静态方法。

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

当分组条件变得复杂时，比如要根据年龄段、状态和部门同时分组，或者分组键需要通过计算才能得出，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 }
]
*/

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

终于介绍完啦！小伙伴们，这篇关于《JS数组分组技巧全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！