#yyds幹貨盤點#array.groupBy()

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);      

​

​products.reduce((acc, product) => { ... })​

​ 将産品數組還原為一個按類别分組的産品對象。

​

​array.reduce()​

​方法有用且強大，但有時它的可讀性并不是最好的。

因為分組資料是常見的事(從SQL中召回groupby ?)，數組組提案引入了兩個有用的方法:​

​array. groupBy()​

​和 ​

​array.groupByToMap()​

​。

下面介紹如何使用 ​

​array.groupBy()​

​ 建立相同的分類分組:

const groupByCategory = products.groupBy(product => {
  return product.category;
});

console.log(groupByCategory);       

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