10 neue JavaScript-Funktionen in ES2020, die Sie kennen sollten

Gute Nachrichten - die neuen ES2020-Funktionen sind jetzt fertiggestellt! Dies bedeutet, dass wir jetzt eine vollständige Vorstellung von den Änderungen in ES2020 haben, der neuen und verbesserten Spezifikation von JavaScript. Mal sehen, was diese Änderungen sind.

# 1: BigInt

BigInt, eine der am meisten erwarteten Funktionen in JavaScript, ist endlich da. Entwickler können damit in ihrem JS-Code eine viel größere Ganzzahldarstellung für die Datenverarbeitung für die Datenverarbeitung haben.

Derzeit können Sie in JavaScript maximal eine Ganzzahl als Ganzzahl speichern pow(2, 53) - 1. Mit BigInt können Sie jedoch sogar noch weiter gehen.  

Wie Sie oben sehen können, muss jedoch nganz am Ende der Nummer ein Anhang angehängt sein. Dies nbedeutet, dass dies ein BigInt ist und von der JavaScript-Engine (von der v8-Engine oder der verwendeten Engine) anders behandelt werden sollte.

Diese Verbesserung ist nicht abwärtskompatibel, da das herkömmliche Zahlensystem IEEE754 ist (das Zahlen dieser Größe einfach nicht unterstützen kann).

# 2: Dynamischer Import

Dynamische Importe in JavaScript bieten Ihnen die Möglichkeit, JS-Dateien dynamisch als Module in Ihrer Anwendung nativ zu importieren. Dies ist genau so, wie Sie es im Moment mit Webpack und Babel machen.

Mit dieser Funktion können Sie On-Demand-Anforderungscode, besser bekannt als Code-Splitting, ohne den Aufwand von Webpacks oder anderen Modulbündlern versenden. Sie können Code auch bedingt in einen if-else-Block laden, wenn Sie möchten.

Das Gute ist, dass Sie tatsächlich ein Modul importieren und somit niemals den globalen Namespace verschmutzen.

# 3: Nullish Coalescing

Nullish Coalescing bietet die Möglichkeit, nullishWerte anstelle von falseyWerten wirklich zu überprüfen . Was ist der Unterschied zwischen nullishund falseyWerten, könnte man fragen?

In JavaScript sind viele Werte falsey, wie leere Zeichenfolgen, die Zahl 0, undefined, null, false, NaN, und so weiter.

Oft möchten Sie jedoch überprüfen, ob eine Variable null ist - das heißt, wenn es entweder undefinedoder ist null, wenn eine Variable eine leere Zeichenfolge oder sogar einen falschen Wert hat.

In diesem Fall verwenden Sie den neuen Null-Koaleszenz-Operator. ??

Sie können deutlich sehen, wie der OR-Operator immer einen wahrheitsgemäßen Wert zurückgibt, während der nullish-Operator einen nicht-nulllish-Wert zurückgibt.

# 4: Optionale Verkettung

Mit der optionalen Verkettungssyntax können Sie auf tief verschachtelte Objekteigenschaften zugreifen, ohne sich Gedanken darüber machen zu müssen, ob die Eigenschaft vorhanden ist oder nicht. Wenn es existiert, großartig! Wenn nicht, undefinedwird zurückgegeben.

Dies funktioniert nicht nur bei Objekteigenschaften, sondern auch bei Funktionsaufrufen und Arrays. Super praktisch! Hier ist ein Beispiel:

# 5: Promise.allSettled

Die Promise.allSettledMethode akzeptiert eine Reihe von Versprechungen und wird erst aufgelöst, wenn alle erledigt sind - entweder aufgelöst oder abgelehnt.

Dies war vorher nicht nativ verfügbar, obwohl einige enge Implementierungen wie raceund allverfügbar waren. Dies bringt "Nur alle Versprechen ausführen - die Ergebnisse interessieren mich nicht" nativ zu JavaScript.

# 6: String # matchAll

matchAllist eine neue Methode, die dem StringPrototyp hinzugefügt wurde und sich auf reguläre Ausdrücke bezieht. Dies gibt einen Iterator zurück, der alle übereinstimmenden Gruppen nacheinander zurückgibt. Schauen wir uns ein kurzes Beispiel an:

# 7: globalThis

Wenn Sie plattformübergreifenden JS-Code geschrieben haben, der auf Node, in der Browserumgebung und auch in Web-Workern ausgeführt werden kann, fällt es Ihnen schwer, an das globale Objekt zu gelangen.

Dies liegt daran, dass es sich windowum Browser, globalKnoten und selfWebworker handelt. Wenn es mehr Laufzeiten gibt, ist das globale Objekt auch für sie unterschiedlich.

Sie hätten also Ihre eigene Implementierung haben müssen, um die Laufzeit zu erkennen und dann die richtige globale zu verwenden - das heißt, bis jetzt.

ES2020 bringt uns, globalThiswas sich immer auf das globale Objekt bezieht, egal wo Sie Ihren Code ausführen:

# 8: Modul-Namespace-Exporte

In JavaScript-Modulen konnte bereits folgende Syntax verwendet werden:

import * as utils from './utils.mjs'

Bisher gab es jedoch keine symmetrische exportSyntax:

export * as utils from './utils.mjs'

Dies entspricht dem Folgenden:

import * as utils from './utils.mjs' export { utils }

# 9: Gut definierte For-In-Reihenfolge

In der ECMA-Spezifikation wurde nicht angegeben, in welcher Reihenfolge ausgeführt werden for (x in y)  soll. Obwohl Browser zuvor selbst eine konsistente Reihenfolge implementiert haben, wurde diese in ES2020 offiziell standardisiert.

# 10: import.meta

Das import.metaObjekt wurde von der ECMAScript-Implementierung mit einem nullPrototyp erstellt.

Betrachten Sie ein Modul module.js:

Sie können über das import.metaObjekt auf Metainformationen zum Modul zugreifen :

console.log(import.meta); // { url: "file:///home/user/module.js" }

Es gibt ein Objekt mit einer urlEigenschaft zurück, die die Basis-URL des Moduls angibt. Dies ist entweder die URL, von der das Skript abgerufen wurde (für externe Skripte), oder die Dokumentbasis-URL des enthaltenen Dokuments (für Inline-Skripte).

Fazit

Ich mag die Konsistenz und Geschwindigkeit, mit der sich die JavaScript-Community entwickelt hat und weiterentwickelt. Es ist erstaunlich und wirklich wunderbar zu sehen, wie JavaScript von einer Sprache, die 10 Jahre später ausgebuht wurde, zu einer der stärksten, flexibelsten und vielseitigsten Sprachen aller Zeiten wurde.

Möchten Sie JavaScript und andere Programmiersprachen auf völlig neue Weise lernen? Besuchen Sie eine neue Plattform für Entwickler, an der ich gerade arbeite, um sie heute auszuprobieren!

Was ist Ihre Lieblingsfunktion von ES2020? Erzähl mir davon, indem du auf Twitter und Instagram twitterst und dich mit mir verbindest!

Dies ist ein Blog-Beitrag aus meinem Video zum selben Thema. Es würde mir die Welt bedeuten, wenn du ihr etwas Liebe zeigen könntest!