Top-level await ermöglicht Entwicklern, das await-Schlüsselwort außerhalb von asynchronen Funktionen zu verwenden. Es verhält sich wie eine große asynchrone Funktion, wodurch andere Module, die sie importieren, darauf warten, bevor sie beginnen, ihren Körper zu evaluieren.
Der Nullish-Coalescing-Vorschlag (??) fügt einen neuen Kurzschlussoperator hinzu, der für die Verarbeitung von Standardwerten gedacht ist.
Sie kennen möglicherweise bereits die anderen Kurzschlussoperatoren && und ||. Beide Operatoren arbeiten mit „truthy“ und „falsy“ Werten. Stellen Sie sich das Codebeispiel lhs && rhs vor. Wenn lhs () linke Seite) nicht wahrheitsgemäß ist, wird der Ausdruck zu lhs. Andernfalls wird er zu rhs () rechte Seite) ausgewertet. Das Gegenteil gilt für das Codebeispiel lhs || rhs. Wenn lhs wahrheitsgemäß ist, wird der Ausdruck zu lhs ausgewertet. Andernfalls wird er zu rhs ausgewertet.
Lange Reihen von Eigenschaftszugriffen in JavaScript können fehleranfällig sein, da jeder von ihnen den Wert null oder undefined (auch als „nullish“-Werte bekannt) ergeben könnte. Das Überprüfen der Existenz von Eigenschaften auf jedem Schritt verwandelt sich leicht in eine tief verschachtelte Struktur von if-Anweisungen oder eine lange if-Bedingung, die die Eigenschaftszugriffsreihe repliziert:
Mit dem JSON ⊂ ECMAScript Vorschlag wird JSON zu einer syntaktischen Teilmenge von ECMAScript. Wenn Sie überrascht sind, dass dies nicht bereits der Fall war, sind Sie nicht allein!
In ES2018 konnten ECMAScript-Stringliterale keine unescaped U+2028 LINE SEPARATOR und U+2029 PARAGRAPH SEPARATOR Zeichen enthalten, da sie selbst in diesem Kontext als Zeilenabschlusszeichen betrachtet wurden:
// Ein String, der ein rohes U+2028-Zeichen enthält.
const LS = '
';
// → ES2018: SyntaxError
// Ein String, der ein rohes U+2029-Zeichen enthält, erzeugt durch `eval`:
const PS = eval('"\u2029"');
// → ES2018: SyntaxError
Dies ist problematisch, weil JSON-Strings diese Zeichen enthalten können. Daher mussten Entwickler spezialisierte Nachbearbeitungslogik implementieren, wenn sie gültiges JSON in ECMAScript-Programme einbetten wollten, um mit diesen Zeichen umzugehen. Ohne solche Logik hätte der Code subtile Bugs oder sogar Sicherheitsprobleme enthalten können!
Sie kennen möglicherweise bereits die Intl.NumberFormat-API, da sie seit einiger Zeit in modernen Umgebungen unterstützt wird.
In ihrer grundlegendsten Form ermöglicht Intl.NumberFormat das Erstellen einer wiederverwendbaren Formatierer-Instanz, die lokalisationsspezifische Zahlenformatierung unterstützt. Genau wie andere Intl.*Format-APIs unterstützt eine Formatierer-Instanz sowohl eine format- als auch eine formatToParts-Methode:
Wenn Sie schon einmal JavaScript für die Verwendung in einem Webbrowser geschrieben haben, haben Sie möglicherweise window verwendet, um auf das globale this zuzugreifen. In Node.js haben Sie möglicherweise global verwendet. Wenn Sie Code geschrieben haben, der in beiden Umgebungen funktionieren muss, haben Sie möglicherweise festgestellt, welche von diesen verfügbar ist, und diese dann verwendet – aber die Liste der zu überprüfenden Bezeichner wächst mit der Anzahl der Umgebungen und Anwendungsfälle, die Sie unterstützen möchten. Das gerät schnell außer Kontrolle:
Im Allgemeinen werden Referenzen auf Objekte in JavaScript stark gehalten, was bedeutet, dass das Objekt nicht vom Garbage Collector gesammelt wird, solange eine Referenz darauf existiert.
const ref = { x: 42, y: 51 };
// Solange Sie Zugriff auf `ref` (oder eine andere Referenz auf
// dasselbe Objekt) haben, wird das Objekt nicht vom Garbage Collector gesammelt.
Momentan sind WeakMaps und WeakSets die einzigen Möglichkeiten, ein Objekt in JavaScript schwach zu referenzieren: Das Hinzufügen eines Objekts als Schlüssel zu einer WeakMap oder einem WeakSet verhindert nicht, dass es vom Garbage Collector gesammelt wird.
const wm = new WeakMap();
{
const ref = {};
const metaData = 'foo';
wm.set(ref, metaData);
wm.get(ref);
// → metaData
}
// Wir haben in diesem Block keinen Zugriff mehr auf `ref`, daher kann es
// jetzt vom Garbage Collector gesammelt werden, obwohl es ein Schlüssel in `wm` ist, auf den wir noch zugreifen können.
Angenommen, Sie haben ein Array von Hunden, wobei jeder Hund einen Namen und eine Bewertung hat. (Falls dies wie ein seltsames Beispiel klingt, sollten Sie wissen, dass es ein Twitter-Konto gibt, das sich genau darauf spezialisiert hat… Fragen Sie nicht!)
// Beachten Sie, dass das Array nach `name` alphabetisch vorsortiert ist.
const doggos = [
{ name: 'Abby', rating: 12 },
{ name: 'Bandit', rating: 13 },
{ name: 'Choco', rating: 14 },
{ name: 'Daisy', rating: 12 },
{ name: 'Elmo', rating: 12 },
{ name: 'Falco', rating: 13 },
{ name: 'Ghost', rating: 14 },
];
// Sortieren Sie die Hunde nach `rating` in absteigender Reihenfolge.
// (Dies aktualisiert `doggos` direkt.)
doggos.sort((a, b) => b.rating - a.rating);
JavaScript-Symbols können bei ihrer Erstellung eine Beschreibung erhalten:
const symbol = Symbol('foo');
// ^^^^^
Bisher war die einzige Möglichkeit, programmgesteuert auf diese Beschreibung zuzugreifen, indirekt über Symbol.prototype.toString():
const symbol = Symbol('foo');
// ^^^^^
symbol.toString();
// → 'Symbol(foo)'
// ^^^
symbol.toString().slice(7, -1); // 🤔
// → 'foo'
Der Code wirkt jedoch etwas magisch, ist nicht sehr selbsterklärend und verletzt das Prinzip „Absicht ausdrücken, nicht Implementierung“. Die obige Technik erlaubt es außerdem nicht, zwischen einem Symbol ohne Beschreibung (d.h. Symbol()) und einem Symbol mit leerem String als Beschreibung (d.h. Symbol('')) zu unterscheiden.
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.entriesDie 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.fromEntriesDie 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.