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进行并行处理，以提高性能。
