Object.groupBy()
Baseline 2024Newly 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 bestimmten Browsern wurde diese Methode als Methode Array.prototype.group() implementiert. Aufgrund von Web-Kompatibilitätsproblemen wird sie jetzt als statische Methode implementiert. Überprüfen Sie die Browser-Kompatibilitätstabelle für Details.
Die statische Methode Object.groupBy() gruppiert die Elemente eines gegebenen Iterables entsprechend der von einer bereitgestellten Callback-Funktion zurückgegebenen Zeichenkettenwerte. Das zurückgegebene Objekt hat separate Eigenschaften für jede Gruppe, die Arrays mit den Elementen in der Gruppe enthalten.
Diese Methode sollte verwendet werden, wenn Gruppennamen durch Zeichenketten dargestellt werden können. Wenn Sie Elemente mit einem Schlüssel gruppieren müssen, der einen beliebigen Wert darstellt, verwenden Sie stattdessen 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 result = Object.groupBy(inventory, ({ quantity }) =>
quantity < 6 ? "restock" : "sufficient",
);
console.log(result.restock);
// [{ name: "bananas", type: "fruit", quantity: 5 }]
Syntax
Object.groupBy(items, callbackFn)
Parameter
items-
Ein iterierbares Objekt (wie ein
Array), dessen Elemente gruppiert werden sollen. callbackFn-
Eine Funktion, die für jedes Element im Iterable ausgeführt wird. Sie sollte einen Wert zurückgeben, der in einen Eigenschaften-Schlüssel (Zeichenkette oder Symbol) umgewandelt werden kann, der die Gruppe des aktuellen Elements anzeigt. Die Funktion wird mit den folgenden Argumenten aufgerufen:
Rückgabewert
Ein Null-Prototype-Objekt mit Eigenschaften für alle Gruppen, die jeweils einem Array zugeordnet sind, das die Elemente der zugehörigen Gruppe enthält.
Beschreibung
Object.groupBy() ruft eine bereitgestellte callbackFn-Funktion einmal für jedes Element in einem Iterable auf. Die Callback-Funktion sollte eine Zeichenkette oder ein Symbol zurückgeben (Werte, die keines dieser Typen sind, werden in Zeichenketten umgewandelt), die die Gruppe des zugeordneten Elements anzeigt. Die von callbackFn zurückgegebenen Werte werden als Schlüssel für das von Object.groupBy() zurückgegebene Objekt verwendet. Jeder Schlüssel hat ein zugeordnetes Array, das alle Elemente enthält, für die der Callback denselben Wert zurückgegeben hat.
Die Elemente im zurückgegebenen Objekt und im ursprünglichen Iterable sind dieselben (keine tiefen Kopien). Änderungen an der internen Struktur der Elemente werden sowohl im ursprünglichen Iterable als auch im zurückgegebenen Objekt widergespiegelt.
Beispiele
Verwendung von Object.groupBy()
Zuerst definieren wir ein Array, das Objekte repräsentiert, die ein Inventar verschiedener Nahrungsmittel darstellen. Jedes Lebensmittel hat einen type und eine quantity.
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
Der untenstehende Code gruppiert die Elemente nach dem Wert ihrer type-Eigenschaft.
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
Die Pfeilfunktion gibt einfach den type jedes Array-Elements jedes Mal zurück, wenn sie aufgerufen wird. Beachten Sie, dass das Funktionsargument { type } ein grundlegendes Beispiel für die Objektdestrukturierungssyntax für Funktionsargumente ist. Dies packt die type-Eigenschaft eines als Parameter übergebenen Objekts aus und weist sie einer Variablen namens type im Funktionskörper zu. Dies ist eine sehr knappe Möglichkeit, die relevanten Werte von Elementen innerhalb einer Funktion zuzugreifen.
Wir können auch Gruppen erstellen, die aus Werten in einer oder mehreren Eigenschaften der Elemente abgeleitet sind. Unten ist ein sehr ähnliches Beispiel dargestellt, das die Elemente in ok oder restock-Gruppen basierend auf dem Wert des quantity-Feldes einteilt.
function myCallback({ quantity }) {
return quantity > 5 ? "ok" : "restock";
}
const result2 = Object.groupBy(inventory, myCallback);
/* Result is:
{
restock: [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
ok: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
Spezifikationen
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-object.groupby |