Einführung
ECMascript 6 ist der nächste Standard für JavaScript und befindet sich in einer schnellen Entwicklung. Das Ziel von ECMascript 6 ist es, JavaScript zu ermöglichen, komplexe Anwendungen, Funktionsbibliotheken und Codeautomatische Generatoren (Codegeneratoren) zu schreiben. Die neuesten Browser unterstützen bereits teilweise die Syntax von ECMascript 6. ECMascript 6 sind derzeit im Grunde genommen der Branchenstandard, und seine Popularität ist viel schneller als ES5. Der Hauptgrund ist, dass moderne Browser ES6 ziemlich schnell unterstützen, insbesondere Chrome- und Firefox -Browser, die bereits die meisten Merkmale in ES6 unterstützen.
1. Let, Const und Block Scopes
Lassen Sie das Erstellen von Blockebene ermöglichen. ES6 empfiehlt die Verwendung von LET -IN -Funktionen, um Variablen anstelle von VAR zu definieren:
var a = 2; {lass a = 3; console.log (a); // 3} console.log (a); // 2Eine andere Möglichkeit, Variablen zu deklarieren, die auch auf Blockebene gültig sind, ist const, was eine Konstante deklarieren kann. In ES6 ähnelt die von Const deklarierte Konstante einem Zeiger, der auf eine Referenz hinweist, was bedeutet, dass diese "const" nicht statisch ist, wie zum Beispiel:
{const arr = [5,6]; Arr.push (7); console.log (arr); // [5,6,7] arr = 10; // TypeRror}Es gibt einige Punkte zu beachten:
Lassen Sie die deklarierten Keyword -Variablen nicht über die Hebezeuge verfügen
Die LET- und Const -Deklarationen sind nur im nächsten Block gültig (innerhalb lockiger Klammern)
Verwenden Sie bei der Verwendung der konstanten Konst -Deklaration Großbuchstaben wie: Capital_casing
const muss zugewiesen werden, wenn deklariert
2. Pfeilfunktionen
In ES6 ist die Pfeilfunktion eine Kurzform einer Funktion, wobei Klammern die Parameter einwickeln, gefolgt von AN =>, gefolgt von der Funktionsbehörde:
var getPrice = function () {return 4.55;}; // Implementierung mit Arrow FunctionVar getPrice = () => 4,55;Es ist zu beachten, dass die GetPrice -Pfeilfunktion in der oben genannten Kastanie einen prägnanten Funktionskörper verwendet, für den keine Reture -Anweisung erforderlich ist. Die Kastanie unten verwendet einen normalen Funktionskörper:
Sei arr = ['Apple', 'Banane', 'Orange']; Lassen Sie das Frühstück = arr.map (fruit => {return fruit + 's';}); console.log (Frühstück); // Äpfel Bananen OrangenNatürlich geht es bei Pfeilfunktionen nicht nur darum, den Code zuversichtlich zu machen, sondern in der Funktion, dass diese Bindung immer auf das Objekt selbst zeigt. Einzelheiten können Sie sich die folgenden Kastanien ansehen:
Funktion person () {this.age = 0; setInterval (function GrowUp () {// Im Nicht-Strect-Modus verweist dieses der Wachstum () auf das Fensterobjekt.Wir müssen oft eine Variable verwenden, um dies zu speichern und dann in der Auswachungsfunktion zu verweisen:
Funktion person () {var self = this; self.age = 0; setInterval (function Growup () {self.age ++;}, 1000);}Mit Pfeilfunktionen kann diese Probleme speichern:
Funktion person () {this.age = 0; setInterval (() => {// | this | to person -Objekt this.age ++;}, 1000);} var person = new Person ();3. Funktionsparameter Standardwert Standardwert
Mit ES6 können Sie Standardwerte für Funktionsparameter festlegen:
GetfinalPrice = (Preis, Steuern = 0,7) => Preis + Preis * Steuer; GetfinalPrice (500); // 850
4. Verbreiten/Rastoperator
Der Spread / Rast -Operator bezieht sich auf ..., unabhängig davon, ob er sich verteilt oder ruht, hängt vom Kontext ab.
Wenn es in einem Iterator verwendet wird, ist es ein Spread -Operator:
Funktion foo (x, y, z) {console.log (x, y, z);} let arr = [1,2,3]; foo (... arr); // 1 2 3Bei der Verwendung zur Übertragung von Funktionsargumentation ist es ein Rastoperator:
Funktion foo (... args) {console.log (args);} foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]5. LEXICAL -Erweiterung von Objekt
ES6 ermöglicht das Deklarieren einer abgekürzten Syntax beim Deklarieren von Objektliteralen zur Initialisierung der Definitionsmethoden von Attributvariablen und -funktionen und ermöglicht Berechnungsvorgänge in Objekteigenschaften:
Funktion getCar (make, modell, value) {return {// Abkürzungsvariable make, // äquivalent zu machen: make model, // äquivalent zu Modell: Modellwert, // äquivalent zu Wert: Wert // Das Attribut kann mit Ausdrücken berechnet werden. }};} lass car = getCar ('Barret', 'Lee', 40000); // Ausgabe: {// make: 'barret', // Modell: 'Lee', // value: 40000, // makebarret: true, // abwertung: function () //}6. Binär- und Oktalliterale
ES6 unterstützt binäre und Oktalliterale, die durch Hinzufügen von 0o oder 0o vor der Zahl in binäre Werte umgewandelt werden können:
Sei ovalue = 0o10; console.log (ovalue); // 8 lass bValue = 0b10; // Verwenden Sie `0b` oder` 0b` console.log (bValue); // 2
7. Objekt- und Array -Zerstörung
Die Dekonstruktion kann die Erzeugung von Zwischenvariablen vermeiden, wenn die Objektzuweisung:
Funktion foo () {return [1,2,3];} let arr = foo (); // [1,2,3] Sei [a, b, c] = foo (); console.log (a, b, c); // 1 2 3 Funktions bar () {return {x: 4, y: 5, z: 6};} lass {x: x, y: y, z: z} = bar (); console.log (x, y, z); // 4 5 68. Objekt Superklasse
ES6 ermöglicht die Verwendung der Supermethode in Objekten:
var parent = {foo () {console.log ("Hallo aus dem Elternteil"); }} var child = {foo () {super.foo (); console.log ("Hallo aus dem Kind"); }} Object.setPrototypeof (untergeordnet, übergeordnet); child.foo (); // Hallo vom Elternteil // Hallo aus dem Kind9. Vorlagensyntax und Trennzeichen
Es gibt eine sehr präzise Möglichkeit, eine Reihe von Strings und Variablen in ES6 zusammenzustellen.
$ {...} wird verwendet, um eine Variable zu rendern
`als Trennzeichen
lass user = 'barret'; console.log (`hi $ {user}!`); // Hallo Barret!10. für ... von vs für ... in
für ... von wird verwendet, um einen Iterator wie ein Array zu durchqueren:
lass spitznamen = ['di', 'boo', 'punkeye']; spitznamen
Denn ... in wird verwendet, um Eigenschaften in einem Objekt zu durchqueren:
Lassen Sie Spicknames = ['di', 'boo', 'punkeye']; spitznamen.size = 3; für (lassen
11. Karte und Schwäche
Es gibt zwei neue Datenstruktursätze in ES6: MAP und Schwächen. Tatsächlich kann jedes Objekt als Karte angesehen werden.
Ein Objekt besteht aus mehreren Schlüssel-Val-Paaren. In einer Karte kann jeder Typ als Schlüssel des Objekts verwendet werden, wie z. B.:
var MYMAP = new map (); var keyString = "a String", keyObj = {}, keyfunc = function () {}; // Setzen Sie den Wert myMap.set (Schlüsselstring, "Wert ist 'a String'"); MYMAP.SET (KEYOBJ, "Wert ist mit KeyObj zugeordnet"); MYMAP.SET (KeyFunc, "Wert ist mit KeyFunc zugeordnet"); MYMAP.SIZE; // 3 // den Wert myMap.get (keystring) erhalten; // "Wert ist mit 'a String'" myMap.get (keyObj) zugeordnet; // "Wert ist mit 'a String'" myMap.get (keyObj) zugeordnet; // "Wert ist mit 'a String'" myMap.get (keyObj) zugeordnet; // "Value associate mit KeyObj" myMap.get (keyfunc); // "mit Keyfunc zugeordneter Wert"Schwäche
Schwächen ist eine Karte, aber alle Tasten sind schwache Referenzen, was bedeutet, dass die Dinge in Schwächen bei der Müllsammlung nicht berücksichtigt werden, und Sie müssen sich bei der Verwendung nicht um Speicherlecks kümmern.
Eine andere Sache zu beachten ist, dass alle Schlüssel von Schwächen Objekte sein müssen. Es hat nur vier Methoden: Löschen (Schlüssel), hat (Schlüssel), Get (Schlüssel) und Set (Schlüssel, Val):
w = new schwedmap (); W.Set ('a', 'b'); // Uncortn TypeError: Ungültiger Wert, der als schwache Kartenschlüssel verwendet wird var O1 = {}, o2 = function () {}, o3 = Fenster; W.Set (O1, 37); W.Set (O2, "asery"); W.Set (O3, undefiniert); W.get (O3); // undefiniert, weil das der festgelegte Wert ist, der (O1) ist; // truew.delete (O1); W.has (O1); // FALSCH12. Set und WeaPset
Ein festgelegtes Objekt ist eine Reihe von nicht wiederholten Werten, und doppelte Werte werden ignoriert. Die Werttypen können primitiv sein und Referenztypen:
Sei MySet = New Set ([1, 1, 2, 2, 3, 3]); MySet.Size; // 3myset.has (1); // Truemyset.add ('Strings'); MySet.Add ({a: 1, b: 2});Sie können Set -Objekte durch foreach und für ... von: von:
mySet.foreach ((item) => {console.log (item); // 1 // 2 // 3 // 'Strings' // Object {a: 1, b: 2}}); für (let value of mySet) {console.log (Wert); // 1 // 2 // 3 // 'Strings' // Object {a: 1, b: 2}}SET hat auch Methoden delete () und clear ().
Schwachset
Ähnlich wie bei Wecmap können Sie mit dem WewSet -Objekt schwache Referenzen auf Objekte in einer Sammlung sparen, und Objekte in Wecset dürfen nur einmal erscheinen:
var ws = new WewSet (); var obj = {}; var foo = {}; Ws.Add (Fenster); Ws.Add (obj); Ws.has (Fenster); // truews.has (foo); // false, Foo wurde nicht erfolgreich hinzugefügt wselete (Fenster); // Fensterobjekt aus Kombination ws.has (Fenster) löschen; // Falsch, Fensterobjekt wurde gelöscht13. Klasse
Es gibt Klassensyntax in ES6. Es ist erwähnenswert, dass die Klasse hier kein neues Objekt -Vererbungsmodell ist, sondern nur eine syntaktische Zuckerxpression der Prototypkette.
Die Methoden und Eigenschaften des Konstruktors werden in der Funktion unter Verwendung des statischen Schlüsselworts definiert:
Klasse Task {constructor () {console.log ("Task instanciated!"); } showId () {console.log (23); } static loadAll () {console.log ("Alle Aufgaben laden .."); }} console.log (typeof task); // Funktionslet Task = new Task (); // "Task instanciated!" task.showid (); // 23task.loadall (); // "Alle Aufgaben laden .."Vererbung und Supersets in der Klasse:
Klasse car {constructor () {console.log ("ein neues Auto erstellen"); }} class porsche erweitert das car {constructor () {Super (); console.log ("porsche erstellen"); }} lass c = neuer porsche (); // Erstellen eines neuen Autos // Porsche erstellenErweitert ermöglicht es einer Unterklasse, die übergeordnete Klasse zu erben. Es ist zu beachten, dass die Funktion Super () in der Konstruktorfunktion der Unterklasse ausgeführt werden muss.
Natürlich können Sie auch die Methoden der Elternklasse in den Unterklassenmethoden wie Super.ParentMethodname () aufrufen.
Lesen Sie hier mehr über die Klasse.
Es sind einige Punkte erwähnenswert:
Die Erklärung der Klasse wird nicht heben. Wenn Sie eine Klasse verwenden möchten, müssen Sie sie vor der Verwendung definieren, andernfalls wird ein ReferenzErrorfehler geworfen.
Das Definieren von Funktionen in Klassen erfordert keine Verwendung von Funktionsschlüsselwörtern
14. Symbol
Symbol ist ein neuer Datentyp, dessen Werte eindeutig und unveränderlich sind. Der in ES6 vorgeschlagene Symbol ist es, eine eindeutige Kennung zu erzeugen. Sie können jedoch nicht auf diese Kennung zugreifen:
var sym = symbol ("eine optionale Beschreibung"); console.log (Typof sym); // SymbolBeachten Sie, dass der neue Bediener nicht vor dem Symbol verwendet werden kann.
Wenn es als Eigenschaft eines Objekts verwendet wird, ist diese Eigenschaft unzähliger:
var o = {val: 10, [symbol ("random")]: "Ich bin ein Symbol",}; console.log (Object.getownPropertynames (o)); // valWenn Sie die Objektsymboleigenschaft erhalten möchten, müssen Sie Object.getownPropertysymbols (O) verwenden.
15. Iteratoren
Der Iterator ermöglicht den Zugriff auf ein Element des Datensatzes jedes Mal, wenn ein Element zugegriffen wird. Wenn der Zeiger auf das letzte Element des Datensatzes hinweist, verlässt der Iterator. Es bietet die nächste () -Funktion, die über eine Sequenz iteriert wird, die ein Objekt zurückgibt, das die Fertig- und Wertattribute enthält.
In ES6 können Sie einen Standard -Traverser für das Objekt durch Symbol.iterator festlegen. Unabhängig davon, wann das Objekt durchquert werden muss, kann die @@ Iterator -Methode, die seine Iterator -Methode ausführt, einen Iterator zurückgeben, um den Wert zu erhalten.
Das Array ist standardmäßig Iterator:
var arr = [11,12,13]; var itr = arr [symbol.iterator] (); itr.Next (); // {value: 11, tätig: false} itr.Next (); // {value: 12, tätig: false} itr.next (); // {value: 13, tätig: false} itr.next (); // {value: undefiniert, fertig: true}Sie können einen Iterator für ein Objekt über [symbol.iterator] () anpassen.
16. Generatoren
Die Generatorfunktion ist eine neue Funktion von ES6, mit der eine Funktion ein durchquertes Objekt zurückgeben kann, um mehrere Werte zu erzeugen.
In der Verwendung sehen Sie die * Syntax und eine neue Keyword -Ausbeute:
Funktion *infinitenumbers () {var n = 1; while (wahr) {relief n ++; }} var numbers = infinitenumbers (); // gibt eine iterable Objektnummern zurück .Next (); // {value: 1, tätig: false} numbers.next (); // {value: 2, tätig: false} numbers.next (); // {Wert: 3, fertig: false}Bei jeder Ausführung der Rendite wird der zurückgegebene Wert zum nächsten Wert des Iterators.
17. Versprechen
ES6 hat eine native Unterstützung für Versprechen. Ein Versprechen ist ein Objekt, das auf asynchrone Ausführung wartet. Wenn seine Ausführung abgeschlossen ist, wird sein Staat gelöst oder abgelehnt.
var p = New Promise (Funktion (Resolve, Ablehnung) {if (/ * Bedingung */) {// Erfüllte erfolgreich auflöste (/ * value */);} else {// Fehler, abgelehnt abgelehnt (/ * Grund */);}});Jedes Versprechen hat eine Methode, die zwei Parameter akzeptiert. Die erste besteht darin, den Rückruf des gelösten Zustands zu behandeln, und das andere ist, den Rückruf des abgelehnten Zustands zu verarbeiten:
p.then ((val) => console.log ("Versprechen gelöst", val), (err) => console.log ("Versprechen abgelehnt", err));Das obige ist eine Einführung in den schnellen Start von ECMascript 6, das für alle zusammengestellt wurde. Freunde, die es brauchen, können es lernen und sich darauf beziehen.