<返回更多

Javascript支持数组分组(groupBy)的方法即将到来!

2023-11-03    黑土豆的前端博客
加入收藏

前言

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;
}, {});

运行结果:

Javascript支持数组分组(groupBy)的方法即将到来!图片

无论是使用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);

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

Javascript支持数组分组(groupBy)的方法即将到来!图片

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

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

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

Javascript支持数组分组(groupBy)的方法即将到来!图片

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);

运行结果:

Javascript支持数组分组(groupBy)的方法即将到来!图片

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

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

Javascript支持数组分组(groupBy)的方法即将到来!图片

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

4、分组方法的兼容性

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

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

Javascript支持数组分组(groupBy)的方法即将到来!图片

5、疑问

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

总结

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

关键词:Javascript      点击(11)
声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多Javascript相关>>>