JavaScript 中的数组分组:array.groupBy()
原文: https://dmitripavlutin.com/ja...
由于丰富的标准实用程序库,许多开发人员喜欢 Ruby 编程语言。例如,Ruby 中的数组有大量的方法。
JavaScript 也逐步丰富了其关于字符串和数组的标准库。例如,在之前的文章中,我描述了新的array.at()方法。
今天的主角是新的数组组提案(目前处于第 3 阶段),它引入了新的方法array.groupBy()
和array.groupByToMap()
. 他们的polyfills在core-js
库中可用。
让我们看看您如何从分组方法中受益。
1.array.groupBy ()
您有一个产品列表,其中每个产品都是一个具有 2 个属性的对象:name
和category
。
const products = [
{ name: 'apples', category: 'fruits' },
{ name: 'oranges', category: 'fruits' },
{ name: 'potatoes', category: 'vegetables' }
];
在上面的示例products
中是一个产品对象数组。
现在您必须对产品列表执行一个简单的操作——按类别对产品进行分组。
const groupByCategory = {
'fruits': [
{ name: 'apples', category: 'fruits' },
{ name: 'oranges', category: 'fruits' },
],
'vegetables': [
{ name: 'potatoes', category: 'vegetables' }
]
};
你如何groupByCategory
从数组中得到一个products
数组?
通常的方法是array.reduce()
使用正确的回调函数调用方法:
const groupByCategory = products.reduce((group, product) => {
const { category } = product;
group[category] = group[category] ?? [];
group[category].push(product);
return group;
}, {});
console.log(groupByCategory);
// {
// 'fruits': [
// { name: 'apples', category: 'fruits' },
// { name: 'oranges', category: 'fruits' },
// ],
// 'vegetables': [
// { name: 'potatoes', category: 'vegetables' }
// ]
// }
products.reduce((acc, product) => { ... })
将products
数组简化为按类别分组的产品对象。
虽然我确实认为array.reduce()
方法有用且强大,但有时它的可读性并不是最好的。
因为对数据进行分组是一项经常发生的任务(GROUP BY
从 SQL 中回忆起?),数组组提议引入了两种有用的方法:array.groupBy()
和array.groupByToMap()
.
以下是array.groupBy()
按类别创建相同分组的方法:
const groupByCategory = products.groupBy(product => {
return product.category;
});
console.log(groupByCategory);
// {
// 'fruits': [
// { name: 'apples', category: 'fruits' },
// { name: 'oranges', category: 'fruits' },
// ],
// 'vegetables': [
// { name: 'potatoes', category: 'vegetables' }
// ]
// }
products.groupBy(product => {...})
返回一个对象,其中每个属性的键作为类别名称,值作为包含相应类别产品的数组。
分组 usingproducts.groupBy()
比 using 需要更少的代码并且更容易理解product.reduce()
。
array.groupBy(callback)
接受一个使用 3 个参数调用的回调函数:当前数组项、索引和数组本身。callback
应该返回一个字符串:您要在其中添加项目的组名。
const groupedObject = array.groupBy((item, index, array) => {
// ...
return groupNameAsString;
});
2.array.groupByToMap ()
有时您可能想要使用 Map
而不是普通对象,因为Map
是它接受任何数据类型作为键,但纯对象仅限于字符串和符号。
因此,如果您想将数据分组到一个Map
中,您可以使用该方法array.groupByToMap()
。
array.groupByToMap(callback)
工作原理完全一样array.groupBy(callback)
,只是它将项目分组为 Map
而不是普通的 JavaScript 对象。
例如,按类别名称将 products 数组分组到一个地图中,执行如下:
const groupByCategory = products.groupByToMap(product => {
return product.category;
});
console.log(groupByCategory);
// Map([
// ['fruits', [
// { name: 'apples', category: 'fruits' },
// { name: 'oranges', category: 'fruits' },
// ]],
// ['vegetables', [
// { name: 'potatoes', category: 'vegetables' }
// ]
// ])
三、结论
如果您想轻松地对数组中的项目进行分组(类似于GROUP BY
SQL),那么欢迎使用新方法array.groupBy()
和array.groupByToMap()
.
这两个函数都接受一个回调,该回调应该返回必须插入当前项目的组的键。
array.groupBy()
将项目组合成一个普通的 JavaScript 对象,同时array.groupByToMap()
将它们组合成一个Map
实例。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。