凶猛了,JavaScript 新提案:Aray.groupBy()

发布日期:2022-08-07 17:03    点击次数:86

不少开发人员爱好 Ruby 编程言语,因为它具有雄厚的标准适用顺序库。譬如,Ruby中的数组有大量的编制。

不过,我们的JavaScript也在尽力,在字符串和数组方面缓缓雄厚了它的标准库。譬如,在之前的文章中,介绍新的 array.at() 编制。

来日诰日我们在来看新的数组组提案(而今处于第三阶段),它引入了新编制 array.groupby() 和array.groupbytomap() 。它们的 polyfills 文件可以或许在core-js 库中找到。

接着,我们来看下能从中学到些什么。

1. array.groupBy()

假设我们有一个产品列表,个中每个产品都是一个具有2个属性的工具: name 和 category。

const products = [   { name: 'apples', category: 'fruits' },   { name: 'oranges', category: 'fruits' },   { name: 'potatoes', category: 'vegetables' } ]; 

在上面的示例中,products 是一个产品工具数组。

而今,对产品列表执行一个俭朴的操作,将产品按类别分组。

const groupByCategory = {   'fruits': [     { name: 'apples', category: 'fruits' },      { name: 'oranges', category: 'fruits' },   ],   'vegetables': [     { name: 'potatoes', category: 'vegetables' }   ] }; 

怎么样从 products 数组中失去一个近似 groupByCategory 的数组?

平日的编制是运用array.reduce()来完成,以下所示:

const groupByCategory = products.reduce((group, product) => {   const { category } = product;   group[category] = group[category] ?? [];   group[category].push(product);   return group; }, {}); console.log(groupByCategory); // { //   'fruits': [ //     { name: 'apples', category: 'fruits' },  //     { name: 'oranges', category: 'fruits' }, //   ], //   'vegetables': [ //     { name: 'potatoes', category: 'vegetables' } //   ] // } 

products.reduce((acc, product) => { ... }) 将产品数组还原为一个按类别分组的产品工具。

array.reduce()编制有效且强盛,但偶尔它的可读性着实不是最佳的。

因为分组数据是罕见的事(从SQL中召回groupby ?),产品中心PRODUCT数组组提案引入了两个有效的编制:array. groupBy()和 array.groupByToMap()。

上面介绍怎么样运用 array.groupBy() 创立沟通的分类分组:

const groupByCategory = products.groupBy(product => {   return product.category; });  console.log(groupByCategory);   // { //   'fruits': [ //     { name: 'apples', category: 'fruits' },  //     { name: 'oranges', category: 'fruits' }, //   ], //   'vegetables': [ //     { name: 'potatoes', category: 'vegetables' } //   ] // } 

products.groupBy(product => {...}) 前去一个工具,个中每个属性的键是类又名称,值是对应类其它产品数组。

运用 products.groupBy() 分组比运用 product.reduce() 代码更少,更苟且理解。

array.groupBy(callback) 担任一个回调函数,该函数被调历时有3个参数:今后数组项、索引和数组本身。回调函数该当前去一个字符串:你想增加名目标组名。

const groupedObject = array.groupBy((item, index, array) => {   // ...   return groupNameAsString; }); 

2. array.groupByToMap()

偶尔你可以或许想运用 Map 而不是通俗工具。 Map 的益处是它可以或许担任任何数据范例作为键,但通俗工具只限于字符串和 symbol。

恩,假设你想把数据分组到一个Map中,你可运用 array.groupByToMap() 编制。

array.groupByToMap(callback)的事变编制与 array.groupBy(callback) 齐全同样,只是它将名目分组到 Map 中,而不是一个通俗的 JS 工具中。

譬如,将产品数组按类又名称分组到一个 ap 中,执行编制以下。

const groupByCategory = products.groupByToMap(product => {   return product.category; });  console.log(groupByCategory);   // Map([ //   ['fruits', [ //     { name: 'apples', category: 'fruits' },  //     { name: 'oranges', category: 'fruits' }, //   ]], //   ['vegetables', [ //     { name: 'potatoes', category: 'vegetables' } //   ] // ]) 
3.总结

假设你想轻松地对数组中的项举行分组(近似于SQL中的GROUP BY),那末迎策运用新编制array.groupBy() 和 array.groupByToMap()。

两个函数都担任一个回调函数,该回调函数应前去必须拔出今后项的组的键。

array.groupBy()将这些项分组为一个通俗的JavaScript工具,而array.groupByToMap()将它们分组为一个 Map 实例。

假设你想当即运用这些函数,那末运用 core-js 库供应的 polyfill。

作者:Ashish Lahoti 译者:前端小智 起原:dmitripavlutin 原文:https://dmitripavlutin.com/javascript-array-group/

本文转载自微信群众号「大迁世界」,可以或许经由过程下列二维码关注。转载本文请联络大迁世界群众号。

 



相关资讯