許多開發人員喜歡 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 ?)，數組組提案引入了兩個有用的方法: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/

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。