如何在JavaScript中进行groupBy（附代码示例）

groupBy函数是人们在其JavaScript代码库中使用Lodash的原因之一。在这里，我想给你一个简单的例子，说明如何在没有Lodash的情况下，通过使用JavaScript的reduce方法来实现groupBy。

假设我们有以下对象的数组，我们想通过属性（这里是颜色）对它们进行分组，得到以下输出：

const users = [  { name: 'Jim', color: 'blue' },  { name: 'Sam', color: 'blue' },  { name: 'Eddie', color: 'green' },];

const usersByColor = // TODO: implement groupBy

console.log(usersByColor);

// {
//   blue: [{
//     { name: 'Jim', color: 'blue' },
//     { name: 'Sam', color: 'blue' },
//   }],
//   green: [{ name: 'Eddie', color: 'green' }]
// }

我们可以在一个数组上使用JavaScript的reduce方法来遍历每一个项目：

const usersByColor = users.reduce((acc, value) => {
  // TODO: implement groupBy

  return acc;
}, {});

我们从一个空对象开始，作为这个reduce的回调函数的累加器（这里是acc ）。对于该函数的每一次迭代，我们都会返回改变后的（这里仍然没有改变）累加器。让我们来实现groupBy：

const usersByColor = users.reduce((acc, value) => {
  if (!acc[value.color]) {
    acc[value.color] = [];
  }

  // TODO: implement grouping

  return acc;
}, {});

如果累加器中没有为当前迭代值的颜色初始化的数组，我们为它创建一个分配在对象中的空数组，而颜色是关键。之后，我们可以假设有一个颜色的数组，并直接将值推送给它。

const usersByColor = users.reduce((acc, value) => {
  if (!acc[value.color]) {
    acc[value.color] = [];
  }

  acc[value.color].push(value);

  return acc;
}, {});

JavaScript中的groupBy就完成了。这里再一次对这两个步骤做了注释。

const usersByColor = users.reduce((acc, value) => {
  // Group initialization
  if (!acc[value.color]) {
    acc[value.color] = [];
  }

  // Grouping
  acc[value.color].push(value);

  return acc;
}, {});

基本上，我们从一个空对象开始，对于每一个迭代的值，我们协商是否需要根据这个对象中的属性（这里是颜色）分配一个新的数组。之后，我们将值推送到（新）数组中。