---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

JavaScript数组分组: array.groupBy()

前端开发 蚂蚁 751℃ 0评论

原文

许多开发人员喜欢Ruby编程语言,因为它具有丰富的标准实用程序库。例如,Ruby中的数组有大量的方法。

JavaScript 也逐步丰富了其关于字符串和数组的标准库。例如,在以前的文章中,我描述了新的array.at()方法。

今天的主角是新的数组组提议(目前处于第三阶段),它引入了新方法array. groupby()array. groupbytomap()https://github.com/zloirock/core-js#array-grouping

让我们看看如何从分组方法中获益。

1. array.groupBy()

您有一个产品列表(products),其中每个产品都是一个具有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' }
  ]
};

通常的作法:

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' }
//   ]
// }

下面使用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()需要更少的代码,更容易理解。
groupby (callback)接受一个回调函数,该函数由3个参数调用:当前数组项、索引和数组本身。回调函数应该返回一个字符串:您想要添加项目的组名。

2. array.groupByToMap()

有时,您可能希望使用Map而不是普通对象。Map的好处是它接受任何数据类型作为键,但普通对象仅限于字符串和符号。

因此,如果希望将数据分组到Map中,可以使用方法array.groupByToMap()。

groupbytomap (callback)的工作方式与array.groupBy(callback)完全一样,只是它将项目分组到Map中,而不是一个普通的JavaScript对象中。

例如,按照类别名称将产品数组分组到一个映射中,如下所示:

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' }
//   ]
// ])

打开栗子

结论

如果您想方便地对数组中的项进行分组(类似于SQL中的group BY),那么欢迎使用新方法array. groupby()和array. groupbytomap()。

两个函数都接受一个回调函数,该回调函数应返回必须插入当前项的组的键。

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

如果你想马上使用这些函数,那么使用core-js库提供的polyfill。

转载请注明:有爱前端 » JavaScript数组分组: array.groupBy()

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情