首页 > 编程语言 >JavaScript 终于原生支持数组分组了!

JavaScript 终于原生支持数组分组了!

时间:2023-09-26 14:02:57浏览次数:52  
标签:原生 Object name age JavaScript 28 peopleByAge 分组 groupBy


在日常开发中,很多时候需要对数组进行分组,每次都要手写一个分组函数,或者使用lodash的groupBy函数。好消息是,JavaScript 现在正在引入全新的分组方法:Object.groupByMap.groupBy,以后再也不需要手写分组函数了,目前最新版本的 Chrome(117)已经支持了这两个方法!

以前的数组分组

假设有一个由表示人员的对象组成的数组,需要按照年龄进行分组。可以使用forEach循环来实现,代码如下:

const people = [

  { name: "Alice", age: 28 },

  { name: "Bob", age: 30 },

  { name: "Eve", age: 28 },

];



const peopleByAge = {};



people.forEach((person) => {

  const age = person.age;

  if (!peopleByAge[age]) {

    peopleByAge[age] = [];

  }

  peopleByAge[age].push(person);

});



console.log(peopleByAge);

输出结果如下:

{

  "28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}],

  "30": [{"name":"Bob","age":30}]

}

也可以使用reduce方法:

const peopleByAge = people.reduce((acc, person) => {

  const age = person.age;

  if (!acc[age]) {

    acc[age] = [];

  }

  acc[age].push(person);

  return acc;

}, {});

无论哪种方式,代码都略显繁琐。每次都要检查对象,看分组键是否存在,如果不存在,则创建一个空数组,并将项目添加到该数组中。

使用 Object.groupBy 分组

可以通过以下方式来使用新的Object.groupBy方法:

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

可以看到,代码非常简洁!

不过需要注意,使用Object.groupBy方法返回一个没有原型(即没有继承任何属性和方法)的对象。这意味着该对象不会继承Object.prototype上的任何属性或方法,例如hasOwnPropertytoString等。虽然这样做可以避免意外覆盖Object.prototype上的属性,但也意味着不能使用一些与对象相关的方法。

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

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

// TypeError: peopleByAge.hasOwnProperty is not a function

在调用Object.groupBy时,传递给它的回调函数应该返回一个字符串或 Symbol 类型的值。如果回调函数返回其他类型的值,它将被强制转换为字符串。

在这个例子中,回调函数返回的是一个数字类型的age属性值,但由于Object.groupBy方法要求键必须是字符串或 Symbol 类型,所以该数字会被强制转换为字符串类型。

console.log(peopleByAge[28]);

// => [{"name":"Alice","age":28}, {"name":"Eve","age":28}]

console.log(peopleByAge["28"]);

// => [{"name":"Alice","age":28}, {"name":"Eve","age":28}]

使用 Map.groupBy 分组

Map.groupByObject.groupBy几乎做的是相同的事情,只是返回的结果类型不同。Map.groupBy返回一个Map对象,而不是像Object.groupBy返回一个普通的对象。、

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

// => [{ name: "Alice", age: 28, reportsTo: ceo }, { name: "Eve", age: 28, reportsTo: ceo }]

peopleByManager.get({ name: "Jamie", age: 40, reportsTo: null });

// => undefined

在上面的例子中,如果尝试使用与ceo对象类似的对象作为键去访问Map中的项,由于这个对象与之前存储在Map中的ceo对象不是同一个对象,所以无法检索到对应的值。

浏览器支持

这两个groupBy方法是 proposal-array-grouping 提案提出的,该提案目前处于第3阶段,预计会在 2024 年成为正式标准。

9 月 12 日,Chrome 117发布,该版本支持了这两个方法。Firefox Nightly 在一个标志后已经实现了这两个方法。Safari已经以不同的名称实现了这些方法。由于这些方法在 Chrome 中可用,这意味着它们已经在V8中被实现,所以下一次V8更新时它们将在Node中可用。

为什么要使用静态方法?

你可能会想,为什么这个功能被实现为Object.groupBy而不是Array.prototype.groupBy。根据提案,有一个库曾经用不兼容的groupBy方法对Array.prototype进行了修改。在考虑为Web新增API时,向后兼容性非常重要。几年前,在尝试实现Array.prototype.flatten时就出现了一个称为SmooshGate的事件。

使用静态方法实际上对未来的可扩展性更好。当RecordsTuples提案实现时,可以添加一个Record.groupBy方法,用于将数组分组为不可变记录。

简而言之,使用静态方法可以更好地保持向后兼容性,并提供更好的扩展性,以便在未来添加更多功能和数据结构。

JavaScript 正在填补这些空白,并使我们的开发更简单。目前,lodash.groupBy每周的 npm 下载量在 150 万至 200 万次之间,当所有浏览器都支持该方法之后,就不再需要引入lodash.groupBy 库了!

标签:原生,Object,name,age,JavaScript,28,peopleByAge,分组,groupBy
From: https://blog.51cto.com/u_14082075/7608023

相关文章

  • 无涯教程-JavaScript - STANDARDIZE函数
    描述STANDARDIZE函数从以均值和standard_dev为特征的分布返回归一化值。语法STANDARDIZE(x,mean,standard_dev)争论Argument描述Required/OptionalXThevalueyouwanttonormalize.RequiredMeanThearithmeticmeanofthedistribution.RequiredStandard_de......
  • 无涯教程-JavaScript - STDEV.P函数
    描述STDEV.P函数根据作为参数给出的总体(忽略逻辑值和文本)来计算标准差。语法STDEV.P(number1,[number2]...)争论Argument描述Required/OptionalNumber1Thefirstnumberargumentcorrespondingtoapopulation.RequiredNumber2...编号参数2到254对应于总体......
  • 华为3场重磅主题演讲先睹为快,顶级云原生&开源盛会即刻出发
    ......
  • 无涯教程-JavaScript - RSQ函数
    描述RSQ函数通过known_y和known_x中的数据点返回皮尔逊乘积矩相关系数的平方。语法RSQ(known_y's,known_x's)争论Argument描述Required/OptionalKnown_y'sAnarrayorrangeofdatapoints.RequiredKnown_x'sAnarrayorrangeofdatapoints.RequiredNotes......
  • 使用JavaScript实现无限滚动的方法
    前言在网页设计中,无限滚动是一种常见的交互方式,用户可持续地加载更多内容而无需刷新页面,提高用户体验。本文将介绍如何运用JavaScript实现无限滚动的效果,使网页能够自动加载更多数据,减轻用户加载新页的负担,为用户提供更好的访问体验。原理理解无限滚动的原理无限滚动的原理是当......
  • JavaScript——递归
    //递归:找到所有节点,并在每个节点上添加属性recursionMethod(data);constrecursionMethod=(array:any)=>{leti;for(iinarray){letarr=array[i];//是否存在children,存在则添加一个value属性,并赋值id//然后继续递归,查找arr.chi......
  • 【JavaScript】JavaScript、Java 计算两个日期时间内的每一周,不足一周的按照一周计算
    计算两个日期时间内的每一周,不足一周的按照一周计算JavaScriptfunctionsplitWeeks(startDate,endDate){letstart=newDate(startDate);letend=newDate(endDate);letweeks=[];letcurrentDate=newDate(start);letweekStart=newDate(currentDat......
  • 无涯教程-JavaScript - RANK.AVG函数
    描述RANK.AVG函数在提供的值数组中返回给定值的统计等级。如果列表中有重复值,则返回平均排名。语法RANK.AVG(number,ref,[order])争论Argument描述Required/OptionalNumberThenumberwhoserankyouwanttofind.RequiredRefAnarrayof,orareferenceto,a......
  • JavaScript函数的使用
    有关函数概念:匿名函数指的是没有函数名称的函数。作用:可以有效的避免全局变量的污染以及函数名的冲突问题。说明:既是函数表达式的另一种表示形式,又可通过函数声明的方式实现调用。函数语法varfun4=function(){console.log("我是匿名函数中封装的一段代码");......
  • 无涯教程-JavaScript - POISSON.DIST函数
    描述POISSON.DIST函数返回泊松分布。泊松分布的常见应用是预测特定时间的事件数。语法POISSON.DIST(x,mean,cumulative)争论Argument描述Required/OptionalXThenumberofevents.RequiredMeanTheexpectednumericvalue.RequiredCumulative确定返回的概率分......