JavaScript 中的数组分组:array.groupBy()

原文: https://dmitripavlutin.com/ja...

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

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

今天的主角是新的数组组提案(目前处于第 3 阶段),它引入了新的方法array.groupBy()array.groupByToMap(). 他们的polyfillscore-js库中可用。

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

1.array.groupBy ()

您有一个产品列表,其中每个产品都是一个具有 2 个属性的对象:namecategory

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

你如何groupByCategory从数组中得到一个products数组?

通常的方法是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) => { ... })products数组简化为按类别分组的产品对象。

虽然我确实认为array.reduce()方法有用且强大,但有时它的可读性并不是最好的。

因为对数据进行分组是一项经常发生的任务(GROUP BY从 SQL 中回忆起?),数组组提议引入了两种有用的方法: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 => {...}) 返回一个对象,其中每个属性的键作为类别名称,值作为包含相应类别产品的数组。

分组 usingproducts.groupBy()比 using 需要更少的代码并且更容易理解product.reduce()

array.groupBy(callback)接受一个使用 3 个参数调用的回调函数:当前数组项、索引和数组本身。callback应该返回一个字符串:您要在其中添加项目的组名。

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

2.array.groupByToMap ()

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

因此,如果您想将数据分组到一个Map中,您可以使用该方法array.groupByToMap()

array.groupByToMap(callback)工作原理完全一样array.groupBy(callback),只是它将项目分组为 Map而不是普通的 JavaScript 对象。

例如,按类别名称将 products 数组分组到一个地图中,执行如下:

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

三、结论

如果您想轻松地对数组中的项目进行分组(类似于GROUP BYSQL),那么欢迎使用新方法array.groupBy()array.groupByToMap().

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

array.groupBy()将项目组合成一个普通的 JavaScript 对象,同时array.groupByToMap()将它们组合成一个Map实例。


陈东民
2.1k 声望269 粉丝

坚持自我 纯粹的技术