Die statische MethodeMap.groupBy() gruppiert die Elemente eines gegebenen Iterables mithilfe der Werte, die von einer bereitgestellten Callback-Funktion zurückgegeben werden. Die endgültig zurückgegebeneMap verwendet die eindeutigen Werte der Testfunktion als Schlüssel, die zum Abrufen des Arrays der Elemente in jeder Gruppe verwendet werden können.

Die Methode ist hauptsächlich nützlich, wenn Elemente gruppiert werden, die mit einem Objekt verknüpft sind, insbesondere wenn sich dieses Objekt im Laufe der Zeit ändern könnte. Wenn das Objekt unveränderlich ist, könnten Sie stattdessen einen String verwenden und die Elemente mitObject.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

Map.groupBy(items, callbackFn)

Parameter

items

Einiterable (wie einArray), dessen Elemente gruppiert werden.

callbackFn

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

element

Das aktuell verarbeitete Element.

index

Der Index des aktuell verarbeiteten Elements.

Rückgabewert

EinMap-Objekt mit Schlüsseln für jede Gruppe, wobei jeder Schlüssel einem Array zugewiesen ist, das die Elemente der zugehörigen Gruppe enthält.

Beschreibung

Map.groupBy() ruft eine bereitgestelltecallbackFn-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 voncallbackFn zurückgegebenen Werte werden als Schlüssel für die vonMap.groupBy() zurückgegebeneMap verwendet. Jeder Schlüssel hat ein zugeordnetes Array, das alle Elemente enthält, für die die Callback-Funktion denselben Wert zurückgegeben hat.

Die Elemente in der zurückgegebenenMap und dem ursprünglichen Iterable sind dieselben (keinetiefe Kopien). Änderungen an der internen Struktur der Elemente werden sowohl im ursprünglichen Iterable als auch in der zurückgegebenenMap widergespiegelt.

Diese Methode ist nützlich, wenn Sie Informationen gruppieren müssen, die mit einem bestimmten Objekt verknüpft sind, das sich möglicherweise im Laufe der Zeit ändert. Dies liegt daran, dass das Objekt, selbst wenn es modifiziert wird, weiterhin als Schlüssel zur zurückgegebenenMap funktionieren wird. Wenn Sie stattdessen eine String-Darstellung für das Objekt erstellen und diese als Gruppierungsschlüssel inObject.groupBy() verwenden, müssen Sie die Zuordnung zwischen dem ursprünglichen Objekt und seiner Darstellung beibehalten, während sich das Objekt ändert.

Map.groupBy liest den Wert vonthis nicht. Es kann auf jedem Objekt aufgerufen werden und eine neueMap-Instanz wird zurückgegeben.

Beispiele

Verwendung von Map.groupBy()

Zuerst definieren wir ein Array, das Objekte enthält, die ein Inventar verschiedener Lebensmittel darstellen. Jedes Lebensmittel hat einentype und einequantity.

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 unten stehende Code verwendetMap.groupBy() mit einer Pfeilfunktion, die die Objektschlüsselrestock odersufficient zurückgibt, abhängig davon, ob das Elementquantity < 6 hat. Das zurückgegebeneresult-Objekt ist eineMap, sodass wirget() mit dem Schlüssel aufrufen müssen, um das Array zu erhalten.

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 dieDestrukturierungssyntax für Funktionsargumente ist. Dies packt diequantity-Eigenschaft eines als Parameter übergebenen Objekts aus und weist sie einer Variablen namensquantity im Funktionskörper zu. Dies ist eine sehr prägnante Möglichkeit, auf die relevanten Werte von Elementen innerhalb einer Funktion zuzugreifen.

Der Schlüssel zu einerMap kann geändert und weiterhin verwendet werden. Sie können jedoch den Schlüssel nicht neu erstellen und weiterhin verwenden. Aus diesem Grund ist es wichtig, dass alles, was die Map verwenden muss, einen Bezug zu seinen Schlüsseln beibehält.

// The key can be modified and still usedrestock["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

Browser-Kompatibilität

Siehe auch

• Polyfill vonMap.groupBy incore-js
• es-shims polyfill vonMap.groupBy
• Leitfaden zu indizierten Sammlungen
• Array.prototype.reduce()
• Map()
• Object.groupBy()