前言

在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(数组, 字段名称);