Hier sind Beispiele für alles Neue in ECMAScript 2016, 2017 und 2018

von rajaraodv

Es ist schwer zu verfolgen, was in JavaScript (ECMAScript) neu ist. Und es ist noch schwieriger, nützliche Codebeispiele zu finden.

In diesem Artikel werde ich alle 18 Funktionen behandeln, die in den fertigen Vorschlägen des TC39 aufgeführt sind, die in ES2016, ES2017 und ES2018 (endgültiger Entwurf) hinzugefügt wurden, und sie mit nützlichen Beispielen zeigen.

Dies ist ein ziemlich langer Beitrag, sollte aber leicht zu lesen sein. Betrachten Sie dies als „Netflix Binge Reading.“ Am Ende verspreche ich Ihnen, dass Sie eine Menge Wissen über all diese Funktionen haben werden.

OK, gehen wir diese eins nach dem anderen durch.

Array.Prototyp.includes

includes ist eine einfache Instanzmethode für das Array und hilft dabei, leicht zu finden, ob sich ein Element im Array befindet (einschließlich NaN im Gegensatz zu indexOf).

ECMAScript 2016 oder ES7 – Array.Prototyp.beinhaltet()

Trivia: Die JavaScript-Spezifikation Leute wollten es contains nennen, aber das wurde anscheinend schon von Mootools benutzt, also benutzten sie includes .

Potenzierung infix operator

Mathematische Operationen wie Addition und Subtraktion haben Infix-Operatoren wie + bzw. -. Ähnlich wie bei ihnen wird der Infix-Operator ** häufig für Exponentenoperationen verwendet. In ECMAScript 2016 wurde ** anstelle von Math.pow eingeführt.

ECMAScript 2016 oder ES7 – ** Exponenten-Infix-Operator

Objekt.werte()

Object.values() ist eine neue Funktion, die Object.keys() ähnelt, aber alle Werte der eigenen Eigenschaften des Objekts mit Ausnahme aller Werte in der prototypischen Kette zurückgibt.

ECMAScript 2017 (ES8)- Objekt.werte()

Objekt.einträge()

Object.entries() bezieht sich auf Object.keys , aber anstatt nur Schlüssel zurückzugeben, werden sowohl Schlüssel als auch Werte auf Array-Weise zurückgegeben. Dies macht es sehr einfach, Objekte in Schleifen zu verwenden oder Objekte in Karten zu konvertieren.

Beispiel 1:

ECMAScript 2017 (ES8) – Objekt verwenden.einträge() in Schleifen

Beispiel 2:

ECMAScript 2017 (ES8) – Objekt verwenden.entries() zum Konvertieren des Objekts in Map

String padding

String wurden zwei Instanzmethoden hinzugefügt — String.prototype.padStart und String.prototype.padEnd —, mit denen entweder eine leere Zeichenfolge oder eine andere Zeichenfolge an den Anfang oder das Ende der ursprünglichen Zeichenfolge angehängt / vorangestellt werden können.

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

Dies ist praktisch, wenn wir Dinge in Szenarien wie Pretty Print Display oder Terminal print ausrichten möchten.

3.1 padStart Beispiel:

Im folgenden Beispiel haben wir eine Liste von Zahlen unterschiedlicher Länge. Wir möchten „0“ voranstellen, damit alle Elemente zu Anzeigezwecken die gleiche Länge von 10 Ziffern haben. Wir können padStart(10, '0') verwenden, um dies leicht zu erreichen.

ECMAScript 2017 – padStart Beispiel

3.2 padEnd Beispiel:

padEnd es ist wirklich praktisch, wenn wir mehrere Elemente unterschiedlicher Länge drucken und sie richtig ausrichten möchten.

Das folgende Beispiel ist ein gutes realistisches Beispiel dafür, wie padEnd , padStart und Object.entries alle zusammenkommen, um eine schöne Ausgabe zu erzeugen.

ECMAScript 2017 – padEnd, padStart und Objekt.Einträge Beispiel

3.3 ⚠️ padStart und padEnd auf Emojis und anderen Doppelbyte-Zeichen

Emojis und andere Doppelbyte-Zeichen werden mit mehreren Bytes Unicode dargestellt. Daher funktionieren padStart und padEnd möglicherweise nicht wie erwartet!⚠️

Beispiel: Angenommen, wir versuchen, die Zeichenfolge heart aufzufüllen, um 10 Zeichen mit dem ❤️ Emoji zu erreichen. Das Ergebnis wird wie folgt aussehen:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

Dies liegt daran, ❤️ ist 2 Codepunkte lang ('\u2764\uFE0F')! Das Wort heart selbst besteht aus 5 Zeichen, sodass wir nur noch insgesamt 5 Zeichen auffüllen müssen. Was also passiert, ist, dass JS zwei Herzen mit '\u2764\uFE0F' und das produziert ❤️❤️. Für das letzte verwendet es einfach das erste Byte des Herzens \u2764, das ❤

erzeugt, so dass wir am Ende mit: ❤️❤️❤heart

PS: Sie können diesen Link verwenden, um Unicode-Char-Konvertierungen zu überprüfen.

Objekt.getOwnPropertyDescriptors

Diese Methode gibt alle Details (einschließlich der Methoden getter getund setter set) für alle Eigenschaften eines bestimmten Objekts zurück. Die Hauptmotivation, dies hinzuzufügen, besteht darin, das flache Kopieren / Klonen eines Objekts in ein anderes Objekt zu ermöglichen, das auch Getter- und Setter-Funktionen im Gegensatz zu Object.assign kopiert.

Objekt.assign shallow kopiert alle Details außer Getter- und Setter-Funktionen des ursprünglichen Quellobjekts.

Das folgende Beispiel zeigt den Unterschied zwischen Object.assign und Object.getOwnPropertyDescriptors zusammen mit Object.defineProperties, um ein ursprüngliches Objekt Car in ein neues Objekt ElectricCar zu kopieren . Sie werden sehen, dass mit Object.getOwnPropertyDescriptors ,discount Getter- und Setter-Funktionen auch in das Zielobjekt kopiert werden.

VORHER…

Before – Objekt verwenden.zuweisen

NACH…

ECMAScript 2017 (ES8) – Objekt.getOwnPropertyDescriptors

Fügen Sie den Funktionsparametern nachgestellte Kommas hinzu

Dies ist ein kleines Update, mit dem wir nach dem letzten Funktionsparameter nachgestellte Kommas einfügen können. Warum? Um mit Tools wie git blame zu helfen, um sicherzustellen, dass nur neue Entwickler beschuldigt werden.

Das folgende Beispiel zeigt das Problem und die Lösung.

ECMAScript 2017 (ES 8) – Trailing comma im Funktionsparameter

Hinweis: Sie können Funktionen auch mit trailing commas aufrufen!

Async / Await

Dies ist bei weitem die wichtigste und nützlichste Funktion, wenn Sie mich fragen. Asynchrone Funktionen ermöglichen es uns, uns nicht mit der Callback-Hölle zu befassen und den gesamten Code einfach aussehen zu lassen.

Das Schlüsselwort async weist den JavaScript-Compiler an, die Funktion anders zu behandeln. Der Compiler pausiert, wenn er das Schlüsselwort await innerhalb dieser Funktion erreicht. Es wird davon ausgegangen, dass der Ausdruck after await ein Versprechen zurückgibt und wartet, bis das Versprechen aufgelöst oder abgelehnt wird, bevor Sie fortfahren.

Im folgenden Beispiel ruft die Funktion getAmount zwei asynchrone Funktionen getUser und getBankBalance auf. Wir können dies in promise tun, aber die Verwendung von async await ist eleganter und einfacher.

ECMAScript 2017 (ES 8) – Async Await grundlegendes Beispiel

6.1 Asynchrone Funktionen selbst geben ein Versprechen zurück.

Wenn Sie auf das Ergebnis einer asynchronen Funktion warten, müssen Sie die then -Syntax von Promise verwenden, um das Ergebnis zu erfassen.

Im folgenden Beispiel möchten wir das Ergebnis mit console.log protokollieren, jedoch nicht innerhalb von doubleAndAdd. Wir möchten also warten und die Syntax then verwenden, um das Ergebnis an console.log .

ECMAScript 2017 (ES 8) – Async Warten auf sich selbst gibt Versprechen zurück

6.2 Async/await parallel aufrufen

Im vorherigen Beispiel rufen wir await zweimal auf, aber jedes Mal warten wir eine Sekunde (insgesamt 2 Sekunden). Stattdessen können wir es parallelisieren, da a und b mit Promise.all nicht voneinander abhängig sind.

ECMAScript 2017 (ES 8) – Mit Versprechen.alles, um async / await zu parallelisieren

6.3 Fehlerbehandlung async/await-Funktionen

Es gibt verschiedene Möglichkeiten, Fehler zu behandeln, wenn async await .

Option 1 – Verwenden Sie try catch innerhalb der Funktion

ECMAScript 2017 — Verwenden Sie try catch innerhalb der async / await—Funktion

Option 2- Fangen Sie jeden await-Ausdruck ab

Da jeder await -Ausdruck ein Versprechen zurückgibt, können Sie Fehler in jeder Zeile abfangen, wie unten gezeigt.

ECMAScript 2017 – Verwenden Sie try catch jeden await Ausdruck

Option 3 – Fangen Sie die gesamte Async-await Funktion

ECMAScript 2017 – Fangen Sie die gesamte async / await Funktion am Ende

ECMAScript befindet sich derzeit im Final Draft und wird im Juni oder Juli 2018 erscheinen. Alle unten beschriebenen Funktionen befinden sich in Stufe 4 und werden Teil von ECMAScript 2018 sein.

1. Shared Memory und Atomics

Dies ist eine riesige, ziemlich erweiterte Funktion und eine Kernerweiterung für JS-Engines.

Die Hauptidee besteht darin, JavaScript eine Art Multithreading-Funktion zu verleihen, damit JS-Entwickler in Zukunft leistungsstarke, gleichzeitige Programme schreiben können, indem sie den Speicher selbst verwalten können, anstatt die JS-Engine den Speicher verwalten zu lassen.

Dies geschieht durch einen neuen Typ eines globalen Objekts namens SharedArrayBuffer, das im Wesentlichen Daten in einem gemeinsam genutzten Speicherplatz speichert. Diese Daten können also zwischen dem Haupt-JS-Thread und den Web-Worker-Threads geteilt werden.

Bisher mussten wir die Daten kopieren und mit postMessage an den anderen Thread senden, wenn wir Daten zwischen dem JS-Hauptthread und den Webworkern austauschen möchten . Nicht mehr!

Sie verwenden einfach SharedArrayBuffer und auf die Daten können sowohl der Hauptthread als auch mehrere Web-Worker-Threads sofort zugreifen.

Die gemeinsame Nutzung von Speicher zwischen Threads kann jedoch zu Race-Bedingungen führen. Um Race-Bedingungen zu vermeiden, wird das globale Objekt „Atomics“ eingeführt. Atomics bietet verschiedene Methoden zum Sperren des gemeinsam genutzten Speichers, wenn ein Thread seine Daten verwendet. Es bietet auch Methoden, um solche Daten in diesem gemeinsam genutzten Speicher sicher zu aktualisieren.

Es wird empfohlen, diese Funktion über eine Bibliothek zu verwenden, aber derzeit gibt es keine Bibliotheken, die auf dieser Funktion aufbauen.

Wenn Sie interessiert sind, empfehle ich zu lesen:

  1. Von Arbeitern zu Shared Memory – lucasfcosta
  2. Ein Cartoon-Intro zu SharedArrayBuffers – Lin Clark
  3. Shared Memory und Atomics – Dr. Axel Rauschmayer

2. Einschränkung für Tagged Template Literal entfernt

Zunächst müssen wir klären, was ein „Tagged Template literal“ ist, damit wir diese Funktion besser verstehen können.

In ES2015+ gibt es eine Funktion namens tagged template Literal, mit der Entwickler anpassen können, wie Zeichenfolgen interpoliert werden. Beispielsweise werden Zeichenfolgen standardmäßig wie folgt interpoliert…

Im getaggten Literal können Sie eine Funktion schreiben, um die fest codierten Teile des Zeichenfolgenliterals, z. B. , und die Ersetzungsvariablen, z. B. , als Parameter in eine benutzerdefinierte Funktion (z. B. greet) zu empfangen und zurückzugeben, was Sie von dieser benutzerdefinierten Funktion möchten.

Das folgende Beispiel zeigt, dass unsere benutzerdefinierte „Tag“ -Funktion greet die Tageszeit wie „Guten Morgen!“ „Guten Tag“, und so weiter in Abhängigkeit von der Zeit des Tages, um den String-Literal und gibt eine benutzerdefinierte Zeichenfolge.

Tag-Funktionsbeispiel, das benutzerdefinierte Zeichenfolgeninterpolation zeigt

Nachdem wir nun besprochen haben, was „getaggte“ Funktionen sind, möchten viele Benutzer diese Funktion in verschiedenen Domänen verwenden, z. B. im Terminal für Befehle und HTTP-Anforderungen zum Erstellen von URIs usw.

⚠️Das Problem mit dem Tagged String Literal

Wenn Sie also eine Tagged Funktion haben, die intern die Regeln einer anderen Domäne verwendet (z. B. die Regeln des Terminals), muss möglicherweise \ubla123abla verwendet werden, das nicht wie \u0049 oder \u{@F804} aussieht, wird ein Syntaxfehler angezeigt.

In ES2018 werden die Regeln gelockert, um solche scheinbar ungültigen Escapezeichen zuzulassen, solange die getaggte Funktion die Werte in einem Objekt mit einer „gekochten“ Eigenschaft (wobei ungültige Zeichen „undefiniert“ sind) und dann eine „rohe“ Eigenschaft (mit was auch immer Sie wollen).

„dotall“ Flag für regulären Ausdruck

Derzeit in RegEx, obwohl der Punkt(„.“) soll mit einem einzelnen Zeichen übereinstimmen, es stimmt nicht mit neuen Zeilenzeichen wie \n \r \f etc überein.

Zum Beispiel:

//Before/first.second/.test('first\nsecond'); //false

Diese Erweiterung ermöglicht es dem Punktoperator, jedes einzelne Zeichen abzugleichen. Um sicherzustellen, dass dies nichts kaputt macht, müssen wir beim Erstellen des regulären Ausdrucks das Flag \s verwenden, damit dies funktioniert.

//ECMAScript 2018/first.second/s.test('first\nsecond'); //true Notice: /s ?? 

Hier ist die gesamte API aus dem Vorschlagsdokument:

ECMAScript 2018 – Die Regex dotAll-Funktion ermöglicht das Abgleichen von sogar \ n über „.“ über / s Flag

RegExp Benannte Gruppe erfasst ?

Diese Erweiterung bringt eine nützliche RegExp-Funktion aus anderen Sprachen wie Python, Java und so weiter namens „Benannte Gruppen.“ Mit dieser Funktion können Entwickler, die RegExp schreiben, Namen (Bezeichner) im Format(?<name>...) für verschiedene Teile der Gruppe im RegExp bereitstellen. Sie können diesen Namen dann verwenden, um problemlos die gewünschte Gruppe zu finden.

4.1 Basic Benannte Gruppe Beispiel

ECMAScript 2018 – Regex benannte Gruppen Beispiel

4.2 Verwenden benannter Gruppen innerhalb der Regex selbst

Wir können das \k<group name> -Format verwenden, um die Gruppe innerhalb der Regex selbst zu referenzieren. Das folgende Beispiel zeigt, wie es funktioniert.

ECMAScript 2018 – Regex benannte Gruppen zurück Referenzierung über \k<Gruppenname>

4.3 Benannte Gruppen in Zeichenfolge verwenden.Prototyp.ersetzen Sie

Die benannte Gruppenfunktion wird jetzt in die Instanzmethode replace von String integriert. So können wir Wörter in der Zeichenfolge leicht austauschen.

Ändern Sie beispielsweise „Vorname, Nachname“ in „Nachname, Vorname“.

ECMAScript 2018 – Mit der Funktion benannte Gruppen von RegEx in der Funktion ersetzen

Rest-Eigenschaften für Objekte

Rest-Operator ... (drei Punkte) können wir Objekteigenschaften extrahieren, die noch nicht extrahiert wurden.

5.1 Mit rest können Sie nur die gewünschten Eigenschaften extrahieren

ECMAScript 2018 – Objektdestrukturierung über Rest

5.2 Noch besser, Sie können unerwünschte Elemente entfernen! ??

ECMAScript 2018 – Objektdestrukturierung über rest

Spread-Eigenschaften für Objekte

Spread-Eigenschaften sehen auch wie Rest-Eigenschaften mit drei Punkten aus ... Der Unterschied besteht jedoch darin, dass Sie mit spread neue Objekte erstellen (umstrukturieren).

Tipp: Der Spread-Operator wird auf der rechten Seite des Gleichheitszeichens verwendet. Der Rest wird auf der linken Seite des Gleichheitszeichens verwendet.

ECMAScript 2018 – Objektumstrukturierung über spread

RegExp Lookbehind Assertions

Dies ist eine Erweiterung der RegEx, mit der wir sicherstellen können, dass eine Zeichenfolge unmittelbar * vor * einer anderen Zeichenfolge vorhanden ist.

Sie können jetzt eine Gruppe (?<=…) (Fragezeichen, kleiner als, gleich) verwenden, um nach einer positiven Behauptung zu suchen.

Positive Assertion: Angenommen, wir möchten sicherstellen, dass das Zeichen # vor dem Wort winning (dh #winning) vorhanden ist, und möchten, dass die Regex nur die Zeichenfolge „winning“ zurückgibt. Hier ist, wie Sie es schreiben würden.

ECMAScript 2018 — (?<=…) for positive assertion

Negative Behauptung: Angenommen, wir möchten Zahlen aus Zeilen extrahieren, die €-Zeichen und keine $ -Zeichen vor diesen Zahlen haben.

ECMAScript 2018 — (?<!…) für negative Assertionen

RegExp Unicode Property Escapes

Es war nicht einfach, RegEx zu schreiben, um verschiedenen Unicode-Zeichen zu entsprechen. Dinge wie \w , \W , \d usw. stimmen nur mit englischen Zeichen und Zahlen überein. Aber was ist mit Zahlen in anderen Sprachen wie Hindi, Griechisch und so weiter?

Hier kommen Unicode-Eigenschaftsfluchten ins Spiel. Es stellt sich heraus, dass Unicode Metadateneigenschaften für jedes Symbol (Zeichen) hinzufügt und zum Gruppieren oder Charakterisieren verschiedener Symbole verwendet.

Zum Beispiel gruppiert die Unicode-Datenbank alle Hindi-Zeichen (विन्दी) unter einer Eigenschaft namens Script mit dem Wert Devanagari und einer anderen Eigenschaft namens Script_Extensions mit dem gleichen Wert Devanagari. So können wir nach Script=Devanagari suchen und alle Hindi-Zeichen erhalten.

Devanagari kann für verschiedene indische Sprachen wie Marathi, Hindi, Sanskrit usw. verwendet werden.

Ab ECMAScript 2018 können wir \p verwenden, um Zeichen zusammen mit {Script=Devanagari} zu maskieren, um all diesen indischen Zeichen zu entsprechen. Das heißt, wir können: \p{Script=Devanagari} in der RegEx verwenden, um alle Devanagari-Zeichen abzugleichen.

ECMAScript 2018 – zeigt \p
//The following matches multiple hindi character/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true //PS:there are 3 hindi characters h

In ähnlicher Weise gruppiert die Unicode-Datenbank alle griechischen Zeichen unter der Eigenschaft Script_Extensions (und Script) mit dem Wert Greek . So können wir mit Script_Extensions=Greek oder Script=Greek nach allen griechischen Zeichen suchen.

Das heißt, wir können: \p{Script=Greek} in der RegEx verwenden, um alle griechischen Zeichen abzugleichen.

ECMAScript 2018 – zeigt \p
//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

Darüber hinaus speichert die Unicode-Datenbank verschiedene Arten von Emojis unter den booleschen Eigenschaften Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, und Emoji_Modifier_Base mit Eigenschaftswerten als ‚true‘. So können wir nach allen Emojis suchen, indem wir einfach Emoji auswählen, um wahr zu sein.

Das heißt, wir können verwenden: \p{Emoji} ,\Emoji_Modifier und so weiter, um verschiedene Arten von Emojis abzugleichen.

Das folgende Beispiel macht alles klar.

ECMAScript 2018 – zeigt, wie \p für verschiedene Emojis verwendet werden kann

Schließlich können wir das Escape-Zeichen „P“ (\P) anstelle des kleinen p (\p) verwenden, um die Übereinstimmungen zu negieren.

  1. ECMAScript 2018 Vorschlag

Versprechen.Prototyp.endlich()

finally() ist eine neue Instanzmethode, die zu Promise hinzugefügt wurde. Die Hauptidee besteht darin, einen Rückruf nach resolve oder reject auszuführen, um die Bereinigung zu erleichtern. Der finally Callback wird ohne Wert aufgerufen und wird immer ausgeführt, egal was passiert.

Schauen wir uns verschiedene Fälle an.

ECMAScript 2018 – finally() im Auflösungsfall
ECMAScript 2018 – finally() in diesem Fall
ECMAScript 2018 – finally () in Fehler aus Promise Fall geworfen
ECMAScript 2018 – Fehler aus **catch** case

Asynchrone Iteration

Dies ist eine * äußerst * nützliche Funktion. Grundsätzlich ermöglicht es uns, Schleifen von asynchronem Code mit Leichtigkeit zu erstellen!

Diese Funktion fügt eine neue „for-await-of“ -Schleife hinzu, mit der wir asynchrone Funktionen aufrufen können, die Versprechen (oder Arrays mit einer Reihe von Versprechen) in einer Schleife zurückgeben. Das Coole ist, dass die Schleife darauf wartet, dass jedes Versprechen aufgelöst wird, bevor sie mit der nächsten Schleife fortfährt.

ECMAScript 2018 – Asynchroner Iterator über for-await-of

Das ist so ziemlich alles!

Wenn dies nützlich war, klicken Sie bitte auf den klatschen ? klicken Sie unten ein paar Mal, um Ihre Unterstützung zu zeigen! ⬇⬇⬇ ??

Meine anderen Beiträge

  1. Schauen Sie sich diese nützlichen ECMAScript 2015 (ES6) Tipps und Tricks an
  2. 5 JavaScript „Schlechte“ Teile, die in ES6 behoben sind
  3. Ist „Klasse“ in ES6 der neue „schlechte“ Teil?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.