Seit der Veröffentlichung des ECMAScript 2015-Standards (auch ES6 genannt) hat sich JavaScript grundlegend geändert und verbessert. Dies sind sehr gute Nachrichten für alle JS-Entwickler. Außerdem wird jetzt jedes Jahr eine neue Version von ECMAScript veröffentlicht. Vielleicht haben Sie der neuesten Version des Standards, die im Juni 2019 veröffentlicht wurde, nicht viel Aufmerksamkeit geschenkt. Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, möchte kurz und bündig über die Neuerungen von JavaScript und darüber berichten, was in der nächsten Version des ECMAScript-Standards zu erwarten ist.
Chancen, deren Vorschläge sich in der dritten Genehmigungsstufe (Stufe 3) befinden, werden hier erwähnt. Dies bedeutet, dass sie wahrscheinlich in der nächsten Version des ECMAScript-Standards erscheinen, dies kann jedoch nicht mit absoluter Sicherheit bestätigt werden.
In diesem Repository finden Sie Informationen zu Vorschlägen, die sich in verschiedenen Genehmigungsphasen befinden.
Funktionen ECMAScript 2019 (ES10)
Der ES10-Standard bietet
viele neue Funktionen. Hier werden wir nur einige davon betrachten. Nämlich ein paar neue Array-Methoden.
▍ Methode Array.prototype.flat
Mit dieser Methode können Sie Arrays, die andere Arrays enthalten, "flacher" machen und sie auf eine bestimmte Tiefenebene "komprimieren".
const array = [1, 2, [3, 4]]; array.flat();
Dies ist eine sehr nützliche Funktion, insbesondere in Fällen, in denen Sie mit verschachtelten Arrays arbeiten müssen. Wenn die Verschachtelungstiefe von Arrays in der Datenstruktur 1 überschreitet, kann ein einzelner Aufruf der
flat Methode das Array nicht vollständig "flach" machen. Diese Methode akzeptiert eine optionale Parametertiefe, mit der Sie angeben können, um wie viele Verschachtelungsebenen die Dimension des verarbeiteten Arrays reduziert werden soll.
Je tiefer das Array ist, desto mehr Rechenressourcen werden für die Verarbeitung benötigt. Bitte beachten Sie, dass IE und Edge diese Funktion nicht unterstützen.
▍ Array.prototype.flatMap-Methode
Diese Methode verarbeitet zuerst die Elemente des Arrays mit der übergebenen Funktion und konvertiert dann das Array in eine flache Struktur.
const arr = ["it's Sunny in", "", "California"]; arr.flatMap(x => x.split(" "));
Der Unterschied zwischen
flat und
flatMap besteht darin, dass Sie Ihre eigene Funktion an die
flatMap Methode übergeben können, mit der die Elemente des ursprünglichen Arrays konvertiert werden. Darüber hinaus „hebt“
flatMap im Gegensatz zu
flat die Elemente von Arrays nur um eine Ebene an. Diese Methode gibt ein neues Array zurück. In solchen Fällen kann es hilfreich sein, wenn Sie die Elemente eines Arrays irgendwie verarbeiten müssen, bevor Sie es „flach“ machen.
Neue JS-Funktionen in Phase 3 der Genehmigung
In der dritten Phase der Koordinierung gibt es viele interessante neue Vorschläge zur Erweiterung und Verbesserung der Sprache. Betrachten wir einige davon.
▍ Zifferntrennzeichen
Es ist Ihnen passiert: Schreiben Sie eine lange Zahl in eine Variable und zweifeln Sie an der korrekten Schreibweise? Der betreffende Satz erlaubt es uns, die Bits von Zahlen durch Unterstriche zu trennen. Dies erleichtert das Arbeiten mit Zahlen.
1_000_000_000
Nachdem jeder Entwickler diese Funktion akzeptiert hat, entscheidet er selbst, ob Entladungsabscheider verwendet werden sollen oder nicht. Eines ist jedoch sicher: Diese Funktion kann die mit der Berechnung der Ziffern großer Zahlen verbundenen Unannehmlichkeiten verringern.
▍Verwenden Sie, um auf der obersten Codeebene zu warten
Durch die Verwendung des Schlüsselworts
await auf der obersten Codeebene können Module als große asynchrone Funktionen fungieren. Aufgrund dieser Funktion können ECMAScript-Module das Erscheinen einiger Ressourcen erwarten. Dies führt dazu, dass andere Module, die sie importieren, warten, bis der Hauptteil der importierten Module betriebsbereit ist.
Der Grund für diese Funktion ist, dass beim Importieren eines Moduls, für das eine Funktion mit dem
async , die Ausgabe dieser Funktion
undefined .
Das folgende Beispiel zeigt zwei Dateien. Es kann
undefined output wenn die Funktion aufgerufen wird, bevor die durch die Versprechungen dargestellten Aufgaben abgeschlossen sind.
Alles wird in der
awaiting.js bis die
awaiting.js in
awaiting.js aufgelöst sind.
▍Betreiber ?? und Überprüfung der Werte nur auf Null und undefiniert
Vielleicht ist dies unter allen Stage 3-Angeboten das nützlichste. Wir müssen oft so etwas schreiben:
const obj = { name: 'James' }; const name = obj.name || 'Jane';
Wenn
obj.name durch einen falschen Wert dargestellt wird, erhält die Zeichenfolge
Jane name . Infolgedessen ist der
name nicht wie
undefined . Das Problem ist jedoch, dass eine leere Zeichenfolge in diesem Fall als falscher Wert wahrgenommen wird. Wenn dies berücksichtigt wird, sollte dieser Code wie folgt umgeschrieben werden:
const name = (obj.name && obj.name !== '') || 'Jane';
Es ist unpraktisch, die ganze Zeit so zu schreiben. Betreiber
?? (zwei Fragezeichen) erlaubt nur das Überprüfen von
null und
undefined Werten:
const response = { settings: { nullValue: null, height: 400, animationDuration: 0, headerText: '', showSplashScreen: false } }; const undefinedValue = response.settings.undefinedValue ?? 'some other default';
▍Bediener ?. und optionale Ketten
Dieser Vorschlag ähnelt dem gerade überprüften und kombiniert
null und
undefined Prüfungen. Es ist bekannt, dass Benutzer von TypeScript
an dieser Funktion
interessiert sind .
Betrachten Sie ein Beispiel:
const city = country && country.city;
Um zum Stadteigentum eines Landobjekts zu gelangen, müssen Sie das Vorhandensein des Landobjekts und das Vorhandensein des Stadteigentums darin überprüfen.
Mit dem Operator
?. (Fragezeichen und Punkt) Dieser Code kann folgendermaßen konvertiert werden:
const city = country?.city;
Diese Funktion scheint in folgenden Situationen nützlich zu sein:
import { fetch } from '../yourFetch.js'; (async () => { const res = await fetch();
▍ Methode Promise.any
Die
Promise.any Methode akzeptiert ein
Promise.any Objekt, das Versprechungsobjekte enthält, und gibt eine Versprechung zurück, die erfolgreich aufgelöst wurde, wenn mindestens eines der an sie übergebenen Versprechungsobjekte erfolgreich aufgelöst wurde. Wenn alle Versprechen-Objekte abgelehnt werden, wird ein Array mit Informationen zu den Gründen für ihre Ablehnung zurückgegeben.
So sieht die Verwendung von
Promise.any mit dem async / await-Konstrukt aus:
try { const first = await Promise.any(promises);
Hier ist das Gleiche mit Versprechen umgesetzt:
Promise.any(promises).then( (first) => {
JavaScript verfügt bereits über
Promise.all ,
.allSettled und
.race , jedoch über eine ähnliche Methode.
any war nicht. Infolgedessen haben wir eine neue Möglichkeit, die die bestehenden ergänzt und sich in bestimmten Situationen als nützlich erweisen kann. Obwohl sich dieser
Vorschlag bereits in der dritten Genehmigungsphase befindet, wird er möglicherweise nicht in die nächste Ausgabe des ECMAScript-Standards aufgenommen, da zusätzliche Tests erforderlich sind.
Zusammenfassung
Es gibt viele interessante Vorschläge für die Entwicklung von JavaScript, die sich in der dritten Genehmigungsphase befinden. Es wird interessant sein, sie in den ES11- und ES12-Standards zu sehen. Natürlich ist es unwahrscheinlich, dass irgendjemand sie alle verwenden wird, aber einige von ihnen werden definitiv breite Anwendung finden und zur Steigerung der Qualität des JS-Codes beitragen.
Sehr geehrte Leser! Verwenden Sie bereits JavaScript-Funktionen, die fast für die nächste Version des Standards bereit sind?
