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

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

JavaScript也一步步地丰富了它在字符串和数组方面的标准库。例如，在以前的文章中，我介绍了新的array.at()方法。

今天的主角是新的数组提案（目前处于第三阶段），它引入了新的方法array.groupBy() 和array.groupByToMap() 。它们的polyfills在core-js 库中可用。

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

1.array.groupBy()

你有一个产品列表，其中每个产品都是一个对象，有两个属性：name 和category 。

javascript

const products = [
  { name: 'apples', category: 'fruits' },
  { name: 'oranges', category: 'fruits' },
  { name: 'potatoes', category: 'vegetables' }
];

在上面的例子中，products 是一个产品对象的数组。

现在你必须对产品列表进行一个简单的操作--按类别对产品进行分组。

javascript

const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

你如何从products 数组中得到一个类似于groupByCategory 的数组？

通常的方法是通过调用带有正确回调函数的array.reduce() 方法。

javascript

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() 方法很有用，很强大，但有时它的可读性并不是最好的。

因为数据分组是一项经常发生的任务（还记得SQL中的GROUP BY 吗？），数组提议引入了两个有用的方法：array.groupBy() 和array.groupByToMap() 。

下面是你如何使用array.groupBy() 来创建相同的按类别分组。

javascript

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() 更容易理解。

array.groupBy(callback) 接受一个回调函数，该函数被调用时有3个参数：当前数组项目、索引和数组本身。callback 应该返回一个字符串：你想添加项的组名。

javascript


const groupedObject = array.groupBy((item, index, array) => {
  // ...
  return groupNameAsString;
});

2.array.groupByToMap()

有时你可能想使用一个Map ，而不是一个普通的对象。Map 的好处是，它可以接受任何数据类型作为键，但普通对象只限于字符串和符号。

因此，如果你想把数据分组到一个Map ，你可以使用方法array.groupByToMap() 。

array.groupByToMap(callback) 这个方法的工作原理与，只是它将项目分组到一个，而不是一个普通的JavaScript对象。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' }
//   ]
// ])

3.总结

如果你想轻松地对数组中的项目进行分组（类似于SQL中的GROUP BY ），那么欢迎使用新方法array.groupBy() 和array.groupByToMap() 。

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

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