許多開發(fā)人員喜歡 Ruby 編程語言，因為它具有豐富的標(biāo)準(zhǔn)實用程序庫。例如，Ruby中的數(shù)組有大量的方法。

不過，我們的JavaScript也在努力，在字符串和數(shù)組方面逐步豐富了它的標(biāo)準(zhǔn)庫。例如，在以前的文章中，介紹新的 array.at() 方法。

今天我們在來看新的數(shù)組組提案(目前處于第三階段)，它引入了新方法 array.groupby() 和array.groupbytomap() 。它們的 polyfills 文件可以在core-js 庫中找到。

接著，我們來看下能從中學(xué)到些什么。

1. array.groupBy()

假設(shè)我們有一個產(chǎn)品列表，其中每個產(chǎn)品都是一個具有2個屬性的對象: name 和 category。

const products = [ 
  { name: 'apples', category: 'fruits' }, 
  { name: 'oranges', category: 'fruits' }, 
  { name: 'potatoes', category: 'vegetables' } 
]; 

在上面的示例中，products 是一個產(chǎn)品對象數(shù)組。

現(xiàn)在，對產(chǎn)品列表執(zhí)行一個簡單的操作，將產(chǎn)品按類別分組。

const groupByCategory = { 
  'fruits': [ 
    { name: 'apples', category: 'fruits' },  
    { name: 'oranges', category: 'fruits' }, 
  ], 
  'vegetables': [ 
    { name: 'potatoes', category: 'vegetables' } 
  ] 
}; 

如何從 products 數(shù)組中得到一個類似 groupByCategory 的數(shù)組?

通常的方法是使用array.reduce()來實現(xiàn)，如下所示：

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) => { ... }) 將產(chǎn)品數(shù)組還原為一個按類別分組的產(chǎn)品對象。

array.reduce()方法有用且強(qiáng)大，但有時它的可讀性并不是最好的。

因為分組數(shù)據(jù)是常見的事(從SQL中召回groupby ?)，數(shù)組組提案引入了兩個有用的方法:array. groupBy()和 array.groupByToMap()。

下面介紹如何使用 array.groupBy() 創(chuàng)建相同的分類分組:

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 => {...}) 返回一個對象，其中每個屬性的鍵是類別名稱，值是對應(yīng)類別的產(chǎn)品數(shù)組。

使用 products.groupBy() 分組比使用 product.reduce() 代碼更少，更容易理解。

array.groupBy(callback) 接受一個回調(diào)函數(shù)，該函數(shù)被調(diào)用時有3個參數(shù)：當(dāng)前數(shù)組項、索引和數(shù)組本身?；卣{(diào)函數(shù)應(yīng)該返回一個字符串：你想添加項目的組名。

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

2. array.groupByToMap()

有時你可能想使用 Map 而不是普通對象。 Map 的好處是它可以接受任何數(shù)據(jù)類型作為鍵，但普通對象只限于字符串和 symbol。

恩，如果你想把數(shù)據(jù)分組到一個Map中，你可以使用 array.groupByToMap() 方法。

array.groupByToMap(callback)的工作方式與 array.groupBy(callback) 完全一樣，只是它將項目分組到 Map 中，而不是一個普通的 JS 對象中。

例如，將產(chǎn)品數(shù)組按類別名稱分組到一個 ap 中，執(zhí)行方法如下。

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.總結(jié)

如果你想輕松地對數(shù)組中的項進(jìn)行分組(類似于SQL中的GROUP BY)，那么歡迎使用新方法array.groupBy() 和 array.groupByToMap()。

兩個函數(shù)都接受一個回調(diào)函數(shù)，該回調(diào)函數(shù)應(yīng)返回必須插入當(dāng)前項的組的鍵。

array.groupBy()將這些項分組為一個普通的JavaScript對象，而array.groupByToMap()將它們分組為一個 Map 實例。

如果你想馬上使用這些函數(shù)，那么使用 core-js 庫提供的 polyfill。

作者：Ashish Lahoti 譯者：前端小智 來源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-array-group/

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。