使用 JavaScript 进行数据分组最优雅的方式
大家好，我是 ConardLi ，今天我们一起来看一个数据分组的小技巧。
对数据进行分组，是我们在开发中经常会遇到的需求，使用 JavaScript 进行数据分组的方式也有很多种，但是由于没有原生方法的支持，我们自己实现的数据分组函数通常都比较冗长而且难以理解。
不过，告诉大家一个好消息，一个专门用来做数据分组的提案 Array.prototype.groupBy 已经到达 Stage 3 啦！
在看这个提案，之前，我们先来回顾下我们以前在 JavaScript 里是怎么分组的。
以前的方式
假设我们有下面一组数据：
const items = [
{
type: 'clothes',
value: '👔',
},
{
type: 'clothes',
value: '👕',
},
{
type: 'clothes',
value: '👗',
},
{
type: 'animal',
value: '🐷',
},
{
type: 'animal',
value: '🐸',
},
{
type: 'animal',
value: '🐒',
},
];
我们希望按照 type 分组成下面的格式：
const items = {
clothes: [
{
type: 'clothes',
value: '👔',
},
{
type: 'clothes',
value: '👕',
},
{
type: 'clothes',
value: '👗',
},
],
animal: [
{
type: 'animal',
value: '🐷',
},
{
type: 'animal',
value: '🐸',
},
{
type: 'animal',
value: '🐒',
},
],
};
我们可能会用到下面的写法：
for 循环
最直接而且容易理解的方法，就是代码有点多。
const groupedBy = {};
for (const item of items) {
if (groupedBy[item.type]) {
groupedBy[item.type].push(item);
} else {
groupedBy[item.type] = [item];
}
}
reduce
使用 Array.protoype.reduce 虽然语法看起来简单，但是太难读了。
items.reduce(
(acc, item) => ({
...acc,
[item.type]: [...(acc[item.type] ?? []), item],
}),
{},
);
我们稍微改造的容易理解一点，语法就跟上面的 for 循环差不多了：
items.reduce((acc, item) => {
if (acc[item.type]) {
acc[item.type].push(item);
} else {
acc[item.type] = [item];
}
return acc;
}, {});
filter
使用 Array.prototype.filter，代码看起来很容易阅读，但是性能很差，你需要对数组进行多次过滤，而且如果 type 属性值比较多的情况下，还需要做更多的 filter 操作。
const groupedBy = {
fruit: items.filter((item) => item.type === 'clothes'),
vegetable: items.filter((item) => item.type === 'animal'),
};
其他
如果你既不想用 reduce，还想用到函数式写法，你可能会写出下面的代码：
Object.fromEntries(
Array.from(new Set(items.map(({ type }) => type))).map((type) => [
type,
items.filter((item) => item.type === type),
]),
);
是不是很让人崩溃 🤯～
Array.prototype.groupBy
好了，如果使用 Array.prototype.groupBy，你只需要下面这一行代码：
items.groupBy(({ type }) => type);
groupBy 的回调中一共有三个参数：
参数1：数组遍历到的当前对象 参数2：index 索引 参数3：原数组
const array = [1, 2, 3, 4, 5];
// groupBy groups items by arbitrary key.
// In this case, we're grouping by even/odd keys
array.groupBy((num, index, array) => {
return num % 2 === 0 ? 'even': 'odd';
});
另外，你还可以用 groupByToMap，将数据分组为一个 Map 对象。
// groupByToMap returns items in a Map, and is useful for grouping using
// an object key.
const odd = { odd: true };
const even = { even: true };
array.groupByToMap((num, index, array) => {
return num % 2 === 0 ? even: odd;
});
// => Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }
参考：
https://github.com/tc39/proposal-array-grouping https://www.charpeni.com/blog/array-prototype-group-by-to-the-rescue
抖音前端正急缺人才，如果你想加入我们，欢迎加我微信和我联系。另外如果你想加入高质量前端交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。
文中如有错误，欢迎在留言区和我留言，如果这篇文章帮助到了你，欢迎点赞、在看和关注。你的点赞、在看和关注是对我最大的支持！
点赞、在看 支持一波～⬇️