Verwenden Sie heute ECMAScript 6

In objektorientierten Programmiersprachen a Klasse ist eine Darstellung eines Objekts. Es bildet den Bauplan, während ein Objekt eine Instanz einer Klasse ist. In Bezug auf JavaScript ist es eine klassenlose Programmiersprache und alles ist ein Objekt. Traditionell haben wir Funktionen und Prototypen verwendet, um Klassen zu implementieren. Lassen Sie uns einen gängigen Weg zur Implementierung von Klassen in ES5 erkunden.

 var Language = Funktion (config) this.name = config.name; this.founder = config.founder; this.year = config.year; ; Language.prototype.summary = function () return this.name + "wurde von" + this.founder + "in" + this.year "erstellt. ;

Lassen Sie uns als Nächstes sehen, wie ES6 Klassen mit einer minimalen Klassendeklarationssyntax implementiert, die für die Unterscheidung von Klassen und Funktionen äußerst wichtig sein kann. Zum Herausschreiben Klasse Mit der ES6-Syntax verwenden wir Google Traceur, einen Transpiler, der ES6-Code in ES5 kompiliert. Zuerst erstellen wir die html Dateistruktur, in die die ES6-Syntax für Klassen eingefügt wird. Um den Traceur-Code zu kompilieren, benötigen wir beides traceur.js Traceur zu JavaScript zu kompilieren, sowie bootstrap.js um sie alle zu binden. Zum Schluss wird Traceur suchen script type = "text / traceur" Tags, um den relevanten Code in den Tags in Vanilla-JavaScript zu kompilieren.

Als nächstes innerhalb der script type = "text / traceur" Tags, lassen Sie uns die ES6-Syntax verwenden, um dieselbe Klasse zu implementieren, für die wir zuvor getan haben Sprache.

 Klasse Sprache Konstruktor (Name, Gründer, Jahr) this.name = name; this.founder = Gründer; this.year = year;  summary () return this.name + "wurde von" + this.founder + "in" + this.year "erstellt. 

Wir können jetzt eine Instanz von erstellen Klasse Sprache indem Sie die HTML-Datei im Chrome-Browser als öffnen var js = neue Sprache. In der Konsole werden auch die Aufforderungen für andere Eigenschaften der Sprache angezeigt!

Mit einer solchen klaren Syntaxdeklaration können wir auch die Klasse erweitern, um eine Unterklasse zu implementieren MetaLanguage Dadurch werden alle Eigenschaften von der übergeordneten Klasse übernommen Sprache. Innerhalb der Konstruktorfunktion benötigen wir die Funktion Super Dadurch wird der Konstruktor der übergeordneten Klasse aufgerufen, damit er alle Eigenschaften erben kann. Schließlich können wir noch zusätzliche Eigenschaften hinzufügen, wie z Ausführung, wie im nachstehenden Code dargestellt. Sehen wir uns die ES6-Syntax an und führen Sie sie im Chrome-Browser aus:

 Klasse MetaLanguage erweitert Sprache Konstruktor (x, y, z, Version) super (x, y, z); this.version = version; 

Traceur ist ein nützlicher Transpiler, der es uns ermöglicht, mit der ES6-Syntax zu codieren, während wir uns schwer tun, ihn auf die aktuelle JavaScript-Version zurückzusetzen. Probieren Sie auch andere ES6-Funktionen in Traceur aus!

Merkmal 4 - Standardfunktionsparameter

• Dokumentation: Standard-Funktionsparameter
• Werkzeug: TypeScript 0.8.3

Bei den Standardfunktionsparametern können Funktionsparameter immer durch Auswahl einiger Standardeinstellungen als Option verwendet werden. Die Syntax für diese Funktion in ES6 ist äußerst intuitiv. Die Standardparameter werden definiert, wenn die Funktionen definiert werden. Schauen wir uns die ES6-Syntax unten in einer neuen TypeScript-Datei mit der Erweiterung von an * .ts.

 Funktionsverlauf (lang = "C", Jahr = 1972) return lang + "wurde um das Jahr herum erstellt" + Jahr; 

Als Nächstes installieren wir TypeScript als npm-Modul und führen die Datei aus .* ts und kompilieren Sie es zu Vanille JavaScript. Hier sind die Installations- und Kompilierungsbefehle in der Befehlszeile:

 $ npm install -g typescript $ npm Ansicht Typoscript-Version 0.8.3 $ tsc 4-default-params.ts

Der obige Befehl erstellt eine Vanilla-JavaScript-Datei mit dem Namen 4-default-params.js, die dann aus einer HTML-Datei aufgerufen werden kann. Hier ist die einfache HTML-Datei, die die externe JavaScript-Datei aufruft, die vom TypeScript-Compiler erstellt wird:

Zum Schluss öffnen wir die HTML-Datei in Chrome / Firefox und rufen die Funktion auf Geschichte() zweimal mit und ohne die Funktionsparameter. Beachten Sie, dass das Nichtübergeben von Funktionsparametern auf die Standardparameter zurückgesetzt wird:

Schauen Sie sich andere TypeScript-Funktionen an, einschließlich Klasse Oder führen Sie ein TypeScript-Lernprogramm durch, um ausführlichere Informationen zu erhalten.

Merkmal 5 - Sammlungen

• Dokumentation: Sets und Karten
• Werkzeug: NodeJS v0.10.4

ES6 bietet neue Datenstrukturen, die zuvor in JavaScript nicht verfügbar waren. Bevor wir uns mit der Untersuchung zweier solcher Datenstrukturen (Sets und Maps) beschäftigen, wollen wir sehen, wie wir die ES6-Syntax mit NodeJS ausführen können. NodeJS installieren; Von hier an werden wir in der Kommandozeile arbeiten. Zuerst werden wir die installierte NodeJS-Version überprüfen und dann prüfen, mit welchen Optionen ES6-Funktionen mit dem Befehl aktiviert werden Knoten --v8-Optionen | grep harmonie.

 $ node --version v0.10.4 $ node --v8-options | grep harmony --harmony_typeof (aktivieren Sie Harmony-Semantik für typeof) --harmony_scoping (aktivieren Sie das Harmony-Block-Scoping) --harmony_modules (aktivieren Sie Harmony-Module (impliziert das Block Scoping)) --harmony_proxies (aktivieren Sie Harmony-Proxy) --harmony_collections (aktivieren Sie Harmony-Sammlungen) Sets, Karten und schwache Karten)) - Harmony (alle Harmonie-Funktionen aktivieren (außer typeof))

Starten Sie als Nächstes den NodeJS-Repl und fragen Sie nach, welche Eigenschaften für Set und Maps verfügbar sind. Wir starten die NodeJS-Replik mit Knoten - Harmonie um alle ES6-Funktionen zu aktivieren.

 $ node --harmony> Object.getOwnPropertyNames (Set.prototype) ['Konstruktor', 'hinzufügen', 'hat', 'löschen']> Object.getOwnPropertyNames (Map.prototype) ['Konstruktor', 'get', ' set ',' hat ',' löschen ']> .exit $

Sets

Mengen sind einfache Datenstrukturen, die Arrays ähneln, aber jeder Wert ist eindeutig. Erstellen wir eine neue Datei mit dem Namen 5-sets.js, und fügen Sie etwas Code zum Erstellen, Hinzufügen, Löschen und Abfragen des neuen Satzes ein, den wir erstellen werden. Beachten Sie auch, dass wir "Hippo" -Daten zweimal hinzufügen, aber im Set werden diese nur einmal registriert!

 var Engines = neues Set (); // Erstelle neue Set Engines.add ("Gecko"); // Set zu Engines.add ("Trident") hinzufügen; Engines.add ("Webkit"); Engines.add ("Hippo"); Engines.add ("Hippo"); // Beachten Sie, dass Hippo zweimal hinzugefügt wird. console.log ("Browser-Engines enthalten Gecko?" + Engines.has ("Gecko")); // true console.log ("Browser-Engines enthalten Hippo?" + Engines.has ("Hippo")); // true console.log ("Browser-Engines enthalten Indigo?") + Engines.has ("Indigo")); // false engine.delete ("Hippo"); // Element löschen console.log ("Hippo wird gelöscht. Browser-Engines enthalten Hippo?" + Engines.has ("Hippo")); // falsch

Führen Sie die Datei im Knoten repl mit dem Befehl aus Knoten --harmony 5-set.js. Beachten Sie, dass, obwohl "Hippo" zweimal zum Set hinzugefügt wurde, das Set beim Löschen nicht mehr enthalten war. Dies zeigt noch einmal, dass eine Menge eine Datenstruktur ist, die nur eindeutige Werte enthalten kann.

Karten

Karten sind den Schlüsselpaaren von JavaScript-Objekten sehr ähnlich. Mit einem eindeutigen Schlüssel können wir den Wert abrufen. In ES6 kann der Schlüssel ein beliebiger JavaScript-Datentyp sein und nicht nur Zeichenfolgen. Das ist der interessante Teil! Erstellen wir eine neue Datei mit dem Namen 5-map.js, Testen Sie die Funktionen zum Erstellen, Abrufen und Löschen:

 var es6 = neue Karte (); // Neue Map erstellen es6.set ("Edition", 6); // Schlüssel ist string es6.set (262, "standard"); // Schlüssel ist number es6.set (undefined, "nah"); // Schlüssel ist undefined var hello = function () console.log ("hello");; es6.set (Hallo, "Hallo ES6!"); // Schlüssel ist function console.log ("Wert von 'Edition' wird beendet?" + es6.has ("Edition")); // true console.log ("Wert von 'year' wird beendet?" + es6.has ("years")); // false console.log ("Wert von 262 wird beendet?" + es6.has (262)); // true console.log ("Wert von undefinierten Exits?" + es6.has (undefined)); // true console.log ("Wert von hello () wird beendet?" + es6.has (hello)); // true es6.delete (undefined); // delete map console.log ("Wert von undefinierten Exits?" + es6.has (undefined)); // false console.log (es6.get (hallo)); // Hallo ES6! console.log ("Arbeit läuft für ES" + es6.get ("Edition")); // Für ES6 wird gearbeitet

Wie mit den ES6-Auflistungsfunktionen gezeigt, unterstützt die NodeJS-Harmony-Option bereits andere ES6-Funktionen wie Block-Scoping, Proxies und Module. Probieren Sie sie auch in NodeJS aus!

Merkmal 6 - Zerstörung

• Dokumentation: Zerstörung
• Werkzeug: Firefox-Browser 20.0: Menü> Extras> Webentwickler> Webkonsole

In Programmiersprachen bezeichnet der Begriff "Destrukturierung" Mustervergleich. In ES6 können wir in Arrays und Objekten ein paar hübsche Mustervergleiche durchführen, die uns früher mehr als einen Schritt gekostet hätten. Lassen Sie uns einige davon untersuchen, indem Sie sie in der Firefox-Webkonsole auscodieren.

Array-Zerstörung

Mit der Zerstörung von Arrays können wir Variablen auf einmal initialisieren oder sogar tauschen, anstatt die herkömmliche Methode zum Erstellen von var temp; temporäre Variable.

 var [start, end] = ["Erde", "Mond"] // Konsole.log initialisieren (Start + "Aufruf" + Ende); // Earth Calling Moon [Start, Ende] = [Ende, Start] // Variables Auswechseln von console.log (Start + "Aufruf" + Ende); // Mond ruft die Erde an

Die Destrukturierung ist auch eine nützliche Abkürzung, wenn mehrere Werte aus einer Funktion zurückgegeben werden, da ein Objekt nicht mehr umgebrochen werden muss. Um bestimmte Variablen zu überspringen, lassen Sie das Array-Element einfach leer:

 function equinox () return [20, "March", 2013, 11, 02];  var [Datum, Monat,,] = Äquinoktikum (); console.log ("Das diesjährige Equinox war am" + Datum + Monat); // Das diesjährige Äquinoktikum war am 20. März

Objektzerstörung

Aufgrund der Destrukturierung können Variablen auch von einem Objekt initialisiert werden, das auch bei tief verschachtelten Objekten von einer Funktion zurückgegeben wird. Ebenso wie die Array-Muster können wir die nicht benötigten Muster überspringen. Hier ist der Code-Ausschnitt, der genau dies veranschaulicht:

 function equinox2 () return Datum: 20, Monat: "März", Jahr: 2013, Zeit: Stunde: 11, // verschachtelte Minute: 2;  var Datum: d, Monat: m, Zeit: Stunde: h = equinox2 (); // h hat den Wert der verschachtelten Eigenschaft, während "year" und "minute" total Console.log übersprungen werden ("Der diesjährige Äquinoktikum war auf" + d + m + "um" + h "); // Das diesjährige Äquinoktikum war am 20. März um 11 Uhr

Funktion 7 - Restparameter und Spread-Operatoren

• Dokumentation: Restparameter & Spread-Operator
• Werkzeug: Grunt Plugin Traceur

Restparameter

In ES6 ermöglichen Rest-Parameter die einfache Verwendung einiger fester Parameter in einer Funktion, zusammen mit dem Rest der nachlaufenden und einer variablen Anzahl von Parametern. Wir verwenden schon Argumente, Dies ist ein Array-ähnliches Objekt, das die an eine Funktion übergebenen Argumente definiert. Natürlich können wir die Array-Funktion nicht verwenden, um diese Argumente zu bearbeiten. Mit einer klaren Syntax in ES6 versetzt er die Absicht des Entwicklers mit drei Punkten in die Syntaxebene … eine variable Anzahl von Argumenten bezeichnen.

Versuchen wir, rest-Parameter in der ES6-Syntax mit gruntjs und seinem Plugin für den Traceur-Transpiler zu verwenden, den wir im vorherigen Abschnitt verwendet haben.

1. Installieren Sie das grunt-Befehlszeilenprogramm:

    $ npm uninstall -g grunt $ npm install -g grunt-cli

2. Erstellen Sie eine Datei, die aufgerufen wird package.json, Dadurch werden die verschiedenen Module definiert, die zum Ausführen von Grunt erforderlich sind. Beachten Sie, dass diese Liste der Abhängigkeiten das Traceur-Plugin enthält:

    "name": "rest-params", "version": "0.1.0", "devDependencies": "grunt": "0.4.1", "grunt-traceur": "0.0.1"

3. Erstellen Sie die Gruntfile.js die nur eine Aufgabe enthalten wird Traceur Dadurch wird die ES6-Syntax in das heutige JavaScript konvertiert. Damit können wir ES6-Restparameter ausprobieren.

    module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')), traceur: custom: files: 'js /': ['rest-spread.js '] // dest: [Quelldateien]); grunt.loadNpmTasks ('grunt-traceur'); grunt.registerTask ('default', ['traceur']); ;

4. Erstellen Sie eine einfache index.html um die mit Traceur kompilierte JavaScript-Datei aufzurufen, js / rest-spread.js:

5. Am wichtigsten ist, dass wir die Datei erstellen rest-spread.js, welche die rest-Parametersyntax enthalten wird:

    function push (array,… items) // Restparameter mit 3-Punkt-Syntax definieren items.forEach (function (item) array.push (item); console.log (item););  // 1 feste + 4 variable Parameter var planets = []; console.log ("Innere Planeten unseres Sonnensystems sind:"); Push (Planeten, "Merkur", "Venus", "Erde", "Mars"); // Restparameter

6. Schließlich werden wir rennen grunzen In der Befehlszeile wird standardmäßig die Traceur-Task ausgeführt und die Datei erstellt, js / 5-rest-spread.js. Als nächstes sehen Sie sich einfach die Datei an index.html in der Browser-Konsole:

    $ npm install $ grunt $ grunt Ausführen von "traceur: custom" (traceur) Task js / ['rest-spread.js'] Kompilieren ... js / Kompilierung erfolgreich - js / Schreiben ... js / js / rest-spread.js erfolgreich. Erfolgreich schreiben - [Objekt Objekt]

   

Spread-Operator

Ein Spread-Operator ist das Gegenteil von Restparametern. Beim Aufruf einer Funktion können wir das festgelegte Argument übergeben, das zusammen mit einem Array mit variabler Größe mit der bekannten Drei-Punkt-Syntax benötigt wird, um die variable Anzahl von Argumenten anzugeben.

Wir werden dasselbe Projekt wie die restlichen Parameter verwenden und im Spread-Operator-Code an die Datei anhängen rest-spread.js. Im folgenden Beispiel benötigt die Funktion sechs separate Argumente. Beim Aufruf der Funktion werden die Daten mit dem Spread-Operator als Array übergeben. Sehen wir uns die Syntax an, wenn Sie die Funktion mit festen Argumenten sowie einer variablen Anzahl von Argumenten aufrufen:

1. Hängen Sie den Spread-Operator-Code an rest-spread.js:

    // Spread-Operator "… weblink" -Funktion createURL (Kommentar, Pfad, Protokoll, Subdomain, Domäne, tld) var shoutout = comment + ":" + protocol + ": //" + subdomain + "." + domain + "." + tld + "/" + Pfad; console.log (Shoutout);  var weblink = ["hypertext / WWW / TheProject.html", "http", "info", "cern", "ch"], comment = "Die erste Website der Welt"; createURL (Kommentar,… Weblink); // Spread-Operator

2. Führen Sie die Traceur-Kompilierung durch die Grunt-Task in der Befehlszeile aus und zeigen Sie die Datei an, index.html, im Browser:

    $ grunt Ausführen von "traceur: custom" (traceur) Task js / ['rest-spread.js'] Kompilieren ... js / Kompilierung erfolgreich - js / Schreiben ... js / js / rest-spread.js erfolgreich. Erfolgreich schreiben - [Objekt Objekt] Fertig, ohne Fehler.

   

Wenn Sie GruntJS bereits als Build-Tool in Ihrem aktuellen Projekt verwenden, können Sie es leicht in ES6-Plugins integrieren. Testen Sie also andere GruntJS ES6-bezogene Plugins, um die ES6-Syntax mit dem aktuellen JavaScript zu kompilieren.

Merkmal 8 - Iteratoren

• Dokumentation: Iterator
• Werkzeug: Firefox-Browser 20.0: Menü> Extras> Webentwickler> Webkonsole

JavaScript bietet für in für die Iteration, aber es hat einige Einschränkungen. Zum Beispiel werden in einer Array-Iteration die Ergebnisse mit einem für in Schleife gibt uns die Indizes und nicht die Werte. Schauen wir uns den Code unten an, um das zu veranschaulichen:

 var planets = ["Merkur", "Venus", "Erde", "Mars"]; for (p in planets) console.log (p); // 0,1,2,3 var es6 = Ausgabe: 6, Ausschuss: "TC39", Standard: "ECMA-262"; für (e in es6) console.log (e); // Ausgabe, Ausschuss, Standard

Versuchen wir das gleiche Konzept, aber diesmal mit für-von mit einem Array, einem Set und einer Karte:

 var planets = ["Merkur", "Venus", "Erde", "Mars"]; für (p der Planeten) console.log (p); // Merkur, Venus, Erde, Mars var engine = Set (["Gecko", "Trident", "Webkit", "Webkit"]); für (verschiedene Motoren) console.log (e); // Set hat nur eindeutige Werte, daher zeigt Webkit nur einmal var es6 = new Map (); es6.set ("Edition", 6); es6.set ("Ausschuss", "TC39"); es6.set ("Standard", "ECMA-262"); for (var [name, value] von es6) console.log (name + ":" + value); 

Funktion 9 - Array-Verständnis

• Dokumentation: Array-Verständnis
• Werkzeug: Firefox-Browser 20.0: Menü> Extras> Webentwickler> Webkonsole

Arrayverstehen geben uns eine Abkürzungssyntax, um jeden Arrayinhalt in einem bestimmten Muster zu bearbeiten. Es ist dem sehr ähnlich Karte() oder Filter() Methoden, die im Array-Objekt verfügbar sind. Lassen Sie uns untersuchen, wie wir es verwenden Karte()

 Var-Temperatur = [0, 37, 100]; Funktion degToKelvin (deg) return deg + 273;  temperature.map (degToKelvin); // [273, 310, 373]

Lassen Sie uns das gleiche Feature in Firefox durchgehen, um die Abkürzungssyntax in ES6 zu sehen, um Arrays mit bis zu drei Schleifen zu erstellen, um mögliche Lösungen für das Spiel, Cluedo, zu erstellen:

 // Array erstellt mit 1 Schleife var temperature = [0, 37, 100]; [t + 273 für (t Temperatur)]; // [273, 310, 373] // Array erstellt mit 3 Schleifen var suspects = ["Miss Scarlet", "Colonel Mustard"], Waffen = ["Candlestick", "Dagger"], Räume = ["Kitchen", "Ballsaal"]; [(console.log (s + "mit einem" + w + "in" + r)) für (s von Verdächtigen) für (w von Waffen) für (r von Räumen)];

Merkmal 10 - Module

• Dokumentation: Module, Modulbeispiele, Modullader
• Werkzeug: ES6-Modul-Transpiler

In Programmiersprachen führen Module isolierte diskrete Funktionen aus und sind unabhängig voneinander. Dies hilft nicht nur, wiederverwendbare Komponenten projektübergreifend zu erstellen, sondern hält auch Fehler für die Teile des aktuellen Projekts. Wir haben in JavaScript typischerweise Module mit AMD oder CommonJS erstellt. Erstellen wir ein einfaches Modul mit der ES6-Syntax und dem ES6-Modul-Transpiler.