在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()); // 初始值是一个空的 Mapconsole.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
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' } ]}*/// 如果要返回 Mapconst 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 && 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...offor (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如何实现数组分组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516761.html
微信扫一扫 
支付宝扫一扫 
