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 BYSQL），那么欢送应用新办法array.groupBy() 和array.groupByToMap().

这两个函数都承受一个回调，该回调应该返回必须插入以后我的项目的组的键。

array.groupBy()将项目组合成一个一般的 JavaScript 对象，同时 array.groupByToMap() 将它们组合成一个 Map 实例。