前言

在JavaScript编程中，对数组进行分组是一项常见的任务。无论是根据特定属性将对象分组，还是按照某些规则重新组织数组元素，分组操作在日常开发中都是常见的。过去，为了实现这一目标，通常需要编写自定义的分组函数或者使用第三方库，比如lodash的groupBy函数。然而，好消息是，JavaScript正逐渐引入原生的分组方法，使我们的开发工作更加便捷。在本文中，我们将探讨JavaScript的新特性，即Object.groupBy和Map.groupBy，这两个新特性将使数组分组操作更加容易。

1、分组操作的背景

假设现在有一个包含人员信息的数组，每个人都有姓名和年龄属性，需求想要按照他们的年龄将他们分组。在以前的JavaScript中，可能需要编写自定义的分组函数，或者使用forEach或reduce等方法，来实现分组操作。如下：

const people = [
  { name: "Alice", age: 28 },
  { name: "Bob", age: 30 },
  { name: "Eve", age: 28 },
];


// 使用forEach进行分组
const peopleByAge = {};


people.forEach((person) => {
  const age = person.age;
  if (!peopleByAge[age]) {
    peopleByAge[age] = [];
  }
  peopleByAge[age].push(person);
});


// 使用reduce进行分组
const peopleByAge = people.reduce((acc, person) => {
  const age = person.age;
  if (!acc[age]) {
    acc[age] = [];
  }
  acc[age].push(person);
  return acc;
}, {});

运行结果：

图片

无论是使用forEach还是reduce，这些传统方法都需要手动检查分组键是否存在，如果不存在则创建一个空数组，然后将对象推入该数组中。上面的示例代码相对繁琐，可能需要不少工作量，尤其是在复杂的应用程序中。

下面就来Javascript即将支持的两种新特性是如何实现上述需求的→

2、Object.groupBy：原生分组方法

JavaScript新引入的Object.groupBy方法，使数据分组将变得更加简单和高效。使用Object.groupBy，可以按照指定的属性或规则将数组中的对象分组，而不需要手动管理分组过程。如下：

const people = [
  { name: "Alice", age: 28 },
  { name: "Bob", age: 30 },
  { name: "Eve", age: 28 },
];


const peopleByAge = Object.groupBy(people, (person) => person.age);

在控制台运行代码可以看到：

图片

如上图所示，使用Object.groupBy，只需提供一个回调函数，该回调函数将确定如何进行分组。在这种情况下，就可以按照人的年龄属性进行分组，这是不是比传统的手动分组方法要简单得多。

然而，需要注意的是，Object.groupBy返回一个无原型的对象，这意味着它不会继承Object.prototype上的任何属性或方法。因此，不能像通常那样使用hasOwnProperty等方法。此外，回调函数应返回一个字符串或符号，否则它将被强制转换为字符串。

console.log(peopleByAge.hasOwnProperty("28"));

图片

3、Map.groupBy：返回Map对象的分组方法

除了Object.groupBy，JavaScript还引入了Map.groupBy方法，该方法在执行分组操作时返回一个Map对象。与Object.groupBy相比，Map.groupBy提供了更多的灵活性，因为它允许返回任何类型的值，并且可以使用Map的各种方法来操作结果。如下：

const ceo = { name: "Jamie", age: 40, reportsTo: null };
const manager = { name: "Alice", age: 28, reportsTo: ceo };


const people = [
  ceo,
  manager,
  { name: "Bob", age: 30, reportsTo: manager },
  { name: "Eve", age: 28, reportsTo: ceo },
];


const peopleByManager = Map.groupBy(people, (person) => person.reportsTo);

运行结果：

图片

在这个示例中，我们根据人员的上级进行分组。一个重要的注意点是，要从Map中检索对象，必须使用相同的对象引用。如果传递的对象虽然内容相同但不是同一个对象，将无法从Map中检索到结果。

peopleByManager.get(ceo); 
// 返回与ceo对象相关的人员
peopleByManager.get({ name: "Jamie", age: 40, reportsTo: null }); 
// 返回undefined，因为这不是同一个对象

图片

Map.groupBy的优势在于，它返回一个Map对象，可以使用Map的方法来处理分组后的结果，这在某些场景下非常有用。

4、分组方法的兼容性

目前Object.groupBy和Map.groupBy是TC39提案的一部分，目前处于第3阶段。这表明它们有望成为JavaScript标准的一部分。在实际应用中，Chrome 117已经支持这两个方法，而Firefox Nightly则在实验标志下实现了它们。Safari也已经实现了类似的方法，可以期待它们会在不久的将来更新以提供更好的支持。

上面示例代码运行的浏览器版本是118.0.5993.89，故可以正确的打印出结果。

图片

5、疑问

你可能会疑惑为什么这些分组方法被实现为Object.groupBy和Map.groupBy，而不是Array.prototype.groupBy。这是因为在过去，有一些库曾经在Array.prototype上添加了不兼容的groupBy方法，这导致了一些兼容性问题，所以就没有在Array.prototype上实现。

总结

本文介绍了JavaScript中即将引入的Object.groupBy和Map.groupBy两种原生分组方法的使用。这些两种原生分组方法将填补JavaScript开发中的空白，使前端开发人员能够更轻松地进行分组操作，提高了编程效率和代码质量。希望本文能对你以后的工作有所帮助。

本文转载自微信公众号「黑土豆的前端博客 」，可以通过以下二维码关注。转载本文请联系公众号。