Map.groupBy()

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

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

callbackFn

Eine Funktion, die fr jedes Element im Iterable ausgefhrt wird. Sie sollte einen Wert (objekt oder primitiv) zurckgeben, 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.

Rckgabewert

Ein Map-Objekt mit Schlsseln fr jede Gruppe, wobei jeder Schlssel einem Array zugewiesen ist, das die Elemente der zugehrigen Gruppe enthlt.

Beschreibung

Map.groupBy() ruft eine bereitgestellte callbackFn-Funktion einmal fr jedes Element in einem Iterable auf. Die Callback-Funktion sollte einen Wert zurckgeben, der die Gruppe des zugehrigen Elements angibt. Die von callbackFn zurckgegebenen Werte werden als Schlssel fr die von Map.groupBy() zurckgegebene Map verwendet. Jeder Schlssel hat ein zugeordnetes Array, das alle Elemente enthlt, fr die die Callback-Funktion denselben Wert zurckgegeben hat.

Die Elemente in der zurckgegebenen Map und dem ursprnglichen Iterable sind dieselben (keine tiefe Kopien). nderungen an der internen Struktur der Elemente werden sowohl im ursprnglichen Iterable als auch in der zurckgegebenen Map widergespiegelt.

Diese Methode ist ntzlich, wenn Sie Informationen gruppieren mssen, die mit einem bestimmten Objekt verknpft sind, das sich mglicherweise im Laufe der Zeit ndert. Dies liegt daran, dass das Objekt, selbst wenn es modifiziert wird, weiterhin als Schlssel zur zurckgegebenen Map funktionieren wird. Wenn Sie stattdessen eine String-Darstellung fr das Objekt erstellen und diese als Gruppierungsschlssel in Object.groupBy() verwenden, mssen Sie die Zuordnung zwischen dem ursprnglichen Objekt und seiner Darstellung beibehalten, whrend sich das Objekt ndert.

Map.groupBy liest den Wert von this nicht. Es kann auf jedem Objekt aufgerufen werden und eine neue Map-Instanz wird zurckgegeben.

Beispiele

Verwendung von Map.groupBy()

Zuerst definieren wir ein Array, das Objekte enthlt, die ein Inventar verschiedener Lebensmittel darstellen. Jedes Lebensmittel hat einen type und eine quantity.

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 verwendet Map.groupBy() mit einer Pfeilfunktion, die die Objektschlssel restock oder sufficient zurckgibt, abhngig davon, ob das Element quantity < 6 hat. Das zurckgegebene result-Objekt ist eine Map, sodass wir get() mit dem Schlssel aufrufen mssen, 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 fr die Destrukturierungssyntax fr Funktionsargumente ist. Dies packt die quantity-Eigenschaft eines als Parameter bergebenen Objekts aus und weist sie einer Variablen namens quantity im Funktionskrper zu. Dies ist eine sehr prgnante Mglichkeit, auf die relevanten Werte von Elementen innerhalb einer Funktion zuzugreifen.

Der Schlssel zu einer Map kann gendert und weiterhin verwendet werden. Sie knnen jedoch den Schlssel nicht neu erstellen und weiterhin verwenden. Aus diesem Grund ist es wichtig, dass alles, was die Map verwenden muss, einen Bezug zu seinen Schlsseln beibehlt.

// 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

Browser-Kompatibilitt

Siehe auch

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