当前位置:首页 > 数码 > 方法-groupBy-Javascript-简化数据整顿义务-行将引入数组分组 (方法的英文)

方法-groupBy-Javascript-简化数据整顿义务-行将引入数组分组 (方法的英文)

admin8个月前 (04-17)数码44

前言

在Script编程中,对数组启动分组是一项经常出现的义务。无论是依据特定属性将对象分组,还是依照某些规定从新组织数组元素,分组操作在日常开发中都是经常出现的。过去,为了成功这一指标,通常须要编写自定义的分组函数或许经常使用第三方库,比如lodash的groupBy函数。但是,好信息是,JavaScript正逐渐引入原生的分组方法,使咱们的开发上班愈加方便。在本文中,咱们将讨论JavaScript的新个性,即Object.groupBy和Map.groupBy,这两个新个性将使数组分组操作愈加容易。

1、分组操作的背景

假定如今有一个蕴含人员信息的数组,每团体都有姓名和年龄属性,需求想要依照他们的年龄将他们分组。在以前的JavaScript中,或许须要编写自定义的分组函数,或许经常使用forEach或reduce等方法,来成功分组操作。如下:

constpeople=[{name:"Alice",age:28},{name:"Bob",age:30},{name:"Eve",age:28},];//经常使用forEach启动分组constpeopleByAge={};people.forEach((person)=>{constage=person.age;if(!peopleByAge[age]){peopleByAge[age]=[];}peopleByAge[age].push(person);});//经常使用reduce启动分组constpeopleByAge=people.reduce((acc,person)=>{constage=person.age;if(!acc[age]){acc[age]=[];}acc[age].push(person);returnacc;},{});

运转结果:

图片

无论是经常使用forEach还是reduce,这些传统方法都须要手动审核分组键能否存在,假设不存在则创立一个空数组,而后将对象推入该数组中。上方的示例代码相对繁琐,或许须要不少上班量,尤其是在复杂的运行程序中。

上方就来Javascript行将支持的两种新个性是如何成功上述需求的→

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

JavaScript新引入的Object.groupBy方法,使数据分组将变得愈加方便和高效。经常使用Object.groupBy,可以依照指定的属性或规定将数组中的对象分组,而不须要手动治理分组环节。如下:

constpeople=[{name:"Alice",age:28},{name:"Bob",age:30},{name:"Eve",age:28},];constpeopleByAge=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的各种方法来操作结果。如下:

constceo={name:"Jamie",age:40,reportsTo:null};constmanager={name:"Alice",age:28,reportsTo:ceo};constpeople=[ceo,manager,{name:"Bob",age:30,reportsTo:manager},{name:"Eve",age:28,reportsTo:ceo},];constpeopleByManager=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规范的一局部。在实践运行中,Chrome117曾经支持这两个方法,而FirefoxNightly则在试验标记下成功了它们。Safari也曾经成功了相似的方法,可以等候它们会在不久的未来降级以提供更好的支持。

上方示例代码运转的阅读器版本是118.0.5993.89,故可以正确的打印出结果。

图片

5、不懂

你或许会纳闷为什么这些分组方法被成功为Object.groupBy和Map.groupBy,而不是Array.prototype.groupBy。这是由于在过去,有一些库曾经在Array.prototype上增加了不兼容的groupBy方法,这造成了一些兼容性疑问,所以就没有在Array.prototype上成功。

总结

本文引见了JavaScript中行将引入的Object.groupBy和Map.groupBy两种原生分组方法的经常使用。这些两种原生分组方法将填补JavaScript开发中的空白,使前端开发人员能够更轻松地启动分组操作,提高了编程效率和代码品质。宿愿本文能对你以后的上班有所协助。


方法

从原始数据的字节数组中获取缓冲图像问题,怎么解决

类型化数组是JavaScript操作二进制数据的一个接口。

这要从WebGL项目的诞生说起,所谓WebGL,就是指浏览器与显卡之间的通信接口,为了满足JavaScript与显卡之间大量的、实时的数据交换,它们之间的数据通信必须是二进制的,而不能是传统的文本格式。

比如,以文本格式传递一个32位整数,两端的JavaScript脚本与显卡都要进行格式转化,将非常耗时。这时要是存在一种机制,可以像C语言那样,直接操作字节,然后将4个字节的32位整数,以二进制形式原封不动地送入显卡,脚本的性能就会大幅提升。

类型化数组(Typed Array)就是在这种背景下诞生的。它很像C语言的数组,允许开发者以数组下标的形式,直接操作内存。有了类型化数组以后,JavaScript的二进制数据处理功能增强了很多,接口之间完全可以用二进制数据通信。

分配内存

类型化数组是建立在ArrayBuffer对象的基础上的。它的作用是,分配一段可以存放数据的连续内存区域。

var buf = new ArrayBuffer(32);

上面代码生成了一段32字节的内存区域。

ArrayBuffer对象的byteLength属性,返回所分配的内存区域的字节长度。

var buffer = new ArrayBuffer(32);// 32

如果要分配的内存区域很大,有可能分配失败(因为没有那么多的连续空余内存),所以有必要检查是否分配成功。

if ( === n) {// 成功} else {// 失败}

ArrayBuffer对象有一个slice方法,允许将内存区域的一部分,拷贝生成一个新的ArrayBuffer对象。

var buffer = new ArrayBuffer(8);var newBuffer = (0,3);

上面代码拷贝buffer对象的前3个字节,生成一个新的ArrayBuffer对象。slice方法其实包含两步,第一步是先分配一段新内存,第二步是将原来那个ArrayBuffer对象拷贝过去。

slice方法接受两个参数,第一个参数表示拷贝开始的字节序号,第二个参数表示拷贝截止的字节序号。如果省略第二个参数,则默认到原ArrayBuffer对象的结尾。

除了slice方法,ArrayBuffer对象不提供任何直接读写内存的方法,只允许在其上方建立视图,然后通过视图读写。

视图

视图的生成

ArrayBuffer作为内存区域,可以存放多种类型的数据。不同数据有不同的存储方式,这就叫做“视图”。目前,JavaScript提供以下类型的视图:

js按照数组中的某个字段进行分组

constgroupBy = (array, f) => {let groups = {};(function (o) {var group = (f(o));groups[group] = groups[group] || [];groups[group](o);});return (groups)(function (group) {return groups[group];});};const arrayGroupBy = (list, groupId) => {let sorted = groupBy(list, function (item) {return [item[groupId]];});return sorted;}; arrayGroupBy(数组, 字段名称);

免责声明:本文转载或采集自网络,版权归原作者所有。本网站刊发此文旨在传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题,请联系本网,我们将在第一时间删除。同时,本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证,请读者仅作参考,并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失,本网站不承担任何责任。

标签: Javascript

“方法-groupBy-Javascript-简化数据整顿义务-行将引入数组分组 (方法的英文)” 的相关文章

不等于-的要素-0.1-0.3-源代码具体解析-0.2-Javascript (不等于≠是不是不等式)

不等于-的要素-0.1-0.3-源代码具体解析-0.2-Javascript (不等于≠是不是不等式)

在Script中,浮点数计算或者会造成精度疑问,这就是为什么0.1+0.2不等于0.3的要素。这是由于JavaScript经常使用IEEE754规范来示意浮点数,而该规范经常使用二进制来示意小数。...