JavaScript 中的陣列分組：array.groupBy()

undefined發表於2022-01-21
JavaScript陣列

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例項。

相關文章