div>
S6 spezifikation ist nicht super frisch, ich denke, dass viele Entwickler sind immer noch nicht damit vertraut zu springen., Der Hauptgrund ist wahrscheinlich die schlechte Unterstützung in Webbrowsern kurz nach der Veröffentlichung. Derzeit ist die Spezifikation über 2 Jahre alt und viele moderne Webbrowser funktionieren gut mit ES6. Selbst wenn Sie (oder Ihre Clients) nicht die neueste Version des Webbrowsers verwenden, können Sie Transpiler (wie Babel) verwenden, die ES6-Quellen während des Erstellungsprozesses der Anwendung in ES5-Quellen umwandeln. Es bedeutet, dass es an der Zeit ist, einen Schritt vorwärts zu machen und ES6 zu lernen.
In diesem Artikel werde ich versuchen, die nützlichsten Funktionen kurz vorzustellen., Nach dem Tutorial verfügen Sie über grundlegende Fähigkeiten und können sie in einem echten Projekt anwenden. Behandeln Sie es nicht als Leitfaden oder Dokumentation. Mein Ziel ist es, Sie zu ermutigen, tiefer zu graben und sich mit ES6 vertraut zu machen.
const und lassen Schlüsselwörter
const definieren Sie Konstanten (endlich!). lassen Sie ermöglicht es Ihnen, Variablen zu definieren. Das ist großartig, aber haben wir nicht schon Variablen in JavaScript? Ja, das stimmt, aber von var deklarierte Variablen haben einen Funktionsumfang und werden nach oben gehisst. Dies bedeutet, dass eine Variable verwendet werden kann, bevor sie deklariert wurde., lassen Sie Variablen und Konstanten Blockbereich haben (umgeben von {}) und können nicht vor der Deklaration verwendet werden.
Array-Hilfsfunktionen
Es erschienen neue coole Hilfsfunktionen, die die Arbeit mit JS-Arrays in den nützlichsten Fällen erleichtern. Wie oft haben Sie Logik implementiert wie: Filtern, Prüfen, ob eines oder alle Elemente die Bedingung erfüllen, oder Elementkonvertierung? Wahrscheinlich sehr oft. Jetzt haben Sie großartige Sprachfunktionen, um die Arbeit für Sie zu erledigen., Hier sind meiner Meinung nach die wertvollsten Funktionen:
forEach
Führt die bereitgestellte Funktion für jedes Element des Arrays aus und übergibt das Array-Element als Argument.
map
Erstellt ein neues Array mit der gleichen Anzahl von Elementen, aber Ausgabeelemente werden von der bereitgestellten Funktion erstellt. Es konvertiert nur jedes Array-Element in etwas anderes.,
filter
Erstellt ein neues array, das eine Teilmenge des ursprünglichen Arrays. Das Ergebnis enthält diese Elemente, die den von der bereitgestellten Funktion implementierten Test bestehen, der true oder false zurückgeben sollte.
find
Findet das erste Element, das den von der bereitgestellten Funktion implementierten Test besteht und true oder false zurückgeben sollte.,
jedes
Prüft, ob jedes Element des Arrays den von der bereitgestellten Funktion implementierten Test besteht, der true oder false zurückgeben sollte.
einige
Prüft, ob ein Element des Arrays den von der bereitgestellten Funktion implementierten Test besteht, der true oder false zurückgeben sollte.,
reduce
Wendet eine Funktion an, die als erster Parameter an einen Akkumulator und jedes Element im Array (von links nach rechts) übergeben wird, wodurch es auf einen einzelnen Wert reduziert wird. Der Anfangswert des Akkumulators sollte als zweiter Parameter der Reduce-Funktion angegeben werden.
Pfeilfunktionen
Die Implementierung sehr einfacher Funktionen (wie die oben genannte Summe oder das Produkt) erfordert das Schreiben vieler Boilerplate., Gibt es dafür Abhilfe? Ja, probieren Sie einfach Pfeilfunktionen aus!
– Pfeil-Funktionen kann auch inline. Es vereinfacht den Code wirklich:
Pfeilfunktionen können auch komplexer sein und viele Codezeilen haben:
Klassen
Welcher Java-Entwickler vermisst beim Wechsel zu einem JS-Projekt keine Klassen?, Wer mag keine explizite Vererbung, wie in der Java-Sprache, anstatt magischen Code für die prototypische Vererbung zu schreiben? Obwohl sich einige JS-Entwickler beschwert haben, wurden Klassen in ES6 eingeführt. Sie ändern das Konzept der Vererbung nicht. Sie sind nur syntaktischer Zucker für die prototypische Vererbung.
Erweiterte Objektliterale
Objektliterale wurden erweitert., Jetzt können wir viel einfacher:
- Felder mit Variablenzuweisung desselben Namens definieren
- Funktionen definieren
- dynamische (berechnete) Eigenschaften definieren
Template Strings
Wer schreibt gerne große Zeichenfolgen und Variablen Verkettung? Ich glaube, eine Minderheit von uns. Wer hasst es zu Lesen? Ich bin sicher, jeder. Glücklicherweise führt ES6 sehr einfach zu bedienende String-Vorlagen mit Platzhaltern für Variablen ein.,
Bitte beachten Sie, dass wir schreiben können multi-line text.
Wichtig: Verwenden Sie Backticks anstelle von Apostrophen, um den Text einzuschließen.
Standardfunktionsargumente
Möchten Sie nicht alle möglichen Funktionsparameter bereitstellen? Standardwerte verwenden.
Rest und spread-Operatoren
Verbreitung
Es ermöglicht die Extraktion von array oder Objekt-Inhalte als einzelne Elemente.,
Beispiel — Erstellen Sie eine Kopie des Arrays:
Beispiel — Arrays zusammenführen:
Rest
Möchten Sie die ersten Funktionsparameter an Variablen und andere an einzelne Variablen als Array binden? Jetzt können Sie es ganz einfach tun.,
Destructuring
Of array
Ermöglicht die Extraktion der gewünschten Elemente aus dem array und die Zuordnung zu Variablen.
Of object
Ermöglicht das Extrahieren angeforderter Eigenschaften aus dem Objekt und das Zuweisen zu Variablen mit demselben Namen wie properties.,
Verspricht
Versprechen, zusagen (ja, ich weiß, es klingt komisch), dass Sie in Zukunft die Ergebnisse der latenten oder langzeitaufgaben. Promise hat zwei Kanäle: der erste für die Ergebnisse, der zweite für mögliche Fehler. Um das Ergebnis zu erhalten, geben Sie die Rückruffunktion als Funktionsparameter ‚then‘ an. Um Fehler zu behandeln, geben Sie die Rückruffunktion als Funktionsparameter ‚catch‘ an.
Bitte beachten Sie, dass die Ausgabe des Beispiels für jede Ausführung aufgrund eines zufälligen Funktionsaufrufs abweichen kann.,
Zusammenfassung
Ich hoffe, Ihnen hat der Artikel gefallen. Wenn Sie etwas üben möchten, können Sie die Sandbox für den Lernprozess verwenden: https://es6console.com/. Wenn Sie weitere Informationen benötigen, finden Sie sie hier: