`Object.fromEntries`

Object.fromEntries ist eine nützliche Ergänzung zur eingebauten JavaScript-Bibliothek. Bevor erklärt wird, was es tut, hilft es, die bereits vorhandene API Object.entries zu verstehen.

Object.entries

Die Object.entries-API existiert schon seit einiger Zeit.

Für jedes Schlüssel-Wert-Paar in einem Objekt liefert Object.entries ein Array, bei dem das erste Element der Schlüssel und das zweite Element der Wert ist.

Object.entries ist besonders nützlich in Kombination mit for-of, da es ermöglicht, sehr elegant über alle Schlüssel-Wert-Paare in einem Objekt zu iterieren:

const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

for (const [key, value] of entries) {
  console.log(`Der Wert von ${key} ist ${value}.`);
}
// Ausgabe:
// Der Wert von x ist 42.
// Der Wert von y ist 50.

Leider gibt es keinen einfachen Weg, um aus dem Ergebnis von entries wieder ein äquivalentes Objekt zu erzeugen… bis jetzt!

Object.fromEntries

Die neue API Object.fromEntries führt das Umkehrverfahren von Object.entries durch. Dies erleichtert die Rekonstruktion eines Objekts basierend auf seinen Einträgen:

const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

const result = Object.fromEntries(entries);
// → { x: 42, y: 50 }

Ein üblicher Anwendungsfall ist das Transformieren von Objekten. Dies können Sie jetzt tun, indem Sie über deren Einträge iterieren und dann Methoden für Arrays verwenden, die Ihnen möglicherweise schon bekannt sind:

const object = { x: 42, y: 50, abc: 9001 };
const result = Object.fromEntries(
  Object.entries(object)
    .filter(([ key, value ]) => key.length === 1)
    .map(([ key, value ]) => [ key, value * 2 ])
);
// → { x: 84, y: 100 }

In diesem Beispiel filtern wir mit filter das Objekt, um nur Schlüssel der Länge 1 zu erhalten, das heißt, nur die Schlüssel x und y, nicht jedoch den Schlüssel abc. Wir verwenden dann map, um über die verbleibenden Einträge zu iterieren und ein aktualisiertes Schlüssel-Wert-Paar für jeden zurückzugeben. In diesem Beispiel verdoppeln wir jeden Wert, indem wir ihn mit 2 multiplizieren. Das Endergebnis ist ein neues Objekt mit nur den Eigenschaften x und y und den neuen Werten.

Objekte vs. Maps

JavaScript unterstützt auch Maps, die oft eine geeignetere Datenstruktur als reguläre Objekte sind. In Code, den Sie vollständig kontrollieren, könnten Sie daher Maps anstelle von Objekten verwenden. Aber als Entwickler können Sie nicht immer die Darstellung bestimmen. Manchmal stammen die Daten, die Sie verwenden, aus einer externen API oder einer Bibliotheksfunktion, die Ihnen ein Objekt anstelle einer Map gibt.

Object.entries machte es einfach, Objekte in Maps zu konvertieren:

const object = { language: 'JavaScript', coolness: 9001 };

// Das Objekt in eine Map umwandeln:
const map = new Map(Object.entries(object));

Der Umkehrfall ist genauso nützlich: Selbst wenn Ihr Code Maps verwendet, müssen Sie Ihre Daten möglicherweise irgendwann serialisieren, z. B. um sie in JSON zu konvertieren, um eine API-Anfrage zu senden. Oder vielleicht müssen Sie die Daten an eine andere Bibliothek übergeben, die ein Objekt anstelle einer Map erwartet. In diesen Fällen müssen Sie ein Objekt basierend auf den Map-Daten erstellen. Object.fromEntries macht dies trivial:

// Die Map zurück in ein Objekt umwandeln:
const objectCopy = Object.fromEntries(map);
// → { language: 'JavaScript', coolness: 9001 }

Mit sowohl Object.entries als auch Object.fromEntries in der Sprache können Sie jetzt problemlos zwischen Maps und Objekten konvertieren.

Warnung: Datenverlust beachten

Wenn Sie Maps wie im obigen Beispiel in einfache Objekte umwandeln, gibt es eine implizite Annahme, dass jeder Schlüssel eindeutig serialisiert wird. Wenn diese Annahme nicht zutrifft, kommt es zu Datenverlust:

const map = new Map([
  [{}, 'a'],
  [{}, 'b'],
]);
Object.fromEntries(map);
// → { '[object Object]': 'b' }
// Hinweis: Der Wert 'a' ist nicht mehr auffindbar, da beide Schlüssel
// zum gleichen Wert '[object Object]' serialisiert werden.

Vor der Verwendung von Object.fromEntries oder einer anderen Technik, um eine Map in ein Objekt umzuwandeln, stellen Sie sicher, dass die Schlüssel der Map eindeutige toString-Ergebnisse erzeugen.

Unterstützung für Object.fromEntries