JavaScript 中的数组分组：array.groupBy()

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实例。