JavaScript 中的數組分組：array.groupBy()

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

由於豐富的標準實用程序庫，許多開發人員喜歡 Ruby 編程語言。例如，Ruby 中的數組有大量的方法。

JavaScript 也逐步豐富了其關於字符串和數組的標準庫。例如，在之前的文章中，我描述了新的array.at()方法。

今天的主角是新的數組組提案（目前處於第 3 階段），它引入了新的方法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' }
  ]
};

你如何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實例。