#ApprisAujourd'hui : Object.groupBy()

? C'est enfin sorti ! Plus besoin d'écrire du code laid pour regrouper un tableau d'objets par une valeur spécifique d'un champ !

Depuis fin 2023, il existe une méthode statique officielle pour Object appelée groupBy() qui le fait pour nous !
Il accepte un Iterable, tel qu'un Array, et une fonction, qui est exécutée pour chaque élément et doit renvoyer la "catégorie" de cet élément spécifique.
La méthode renvoie un nouvel objet où chaque clé est une catégorie différente contenant un tableau d'objets appartenant à cette catégorie spécifique.

REMARQUE : les éléments de l'objet renvoyé et de l'itérable d'origine sont les mêmes (pas de copies complètes !). La modification de la structure interne des éléments sera reflétée à la fois dans l'itérable d'origine et dans l'objet renvoyé.

Exemple

Donnons un exemple pratique pour voir à quel point il est facile de regrouper tous les personnages des Tortues Ninja par âge.

Le tableau initial

const ninjaTurtlesCharacters = [
  { age: 16, name: 'Michelangelo' },
  { age: 16, name: 'Raffaello' },
  { age: 16, name: 'Donatello' },
  { age: 16, name: 'Leonardo' },
  { age: 91, name: 'Splinter' },
  { age: 25, name: 'Casey Jones' },
  { age: 25, name: 'April O\'Neil' }
];

La bonne vieille méthode (avec réduction)

const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
  (groupedPeople, item) => ({
    ...groupedPeople,
    [item.age]: groupedPeople[item.age]
      ? [...groupedPeople[item.age], item]
      : [item],
  }),
  {}
);

La manière MODERNE

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);

Astuce : utilisez Map.groupBy() si vous souhaitez renvoyer une carte au lieu d'un objet

Le résultat

{
  "16": [
    { age: 16, name: 'Michelangelo' },
    { age: 16, name: 'Raffaello' },
    { age: 16, name: 'Donatello' },
    { age: 16, name: 'Leonardo' }
  ],
  "25": [
    { age: 25, name: 'Casey Jones' },
    { age: 25, name: 'April O\'Neil' }
  ],
  "91": [
    { age: 91, name: 'Splinter' }
  ]
}

Démo

??‍? Comme d'habitude, j'ai créé un projet Stackblitz simple pour jouer avec le code.

? Documents : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ Prise en charge du navigateur : https://caniuse.com/mdn-javascript_builtins_object_groupby

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!