原文

许多开发人员喜欢Ruby编程语言，因为它具有丰富的标准实用程序库。例如，Ruby中的数组有大量的方法。

JavaScript 也逐步丰富了其关于字符串和数组的标准库。例如，在以前的文章中，我描述了新的array.at()方法。

今天的主角是新的数组组提议(目前处于第三阶段)，它引入了新方法array. groupby()和array. groupbytomap()。https://github.com/zloirock/core-js#array-grouping。

让我们看看如何从分组方法中获益。

1. array.groupBy()

您有一个产品列表(products)，其中每个产品都是一个具有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' }
  ]
};

通常的作法：

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' }
//   ]
// }

下面使用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 =>{…})返回一个对象，其中每个属性的键为类别名，值为包含相应类别中的产品的数组。
使用products.groupBy()分组比使用product.reduce()需要更少的代码，更容易理解。
groupby (callback)接受一个回调函数，该函数由3个参数调用:当前数组项、索引和数组本身。回调函数应该返回一个字符串:您想要添加项目的组名。

2. array.groupByToMap()

有时，您可能希望使用Map而不是普通对象。Map的好处是它接受任何数据类型作为键，但普通对象仅限于字符串和符号。

因此，如果希望将数据分组到Map中，可以使用方法array.groupByToMap()。

groupbytomap (callback)的工作方式与array.groupBy(callback)完全一样，只是它将项目分组到Map中，而不是一个普通的JavaScript对象中。

例如，按照类别名称将产品数组分组到一个映射中，如下所示:

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' }
//   ]
// ])

打开栗子

结论

如果您想方便地对数组中的项进行分组(类似于SQL中的group BY)，那么欢迎使用新方法array. groupby()和array. groupbytomap()。

两个函数都接受一个回调函数，该回调函数应返回必须插入当前项的组的键。

array.groupBy()将这些项分组为一个普通的JavaScript对象，而array.groupByToMap()将它们分组为一个Map实例。

如果你想马上使用这些函数，那么使用core-js库提供的polyfill。

转载请注明：有爱前端 » JavaScript数组分组: array.groupBy()