? Endlich ist es draußen! Sie müssen keinen hässlichen Code mehr schreiben, um ein Array von Objekten nach einem bestimmten Wert eines Felds zu gruppieren!

Seit Ende 2023 gibt es eine offizielle statische Methode für Object namens groupBy(), die das für uns erledigt!
Es akzeptiert ein Iterable, beispielsweise ein Array, und eine Funktion, die für jedes Element ausgeführt wird und die „Kategorie“ dieses bestimmten Elements zurückgeben muss.
Die Methode gibt ein neues Objekt zurück, wobei jeder Schlüssel einer anderen Kategorie entspricht, die ein Array von Objekten enthält, die zu dieser bestimmten Kategorie gehören.

HINWEIS: Die Elemente im zurückgegebenen Objekt und im ursprünglichen Iterable sind identisch (keine tiefen Kopien!). Eine Änderung der internen Struktur der Elemente wird sich sowohl im ursprünglichen iterierbaren als auch im zurückgegebenen Objekt widerspiegeln.

Beispiel

Lassen Sie uns ein praktisches Beispiel geben, um zu sehen, wie einfach es ist, alle Ninja Turtles-Charaktere nach Alter zu gruppieren.

Das anfängliche Array

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' }
];

Der gute ALTE Weg (mit Reduzieren)

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

Der MODERNE Weg

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

Tipp: Verwenden Sie Map.groupBy(), wenn Sie eine Karte anstelle eines Objekts zurückgeben möchten

Das Ergebnis

{
  "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' }
  ]
}

Demo

???‍? Wie üblich habe ich ein einfaches Stackblitz-Projekt erstellt, um mit dem Code zu spielen.

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

ℹ Browser-Unterstützung: https://caniuse.com/mdn-javascript_builtins_object_groupby