ECMAScript 6 - 10 Awesome New Features

Wussten Sie, dass JavaScript (zusammen mit JScript und ActionScript) eine Implementierung einer allgemeinen clientseitigen Skriptsprachenspezifikation namens ECMAScript ist? Um diese unangenehme Definition etwas attraktiver zu gestalten, kann man sagen, dass ECMAScript (oder offiziell ECMA-262) ist Der Standard, der definiert, wie wir JavaScript verwenden und was wir erreichen können damit.

Die neueste 6. Ausgabe der Sprache ECMAScript 2015 (oder ES6) ist wahrscheinlich das bedeutendste Update seit der ersten Version von 1997. Das Hauptziel der neuesten Version bestand darin, eine bessere Unterstützung für das Erstellen größerer Anwendungen und Bibliotheken bereitzustellen. Dies bedeutet eine ausgereifte Syntax, neue Abkürzungen zur Vereinfachung der Codierung sowie neue Methoden, Schlüsselwörter, Datentypen und viele andere Verbesserungen.

Die Dokumentation zu ES6 ist umfangreich. Wenn Sie viel lesen möchten, können Sie die gesamten technischen Daten von der Website von ECMA International herunterladen. In diesem Beitrag werden wir 10 handverlesene Funktionen betrachten, auch wenn ES6 noch viel mehr zu bieten hat. Wenn Sie damit experimentieren möchten, ist ES6 Fiddle ein großartiger Ort, und Sie können dort auch einige Beispielcodeausschnitte finden.

Unterstützung für ECMAScript 6

Browser-Anbieter haben nach und nach Unterstützung für die Funktionen von ECMAScript 6 hinzugefügt. Hier finden Sie eine coole Kompatibilitätstabelle über die Browser- und Compiler-Unterstützung für die neuen Funktionen.

Wenn Sie an der Unterstützung von ES6 in Node.js interessiert sind, lesen Sie die folgenden Dokumente.

Obwohl derzeit nicht alle Funktionen unterstützt werden, können wir Transpiler wie Babel verwenden, um unseren ES6-Code auf ES5 umzusetzen. Es gibt ein cooles Grunt-Plugin für Babel, viele tolle ES6-Plugins für Grunt und ein erstaunliches Gulp-Babel-Plugin da draußen, zum Glück haben wir eine große Auswahl.

Auf diese Weise können wir die erweiterte Syntax und Funktionen nutzen, ohne sich um Kompatibilitätsprobleme kümmern zu müssen. Nun sehen wir uns die Funktionen an.

1. Neu Lassen Stichwort

ES6 führt das Neue ein Lassen Schlüsselwort, mit dem lokale Variablen im Gültigkeitsbereich eines Blocks deklariert werden können, z. B. eine Anweisung, ein Ausdruck oder eine (n innere) Funktion. Zum Beispiel können wir ein deklarieren zum Schleife in der folgenden Weise und verwenden Sie dann denselben Variablennamen wieder (da sein Gültigkeitsbereich auf den Namen beschränkt ist) zum Schleife) in der nächsten ob Aussage:

 für (sei i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Wir verwenden "i" wieder, lassen Sie i = x * y

Verwendung der Lassen Das Schlüsselwort führt zu einem saubereren und besser verwendbaren Code. Der Unterschied zwischen Lassen und var ist im Gültigkeitsbereich, zum Beispiel eine lokale Variable, die durch die definiert wird var Schlüsselwort kann in der gesamten einschließenden Funktion verwendet werden, während durch Lassen nur in einem eigenen (Teil-) Block arbeiten. Lassen kann auch global verwendet werden, in diesem Fall verhält es sich genauso wie var. Natürlich können wir in ES6 noch verwenden var wenn wir wollen.

2. Neu const Stichwort

Das neue const Mit dem Schlüsselwort können Konstanten (auch als unveränderliche Variablen bezeichnet) deklariert werden, denen wir später keinen neuen Inhalt zuweisen können.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Lautloser Fehler, da wir einer Konstanten keinen neuen Wert zuweisen können

Unveränderbare Variablen sind in ECMAScript 6 nicht immer vollständig unveränderlich. Wenn eine Konstante jedoch ein Objekt enthält, können wir später den Wert seiner Eigenschaften und Methoden ändern. Gleiches gilt für die Elemente eines Arrays.

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22

Wir können dem MY_CONSTANT-Objekt im obigen Code-Snippet immer noch keinen neuen Wert direkt neu zuweisen. Dies bedeutet, dass wir die Namen der Eigenschaften und Methoden nicht ändern können und auch keinen neuen hinzufügen oder einen vorhandenen löschen können folgende sache:

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // Error

3. Pfeilfunktionen

ECMAScript 6 erleichtert das Schreiben anonyme Funktionen, da können wir das komplett auslassen Funktion Stichwort. Wir brauchen nur die neue Syntax für Pfeilfunktionen, benannt nach dem Pfeilsymbol => (fetter Pfeil), der uns eine tolle Abkürzung gibt.

 // 1. Ein Parameter in ES6 sei summe = (a, b) => a + b; // in ES5 var summe Funktion (a, b) return a + b; ; // 2. Ohne Parameter in ES6 sei randomNum = () => Math.random (); // in ES5 var randomNum = function () return Math.random (); ; // 3. Ohne return in ES6 let message = (name) => alert ("Hi" + name + "!"); // in ES5 var message = function (yourName) alert ("Hi" + yourName + "!"); ;

Es gibt einen wichtigen Unterschied zwischen regulären und Pfeilfunktionen, d. H. Pfeilfunktionen erhalten kein diese Wert automatisch wie mit der Funktion definierte Funktionen Funktion Schlüsselwort do. Pfeilfunktionen lexikalisch binden das diese Wert auf den aktuellen Umfang. Das bedeutet, dass wir das problemlos wiederverwenden können diese Schlüsselwort in einer inneren Funktion. In ES5 ist dies nur mit folgendem Hack möglich:

 // ES5 Hack, um das Schlüsselwort "this" in einer inneren Funktion zu verwenden … addAll: function addAll (pieces) var self = this; _.each (Stücke, Funktion (Stück) self.add (Stück);); ,… // ES6 die gleiche innere Funktion kann jetzt ihr eigenes "this" verwenden … addAll: function addAll (pieces) _.each (pieces, piece => this.add (piece)); ,…

Der obige Code stammt von Mozilla Hacks

4. Neu Verbreitung Operator

Das neue Verbreitung Der Operator ist mit 3 Punkten (…) markiert, und wir können ihn verwenden, um den Platz mehrerer erwarteter Elemente zu kennzeichnen. Einer der häufigsten Anwendungsfälle des Spread-Operators ist das Einfügen der Elemente eines Arrays in ein anderes Array:

 sei meinArray = [1, 2, 3]; lassen Sie newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

Wir können auch die Hebelwirkung übernehmen Verbreitung Operator in Funktionsaufrufen, in denen Argumente aus einem Array übergeben werden sollen:

 sei meinArray = [1, 2, 3]; Funktionssumme (a, b, c) return a + b + c;  console.log (summe (… meinArray)); // 6

Das Verbreitung Der Operator ist ziemlich flexibel, da er im selben Array oder Funktionsaufruf mehrfach verwendet werden kann.

5. Standardwerte für Parameter und neue Restparameter

Eine gute Nachricht, dass wir in ECMAScript 6 den Parametern einer Funktion Standardwerte hinzufügen können. Das heißt, wenn wir später im Funktionsaufruf keine Argumente übergeben, werden die Standardparameter verwendet. In ES5 sind die Standardwerte von Parametern immer auf gesetzt nicht definiert, Die neue Möglichkeit, sie auf das zu setzen, was wir wollen, ist definitiv eine große Verbesserung der Sprache.

 Funktionssumme (a = 2, b = 4) return a + b;  console.log (sum ()); // 6 console.log (Summe (3, 6)); // 9

ES6 führt auch eine neue Art von Parametern ein, den Restparameter. Sie sehen und arbeiten ähnlich wie Spread-Operatoren. Sie sind praktisch, wenn wir nicht wissen, wie viele Argumente später im Funktionsaufruf übergeben werden. Wir können die Eigenschaften und Methoden des Array-Objekts für Restparameter verwenden:

 Funktion putInAlphabet (… args) let sort = args.sort (); Rückkehr sortiert;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t

6. Neu für… von Aussage

Mit Hilfe des Neuen für… von Schleife können wir leicht über Arrays oder andere iterierbare Objekte iterieren. Zusammen mit dem Neuen für… von In dieser Anweisung führt ECMAScript 6 auch zwei neue iterierbare Objekte ein: Map für Schlüssel- / Wert-Maps und Set für Sammlungen eindeutiger Werte, die auch Grundwerte und Objektreferenzen sein können. Wenn wir das benutzen für… von Anweisung wird der Code innerhalb des Blocks für jedes Element des iterierbaren Objekts ausgeführt.

 sei meinArray = [1, 2, 3, 4, 5]; sei Summe = 0; for (lass i von myArray) sum + = i;  console.log (Summe); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Vorlagenliterale

ECMAScript 6 bietet uns eine neue Alternative für die String-Verkettung. Vorlagenliterale erlauben Sie uns, auf einfache Weise Vorlagen zu erstellen, in die wir an jeder gewünschten Stelle unterschiedliche Werte einbetten können. Dazu müssen wir die $ … Syntax überall dort, wo wir die Daten einfügen möchten, die wir aus Variablen, Arrays oder Objekten auf folgende Weise übergeben können:

 let customer = title: 'Ms', Vorname: 'Jane', Nachname: 'Doe', Alter: '34'; let template = 'Sehr geehrter $ customer.title $ customer.firstname $ customer.surname! Glücklicher $ customer.age th Geburtstag! '; console.log (Vorlage); // Liebe Frau Jane Doe! Alles Gute zum 34. Geburtstag!

8. Klassen

ES6 führt JavaScript-Klassen ein, die auf der vorhandenen prototypbasierten Vererbung basieren. Die neue Syntax macht das Erstellen von Objekten, die Nutzung der Vererbung und die Wiederverwendung von Code einfacher. Anfänger, die aus anderen Programmiersprachen kommen, können die Funktionsweise von JavaScript besser verstehen.

In ES6 werden Klassen mit dem neuen deklariert Klasse Schlüsselwort und müssen ein Konstrukteur() Methode, die aufgerufen wird, wenn ein neues Objekt mit der Instanz von instanziiert wird neue myClass () Syntax. Es ist auch möglich, neue Klassen mit zu erweitern Klasse Child erweitert Parent Syntax, die aus anderen objektorientierten Sprachen wie PHP bekannt ist. Es ist auch wichtig zu wissen, dass Klassendeklarationen im Gegensatz zu Funktions- und Variablendeklarationen NICHT in ECMAScript 6 gehisst werden.

 class Polygon Konstruktor (Höhe, Breite) // Klassenkonstruktor this.name = 'Polygon'; this.height = Höhe; this.width = width;  sayName () // Klassenmethode console.log ('Hi, ich bin ein', this.name + '.');  lassen Sie myPolygon = new Polygon (5, 6); console.log (myPolygon.sayName ()); // Hi, ich bin ein Polygon.

Code oben aus ES6-Fiddle-Beispielen, .

9. Module

Haben Sie sich jemals gefragt, wie cool es wäre, wenn JavaScript modular wäre? Natürlich gab es Workarounds wie CommonJS (verwendet in Node.js) oder AMD (Asynchronous Module Definition) (verwendet in RequireJS), um dies zu tun, aber ES6 führt Module als natives Feature ein.

Wir müssen jedes Modul in einer eigenen Datei definieren und dann die Export Schlüsselwort zum Exportieren von Variablen und Funktionen zu andere Dateien und die einführen Schlüsselwort, um sie zu importieren von andere Dateien gemäß der folgenden Syntax:

 // functions.js function cube (a) return a * a * a;  function cubeRoot (a) return Math.cbrt (a);  export cube, cubeRoot // oder: export cube als cb, cubeRoot als cr // app.js import cube, cubeRoot von 'functions'; console.log (Cube (4)); // 64 console.log (cubeRoot (125)); // 5

Diese Lösung ist brillant, da der in einem Modul gespeicherte Code von außen nicht sichtbar ist und wir nur den Teil exportieren müssen, auf den andere Dateien zugreifen möchten. Mit ES6-Modulen können wir noch viel mehr erstaunliche Dinge tun. Hier finden Sie eine großartige und detaillierte Erklärung dazu.

10. Jede Menge neuer Methoden

ECMAScript 6 führt viele neue Methoden für den vorhandenen String-Prototyp, Array-Objekt, Array-Prototyp und Math-Objekt ein. Die neuen Methoden können die Art und Weise, wie wir diese Entitäten manipulieren können, erheblich verbessern. Mozilla Dev hat großartige Codebeispiele für die neuen Ergänzungen. Es lohnt sich, sich Zeit zu nehmen und sie gründlich zu untersuchen.

Um zu zeigen, wie cool sie wirklich sind, ist hier mein Favorit: Die find-Methode des Array-Prototyps, mit der wir bestimmte Kriterien für die Elemente eines Arrays testen können, indem wir die Callback-Funktion für jedes Element ausführen und dann das erste Element zurückgeben kehrt zurück wahr.

 Funktion isPrime (Element, Index, Array) var start = 2; während (Start <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, nicht gefunden console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Code oben von: Mozilla Dev