4 Neue JavaScript-Funktionen

Dieses Kapitel listet die Neuerungen in ES2016–ES2022 in umgekehrter chronologischer Reihenfolge auf. Es beginnt nach ES2015 (ES6), da diese Veröffentlichung zu viele Funktionen enthält, um sie hier aufzulisten.

4.1 Neue Funktionen in ECMAScript 2022

ES2022 wird voraussichtlich im Juni 2022 zum Standard. Die folgenden Vorschläge haben Stufe 4 erreicht und sollen Teil dieses Standards werden

• Neue Klassenmitglieder

  • Eigenschaften (öffentliche Slots) können jetzt über
    • Instanzielle öffentliche Felder
    • Statische öffentliche Felder
  • Private Slots sind neu und können über
    • Private Felder (instanzielle private Felder und statische private Felder)
    • Private Methoden und Accessoren (nicht-statisch und statisch)
  • Statische Initialisierungsblöcke

• Prüfungen von privaten Slots („ergonomische Markenprüfungen für private Felder“): Der folgende Ausdruck prüft, ob obj einen privaten Slot #privateSlot hat

  #privateSlot in obj

• Top-Level await in Modulen: Wir können await jetzt auf der obersten Ebene von Modulen verwenden und müssen nicht mehr in asynchrone Funktionen oder Methoden wechseln.

• error.cause: Error und seine Unterklassen lassen uns jetzt angeben, welcher Fehler den aktuellen verursacht hat

  new Error('Something went wrong', {cause: otherError})

• Die Methode .at() von indexierbaren Werten ermöglicht das Lesen eines Elements an einem gegebenen Index (wie der Klammeroperator []) und unterstützt negative Indizes (im Gegensatz zum Klammeroperator).

  > ['a', 'b', 'c'].at(0)
  'a'
  > ['a', 'b', 'c'].at(-1)
  'c'

  Die folgenden „indexierbaren“ Typen haben die Methode .at()

  • string
  • Array
  • Alle Typed-Array-Klassen: Uint8Array usw.

• RegExp-Match-Indizes: Wenn wir einem regulären Ausdruck ein Flag hinzufügen, erzeugt die Verwendung davon Match-Objekte, die den Start- und Endindex jeder Gruppenerfassung aufzeichnen.

• Object.hasOwn(obj, propKey) bietet eine sichere Möglichkeit zu prüfen, ob ein Objekt obj eine eigene Eigenschaft mit dem Schlüssel propKey hat. Im Gegensatz zu Object.prototype.hasOwnProperty funktioniert es mit allen Objekten.

4.2 Neue Funktionen in ECMAScript 2021

Die folgenden Funktionen wurden in ECMAScript 2021 hinzugefügt

• String.prototype.replaceAll() ermöglicht das Ersetzen aller Vorkommen eines regulären Ausdrucks oder einer Zeichenkette (.replace() ersetzt nur das erste Vorkommen einer Zeichenkette)

  > 'abbbaab'.replaceAll('b', 'x')
  'axxxaax'

• Promise.any() und AggregateError: Promise.any() gibt ein Promise zurück, das erfüllt wird, sobald das erste Promise in einem Iterable von Promises erfüllt wird. Wenn es nur Ablehnungen gibt, werden diese in einem AggregateError zusammengefasst, der zum Ablehnungswert wird.

  Wir verwenden Promise.any(), wenn wir nur am ersten erfüllten Promise unter mehreren interessiert sind.

• Logische Zuweisungsoperatoren:

  a ||= b
  a &&= b
  a ??= b

• Unterstriche (_) als Trennzeichen in

  • Zahlenliteralen: 123_456.789_012
  • BigInt-Literalen: 6_000_000_000_000_000_000_000_000n

• WeakRefs: Diese Funktion liegt außerhalb des Rahmens dieses Buches. Weitere Informationen dazu finden Sie in seinem Vorschlag.

4.3 Neue Funktionen in ECMAScript 2020

Die folgenden Funktionen wurden in ECMAScript 2020 hinzugefügt

• Neue Modulfunktionen

  • Dynamische Imports über import(): Die normale import-Anweisung ist statisch: Wir können sie nur auf der obersten Ebene von Modulen verwenden und ihr Modul-Spezifizierer ist eine feste Zeichenkette. import() ändert das. Sie kann überall verwendet werden (einschließlich bedingter Anweisungen), und wir können ihr Argument berechnen.

  • import.meta enthält Metadaten für das aktuelle Modul. Seine erste weit verbreitete Eigenschaft ist import.meta.url, die eine Zeichenkette mit der URL der Datei des aktuellen Moduls enthält.

  • Namespace-Re-Export: Der folgende Ausdruck importiert alle Exporte des Moduls 'mod' in ein Namespace-Objekt ns und exportiert dieses Objekt.

    export * as ns from 'mod';

• Optionale Verkettung für Eigenschaftszugriffe und Methodenaufrufe. Ein Beispiel für optionale Verkettung ist

  value.?prop

  Dieser Ausdruck ergibt undefined, wenn value entweder undefined oder null ist. Andernfalls ergibt er value.prop. Diese Funktion ist besonders nützlich bei Verkettungen von Eigenschaftslesungen, wenn einige der Eigenschaften fehlen könnten.

• Nullish Coalescing Operator (??):

  value ?? defaultValue

  Dieser Ausdruck ist defaultValue, wenn value entweder undefined oder null ist, und andernfalls value. Dieser Operator ermöglicht es uns, einen Standardwert zu verwenden, wann immer etwas fehlt.

  Zuvor wurde der logische ODER-Operator (||) in diesem Fall verwendet, aber er hat hier Nachteile, da er den Standardwert zurückgibt, wann immer die linke Seite falsch ist (was nicht immer korrekt ist).

• BigInts – Integer beliebiger Präzision: BigInts sind ein neuer primitiver Typ. Sie unterstützen ganzzahlige Zahlen, die beliebig groß sein können (der Speicher dafür wächst bei Bedarf).

• String.prototype.matchAll(): Diese Methode wirft einen Fehler, wenn das Flag /g nicht gesetzt ist, und gibt ein Iterable mit allen Match-Objekten für eine gegebene Zeichenkette zurück.

• Promise.allSettled() empfängt ein Iterable von Promises. Es gibt ein Promise zurück, das erfüllt wird, sobald alle Eingabe-Promises abgewickelt sind. Der Erfüllungswert ist ein Array mit einem Objekt pro Eingabe-Promise – entweder einem von

  • { status: 'fulfilled', value: «Erfüllungswert» }
  • { status: 'rejected', reason: «Ablehnungswert» }

• globalThis bietet eine Möglichkeit, auf das globale Objekt zuzugreifen, die sowohl in Browsern als auch auf serverseitigen Plattformen wie Node.js und Deno funktioniert.

• for-in Mechanik: Diese Funktion liegt außerhalb des Rahmens dieses Buches. Weitere Informationen dazu finden Sie in seinem Vorschlag.

4.4 Neue Funktionen in ECMAScript 2019

Die folgenden Funktionen wurden in ECMAScript 2019 hinzugefügt

• Die Array-Methode .flatMap() funktioniert wie .map(), erlaubt aber dem Callback, Arrays mit null oder mehr Werten anstelle einzelner Werte zurückzugeben. Die zurückgegebenen Arrays werden dann verkettet und werden zum Ergebnis von .flatMap(). Anwendungsfälle umfassen

  • Gleichzeitiges Filtern und Mappen
  • Mappen einzelner Eingabewerte zu mehreren Ausgabewerten

• Die Array-Methode .flat() konvertiert verschachtelte Arrays in flache Arrays. Optional können wir ihr mitteilen, auf welcher Verschachtelungstiefe sie mit dem Abflachen aufhören soll.

• Object.fromEntries() erstellt ein Objekt aus einem Iterable von Entries. Jede Entry ist ein Array mit zwei Elementen, einem Eigenschaftsschlüssel und einem Eigenschaftswert.

• Zeichenkettenmethoden: .trimStart() und .trimEnd() funktionieren wie .trim(), entfernen aber Leerzeichen nur am Anfang oder nur am Ende einer Zeichenkette.

• Optionaler catch-Bindung: Wir können den Parameter einer catch-Klausel jetzt weglassen, wenn wir ihn nicht verwenden.

• Symbol.prototype.description ist ein Getter zum Lesen der Beschreibung eines Symbols. Zuvor war die Beschreibung im Ergebnis von .toString() enthalten, konnte aber nicht einzeln abgerufen werden.

Diese neuen ES2019-Funktionen liegen außerhalb des Rahmens dieses Buches

• JSON-Superset: Siehe 2ality Blogbeitrag.
• Gut geformtes JSON.stringify(): Siehe 2ality Blogbeitrag.
• Function.prototype.toString() Überarbeitung: Siehe 2ality Blogbeitrag.

4.5 Neue Funktionen in ECMAScript 2018

Die folgenden Funktionen wurden in ECMAScript 2018 hinzugefügt

• Asynchrone Iteration ist die asynchrone Version der synchronen Iteration. Sie basiert auf Promises

  • Bei synchronen Iterables können wir sofort auf jedes Element zugreifen. Bei asynchronen Iterables müssen wir await verwenden, bevor wir auf ein Element zugreifen können.
  • Bei synchronen Iterables verwenden wir for-of-Schleifen. Bei asynchronen Iterables verwenden wir for-await-of-Schleifen.

• Spreading in Objektliteralen: Durch die Verwendung von Spreading (...) innerhalb eines Objektliterals können wir die Eigenschaften eines anderen Objekts in das aktuelle kopieren. Ein Anwendungsfall ist die Erstellung einer flachen Kopie eines Objekts obj

  const shallowCopy = {...obj};

• Rest-Eigenschaften (Destrukturierung): Bei der Destrukturierung eines Objekts können wir jetzt die Rest-Syntax (...) verwenden, um alle zuvor nicht erwähnten Eigenschaften in einem Objekt zu erhalten.

  const {a, ...remaining} = {a: 1, b: 2, c: 3};
  assert.deepEqual(remaining, {b: 2, c: 3});

• Promise.prototype.finally() bezieht sich auf die finally-Klausel einer try-catch-finally-Anweisung – ähnlich wie die Promise-Methode .then() sich auf die try-Klausel und .catch() auf die catch-Klausel bezieht.

  Mit anderen Worten: Der Callback von .finally() wird unabhängig davon ausgeführt, ob ein Promise erfüllt oder abgelehnt wird.

• Neue Funktionen für reguläre Ausdrücke

  • Benannte Erfassungsgruppen von RegExp: Zusätzlich zum Zugriff auf Gruppen nach Nummer können wir sie jetzt benennen und nach Namen darauf zugreifen

    const matchObj = '---756---'.match(/(?<digits>[0-9]+)/)
    assert.equal(matchObj.groups.digits, '756');

  • RegExp Lookbehind-Assertionen ergänzen Lookahead-Assertionen

    • Positive Lookbehind: (?<=X) passt, wenn der aktuelle Ort von 'X' vorangestellt ist.
    • Negative Lookbehind: (?<!X) passt, wenn der aktuelle Ort nicht von '(?<!X)' vorangestellt ist.

  • s (dotAll)-Flag für reguläre Ausdrücke. Wenn dieses Flag aktiv ist, passt der Punkt auch Zeilenumbrüche (standardmäßig tut er das nicht).

  • RegExp Unicode-Eigenschafts-Escapes bieten uns mehr Möglichkeiten beim Abgleichen von Mengen von Unicode-Codepunkten – zum Beispiel

    > /^\p{Lowercase_Letter}+$/u.test('aüπ')
    true
    > /^\p{White_Space}+$/u.test('\n \t')
    true
    > /^\p{Script=Greek}+$/u.test('ΩΔΨ')
    true

• Template-Literal-Überarbeitung ermöglicht Text mit Backslashes in getaggten Templates, der in String-Literalen illegal ist – zum Beispiel

  windowsPath`C:\uuu\xxx\111`
  latex`\unicode`

4.6 Neue Funktionen in ECMAScript 2017

Die folgenden Funktionen wurden in ECMAScript 2017 hinzugefügt

• Asynchrone Funktionen (async/await) ermöglichen es uns, synchron aussehenden Code zu schreiben, um asynchronen Code zu schreiben.

• Object.values() gibt ein Array mit den Werten aller aufzählbaren schlüsselbasierten Eigenschaften eines gegebenen Objekts zurück.

• Object.entries() gibt ein Array mit den Schlüssel-Wert-Paaren aller aufzählbaren schlüsselbasierten Eigenschaften eines gegebenen Objekts zurück. Jedes Paar ist als Array mit zwei Elementen kodiert.

• String-Padding: Die Zeichenkettenmethoden .padStart() und .padEnd() fügen Padding-Text ein, bis die Empfänger lang genug sind

  > '7'.padStart(3, '0')
  '007'
  > 'yes'.padEnd(6, '!')
  'yes!!!'

• Nachgestellte Kommas in Funktionsparameterlisten und Aufrufen: Nachgestellte Kommas waren seit ES3 in Array-Literalen und seit ES5 in Objektliteralen erlaubt. Sie sind jetzt auch in Funktionsaufrufen und Methodenaufrufen erlaubt.

• Die folgenden beiden Funktionen liegen außerhalb des Rahmens dieses Buches

  • Object.getOwnPropertyDescriptors() (siehe „Deep JavaScript“)
  • Gemeinsamer Speicher und Atomics (siehe Vorschlag)

4.7 Neue Funktionen in ECMAScript 2016

Die folgenden Funktionen wurden in ECMAScript 2016 hinzugefügt

• Array.prototype.includes() prüft, ob ein Array einen gegebenen Wert enthält.

• Potenzierungsoperator (**):

  > 4 ** 2
  16

4.8 Quelle dieses Kapitels

Die Listen der ECMAScript-Funktionen wurden von der TC39-Seite über abgeschlossene Vorschläge übernommen.