javascript中实现数组分组可通过多种方式，1.使用reduce方法：通过遍历数组将元素按规则累积到结果对象中；2.使用foreach方法：逻辑类似但无需手动返回累加器；3.使用map对象：可保持键的插入顺序。此外，分组依据支持复杂逻辑时可用函数定义分组规则，且分组后可进一步对每组数据进行聚合处理，如计算平均值或求和。性能上，reduce通常高效，而具体选择需根据需求权衡。
JavaScript中实现数组分组，本质上是将一个数组按照某种规则拆分成多个子数组，并将这些子数组放入一个对象或Map中，key代表分组的依据，value就是分组后的子数组。
解决方案
实现数组分组的方法有很多，以下列举几种常用的方式：
立即学习“Java免费学习笔记（深入）”；
使用reduce方法： 这是最常见也是最灵活的方法。reduce可以遍历数组，并根据自定义的逻辑将元素累积到一个结果对象中。
function groupBy(array, key) { return array.reduce((result, item) => { const groupKey = typeof key === 'function' ? key(item) : item[key]; if (!result[groupKey]) { result[groupKey] = []; } result[groupKey].push(item); return result; }, {});}// 示例const users = [ { id: 1, name: 'Alice', department: 'Engineering' }, { id: 2, name: 'Bob', department: 'Sales' }, { id: 3, name: 'Charlie', department: 'Engineering' }, { id: 4, name: 'David', department: 'Sales' },];const groupedUsers = groupBy(users, 'department');console.log(groupedUsers);// 输出:// {// Engineering: [// { id: 1, name: 'Alice', department: 'Engineering' },// { id: 3, name: 'Charlie', department: 'Engineering' }// ],// Sales: [// { id: 2, name: 'Bob', department: 'Sales' },// { id: 4, name: 'David', department: 'Sales' }// ]// }
这段代码的关键在于reduce的累加器（result）。 它初始化为一个空对象{}。 对于数组中的每个item，它计算groupKey。 如果result中还没有以groupKey为键的属性，就创建一个空数组[]，然后将item添加到对应的数组中。
使用forEach方法： forEach相比reduce略微繁琐，但更容易理解。
function groupByForEach(array, key) { const result = {}; array.forEach(item => { const groupKey = typeof key === 'function' ? key(item) : item[key]; if (!result[groupKey]) { result[groupKey] = []; } result[groupKey].push(item); }); return result;}// 示例 (同上)const users = [ { id: 1, name: 'Alice', department: 'Engineering' }, { id: 2, name: 'Bob', department: 'Sales' }, { id: 3, name: 'Charlie', department: 'Engineering' }, { id: 4, name: 'David', department: 'Sales' },];const groupedUsersForEach = groupByForEach(users, 'department');console.log(groupedUsersForEach);
forEach方法直接遍历数组，逻辑与reduce类似，但不需要手动返回累加器。
使用Map对象： 如果需要保持分组顺序，可以使用Map对象。
function groupByMap(array, key) { const result = new Map(); array.forEach(item => { const groupKey = typeof key === 'function' ? key(item) : item[key]; if (!result.has(groupKey)) { result.set(groupKey, []); } result.get(groupKey).push(item); }); return result;}// 示例 (同上)const users = [ { id: 1, name: 'Alice', department: 'Engineering' }, { id: 2, name: 'Bob', department: 'Sales' }, { id: 3, name: 'Charlie', department: 'Engineering' }, { id: 4, name: 'David', department: 'Sales' },];const groupedUsersMap = groupByMap(users, 'department');console.log(groupedUsersMap);// 输出:// Map(2) {// 'Engineering' => [// { id: 1, name: 'Alice', department: 'Engineering' },// { id: 3, name: 'Charlie', department: 'Engineering' }// ],// 'Sales' => [// { id: 2, name: 'Bob', department: 'Sales' },// { id: 4, name: 'David', department: 'Sales' }// ]// }
Map对象会记住键的插入顺序。 这在某些场景下非常重要。
如何处理分组依据是复杂逻辑的情况？
当分组依据不仅仅是对象的某个属性，而需要进行一些复杂的计算时，可以将key参数设置为一个函数。 这个函数接收数组的每个元素作为参数，并返回分组的依据。
const products = [ { id: 1, name: 'Apple', price: 1.0 }, { id: 2, name: 'Banana', price: 0.5 }, { id: 3, name: 'Orange', price: 0.8 }, { id: 4, name: 'Grapes', price: 2.0 },];const groupedByPriceRange = groupBy(products, product => { if (product.price < 1.0) { return 'Cheap'; } else { return 'Expensive'; }});console.log(groupedByPriceRange);// 输出:// {// Cheap: [// { id: 2, name: 'Banana', price: 0.5 },// { id: 3, name: 'Orange', price: 0.8 }// ],// Expensive: [// { id: 1, name: 'Apple', price: 1.0 },// { id: 4, name: 'Grapes', price: 2.0 }// ]// }
如何处理分组后需要对每个分组进行进一步处理的情况？
有时候，分组仅仅是第一步，接下来可能需要对每个分组进行一些聚合操作，例如计算平均值、求和等。 可以在分组之后，使用Object.entries()方法将分组结果转换为键值对数组，然后使用map方法对每个分组进行处理。
const students = [ { name: 'Alice', grade: 'A', score: 90 }, { name: 'Bob', grade: 'B', score: 80 }, { name: 'Charlie', grade: 'A', score: 95 }, { name: 'David', grade: 'B', score: 85 },];const groupedByGrade = groupBy(students, 'grade');const averageScores = Object.entries(groupedByGrade).map(([grade, students]) => { const totalScore = students.reduce((sum, student) => sum + student.score, 0); const averageScore = totalScore / students.length; return { grade, averageScore };});console.log(averageScores);// 输出:// [// { grade: 'A', averageScore: 92.5 },// { grade: 'B', averageScore: 82.5 }// ]
性能考虑：哪种方法更高效？
通常来说，reduce方法在大多数情况下性能都比较好，因为它可以在一次遍历中完成分组。 forEach方法在某些情况下可能更易读，但性能差异通常可以忽略不计。 如果需要保持分组顺序，并且数据量不是特别大，Map对象也是一个不错的选择。 具体选择哪种方法，需要根据实际情况进行权衡。 如果对性能有极致要求，可以进行基准测试，选择最适合自己场景的方法。 此外，如果数组非常大，可以考虑使用Web Workers进行并行处理，以提高性能。
以上就是JavaScript中如何实现数组分组？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/153193.html
微信扫一扫 
支付宝扫一扫 
