Introduction

Regrouper des éléments dans un tableau est quelque chose que vous faites tout le temps avec vos données. GroupBy de Lodash a souvent fait le travail, mais pourquoi utiliser une bibliothèque accessoire ?

JavaScript disposera désormais de méthodes de regroupement, ce qui rendra votre tâche plus facile. Object.groupBy et Map.groupBy sont de nouvelles méthodes qui faciliteront le regroupement et nous feront gagner du temps ou des dépendances.

Les deux méthodes groupBy font partie d'une proposition TC39 qui est actuellement à la phase 3. Cela signifie qu'il y a de fortes chances qu'elle devienne une norme.

Voyons comment ça marche.

Object.groupBy()

Vous avez une liste d'équipe, où chaque équipe est un objet ayant 2 propriétés : name et country.

const teams = [
  { name: "Liverpool", country: "England" },
  { name: "Manchester City", country: "England" },
  { name: "Paris SG", country: "France" },
  { name: "Real Madrid", country: "Spain" },
  { name: "Paris FC", country: "France" },
]

Maintenant, nous voulons regrouper les clubs par pays.

Object.groupBy renvoie un objet où les propriétés sont les noms des équipes et les valeurs sont des tableaux de pays d'équipe.

const groupByCountry = Object.groupBy(teams, (team) => {
  return teams.country
})

/* Result is:
{
  England: [
{ name: "Liverpool", country: "England" },
  { name: "Manchester City", country: "England" },
  ],
  France: [
   { name: "Paris FC", country: "France" },
   { name: "Paris SG", country: "France" }
  ],
  Spain: [
     { name: "Real Madrid", country: "Spain" }
  ]
}
*/

Le regroupement avec teams.groupBy() est vraiment facile à comprendre.

Object.groupBy(array, callback) accepte une fonction de rappel qui est invoquée avec 3 arguments : l'élément actuel du tableau, l'index et le tableau lui-même. La fonction de rappel doit renvoyer une chaîne : le nom du groupe où vous souhaitez ajouter l'élément.

Object.groupBy(items, callbackFn)

Map.groupBy()

Map.groupBy fait presque la même chose que Object.groupBy sauf qu'il renvoie une Map. Cela signifie que vous pouvez utiliser toutes les fonctions habituelles de Map. Cela signifie également que vous pouvez renvoyer n'importe quel type de valeur à partir de la fonction de rappel.

const data = [
  { name: "Sam", department: "IT" },
  { name: "Mehdi", department: "Marketing" },
  { name: "Oumar", department: "IT" },
]
const groupedByDepartment = Map.groupBy(data, (person) => person.department)

console.log(groupedByDepartment)

/* Result is:
Map({
 "IT": [{ name: 'Sam', department: 'IT' }, { name: 'Oumar', department: 'IT' }],
 "Marketing": [{ name: 'Mehdi', department: 'Marketing' }]
})
*/

Si vous souhaitez utiliser ces fonctions dès maintenant, utilisez le polyfill fourni par la bibliothèque core-js.