Map.groupBy()

Baseline 2024
Newly available

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Hinweis: In einigen Versionen von manchen Browsern wurde diese Methode als Array.prototype.groupToMap() implementiert. Aufgrund von Webkompatibilitätsproblemen wird sie jetzt als statische Methode implementiert. Sehen Sie in der Browser-Kompatibilitätstabelle nach, um weitere Details zu erfahren.

Die statische Methode Map.groupBy() gruppiert die Elemente eines gegebenen Iterables, indem sie die von einer bereitgestellten Callback-Funktion zurückgegebenen Werte verwendet. Die zurückgegebene Map verwendet die eindeutigen Werte der Testfunktion als Schlüssel, mit denen das Array der Elemente in jeder Gruppe abgerufen werden kann.

Die Methode ist besonders nützlich, wenn Elemente gruppiert werden, die mit einem Objekt verbunden sind, insbesondere wenn sich dieses Objekt im Laufe der Zeit ändern könnte. Wenn das Objekt unveränderlich ist, könnten Sie es stattdessen mit einem String darstellen und die Elemente mit Object.groupBy() gruppieren.

Probieren Sie es aus

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 9 },
  { name: "bananas", type: "fruit", quantity: 5 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 12 },
  { name: "fish", type: "meat", quantity: 22 },
];

const restock = { restock: true };
const sufficient = { restock: false };
const result = Map.groupBy(inventory, ({ quantity }) =>
  quantity < 6 ? restock : sufficient,
);
console.log(result.get(restock));
// [{ name: "bananas", type: "fruit", quantity: 5 }]

Syntax

js
Map.groupBy(items, callbackFn)

Parameter

items

Ein iterable (wie ein Array), dessen Elemente gruppiert werden.

callbackFn

Eine Funktion, die für jedes Element im Iterable ausgeführt wird. Sie sollte einen Wert (object oder primitive) zurückgeben, der die Gruppe des aktuellen Elements angibt. Die Funktion wird mit den folgenden Argumenten aufgerufen:

element

Das aktuelle verarbeitete Element.

index

Der Index des aktuellen verarbeiteten Elements.

Rückgabewert

Ein Map-Objekt mit Schlüsseln für jede Gruppe, die jeweils mit einem Array der Elemente der zugeordneten Gruppe verbunden sind.

Beschreibung

Map.groupBy() ruft eine bereitgestellte callbackFn-Funktion einmal für jedes Element in einem Iterable auf. Die Callback-Funktion sollte einen Wert zurückgeben, der die Gruppe des zugehörigen Elements angibt. Die von callbackFn zurückgegebenen Werte werden als Schlüssel für die von Map.groupBy() zurückgegebene Map verwendet. Jeder Schlüssel hat ein zugeordnetes Array, das alle Elemente enthält, für die die Callback die gleiche Rückgabe hatte.

Die Elemente in der zurückgegebenen Map und im ursprünglichen Iterable sind identisch (keine tiefen Kopien). Änderungen an der internen Struktur der Elemente werden sowohl im ursprünglichen Iterable als auch in der zurückgegebenen Map widergespiegelt.

Diese Methode ist nützlich, wenn Informationen gruppiert werden müssen, die einem bestimmten Objekt zugeordnet sind, das sich potenziell im Laufe der Zeit ändern könnte. Dies liegt daran, dass das Objekt auch nach Änderungen weiterhin als Schlüssel für die zurückgegebene Map funktioniert. Wenn Sie stattdessen eine String-Darstellung für das Objekt erstellen und diese als Gruppierungsschlüssel in Object.groupBy() verwenden, müssen Sie die Zuordnung zwischen dem ursprünglichen Objekt und seiner Darstellung pflegen, während sich das Objekt verändert.

Hinweis: Um auf die Gruppen in der zurückgegebenen Map zuzugreifen, müssen Sie das gleiche Objekt verwenden, das ursprünglich als Schlüssel in der Map verwendet wurde (obwohl Sie dessen Eigenschaften ändern können). Sie können kein anderes Objekt verwenden, das zufällig denselben Namen und dieselben Eigenschaften hat.

Map.groupBy liest den Wert von this nicht. Es kann auf beliebigen Objekten aufgerufen werden, und eine neue Map-Instanz wird zurückgegeben.

Beispiele

Verwendung von Map.groupBy()

Zuerst definieren wir ein Array mit Objekten, die ein Inventar verschiedener Lebensmittel darstellen. Jedes Lebensmittel hat einen type und eine quantity.

js
const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 9 },
  { name: "bananas", type: "fruit", quantity: 5 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 12 },
  { name: "fish", type: "meat", quantity: 22 },
];

Der folgende Code verwendet Map.groupBy() mit einer Pfeilfunktion, die die Objekt-Schlüssel restock oder sufficient zurückgibt, abhängig davon, ob das Element quantity < 6 hat. Das zurückgegebene result-Objekt ist eine Map, daher müssen wir get() mit dem Schlüssel aufrufen, um das Array zu erhalten.

js
const restock = { restock: true };
const sufficient = { restock: false };
const result = Map.groupBy(inventory, ({ quantity }) =>
  quantity < 6 ? restock : sufficient,
);
console.log(result.get(restock));
// [{ name: "bananas", type: "fruit", quantity: 5 }]

Beachten Sie, dass das Funktionsargument { quantity } ein einfaches Beispiel für die Objektdestrukturierungssyntax in Funktionsargumenten ist. Diese entpackt die quantity-Eigenschaft eines als Parameter übergebenen Objekts und weist sie einer Variablen namens quantity im Funktionskörper zu. Das ist eine sehr prägnante Art, die relevanten Werte von Elementen innerhalb einer Funktion zuzugreifen.

Der Schlüssel einer Map kann modifiziert und weiterhin verwendet werden. Sie können ihn jedoch nicht erneut erstellen und verwenden. Deshalb ist es wichtig, dass alles, was die Map verwenden muss, eine Referenz auf ihre Schlüssel behält.

js
// The key can be modified and still used
restock["fast"] = true;
console.log(result.get(restock));
// [{ name: "bananas", type: "fruit", quantity: 5 }]

// A new key can't be used, even if it has the same structure!
const restock2 = { restock: true };
console.log(result.get(restock2)); // undefined

Spezifikationen

Specification
ECMAScript® 2025 Language Specification
# sec-map.groupby

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
groupBy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Uses a non-standard name.
Has more compatibility info.

Siehe auch