Wie kann ich Listeneinträge basierend auf einem gemeinsamen Attribut in JavaScript gruppieren?

1. Einführung in das Gruppieren von Listeneinträgen
2. Beispiel-Datensatz
3. Gruppieren mit reduce()
4. Alternative: Gruppieren mit einer Schleife
5. Moderne Gruppierung mit groupBy() (ECMAScript 2023)
6. Zusammenfassung

Einführung in das Gruppieren von Listeneinträgen

Wenn man eine Liste von Objekten hat und diese anhand eines gemeinsamen Attributs zusammenfassen möchte,

spricht man vom Gruppieren. Das Ziel ist es, alle Objekte mit dem gleichen Wert des ausgewählten Attributs

in einer Gruppe zu sammeln. In JavaScript gibt es verschiedene Wege, um das zu erreichen – klassisch mit einer Schleife, mit der Array.prototype.reduce() Methode oder mit neuen Funktionen wie Array.prototype.groupBy() (in modernen Umgebungen).

Beispiel-Datensatz

Angenommen, wir haben eine Liste von Personen, die jeweils ein Attribut namens city besitzen:

const people = ;

Gruppieren mit reduce()

Die Methode reduce() bietet eine elegante Möglichkeit, die Liste zu durchlaufen und gleichzeitig eine Zusammenfassung (ein Gruppierungsobjekt) aufzubauen:

const groupedByCity = people.reduce((groups, person) => { const city = person.city; if (!groups ) { groups = ; } groups .push(person); return groups;}, {});console.log(groupedByCity);

Wie funktioniert das?

Bei jedem Durchlauf prüft reduce, ob für den aktuellen city schon ein Schlüssel im groups-Objekt existiert. Falls nicht, wird ein leerer Array angelegt. Dann wird die Person in den entsprechenden Array eingefügt. Am Ende erhält man ein Objekt, bei dem die Schlüssel die Städtenamen sind und die Werte Arrays der Personen mit dieser Stadt.

Alternative: Gruppieren mit einer Schleife

Man kann das gruppieren auch manuell mit einer for...of-Schleife machen:

const grouped = {};for (const person of people) { const city = person.city; if (!grouped ) { grouped = ; } grouped .push(person);}console.log(grouped);

Das Prinzip ist hier genau dasselbe, nur ohne die funktionale Verkettung von reduce.

Moderne Gruppierung mit groupBy() (ECMAScript 2023)

Seit ECMAScript 2023 gibt es die neue Methode Array.prototype.groupBy(), die genau für solche Fälle gedacht ist:

const grouped = people.groupBy(person => person.city);console.log(grouped);

Wichtig: Diese Methode ist noch nicht in allen Browsern oder Node-Versionen verfügbar. Sollte sie unterstützt werden, ist sie jedoch der eleganteste Weg, um nach einem Attribut zu gruppieren.

Zusammenfassung

Das Gruppieren von Listeneinträgen in JavaScript basiert meistens darauf, ein neues Objekt zu erstellen, dessen Schlüssel die verschiedenen Werte des Attributs sind, nach dem gruppiert wird, und die Werte Arrays mit allen Einträgen, die zu diesem Schlüssel gehören. Klassisch wird das mit reduce() umgesetzt oder mit einer Schleife. Moderne Umgebungen können sich über groupBy() freuen, das diese Funktionalität direkt bereitstellt.