4 neue Syntaxen in JavaScript 6

Die ES6-Version von JS wurde von großen Browsern häufig unterstützt, und viele Front-End-Frameworks haben auch ES6 verwendet, und Babel kann für die Kompatibilität verwendet werden, sodass ES6 in die Anwendungsstufe eingegeben wurde.

Wenn Sie mit ES6 nicht vertraut sind, finden Sie hier 4 einfache Grundnutzungen, die Ihnen helfen können, ES6 schnell zu verstehen

1. Deklarieren Sie Variablen mit LET und const

Im herkömmlichen ES5 -Code gibt es zwei Hauptprobleme mit variablen Deklarationen

(1) mangelnde Unterstützung für den Blockbereich

(2) Konstanten können nicht deklariert werden

In ES6 wurden diese beiden Probleme gelöst, wobei zwei neue Schlüsselwörter hinzugefügt wurden: LET und CONST

Verwenden Sie den Blockablager

 var a = 1; if (true) {var b = 2;} console.log (a); // 1console.log (b); // 2

In der ES5 kann die im IF -Block deklarierte Variable B außerhalb des Blocks zugegriffen werden.

 // in es6let a = 1; if (true) {lass b = 2;} console.log (a); // 1console.log (b); // ReferenzError: B ist nicht definiert

In ES6 kann die Variable B mit LET -ON -IF -Block nicht außerhalb des Blocks zugegriffen werden

Der folgende Code ist eine häufige verwirrende Situation

 var a = []; für (var i = 0; i <5; i ++) {a.push (function () {console.log (i);});} a.foreach (function (value) {value ();});

Die Ergebnisse des Laufs sind: 5, 5, 5, 5, 5

Verwenden Sie die Variable I in Schleife deklarieren

 var b = []; für (sei i = 0; i <5; i ++) {b.push (function () {console.log (i);});} b.foreach (function (value) {value ();});

Die Ergebnisse des Laufs sind: 0, 1, 2, 3, 4

Konstanten mit const definieren

 // in es5var my_constant = true; my_constant = false;

Konstanten können nicht in ES5 definiert werden, Werte können geändert werden, und wir können sie nur selbst garantieren.

 // in ES6Const my_constant = true; my_constant = false; // Uncortn TypeError: Zuordnung zur konstanten Variablen

In ES6 deklariert konstant kann nicht geändert werden

2. Vorlage Zeichenfolge

Die folgende Methode des Spleißens und Variablen ist häufiger

var url = 'http: // www.' + Domäne + '.com/' + Pfad + '?' + Queryparams;

ES6 bietet eine kurze Verwendung

Sei url = `http: //www.$ {domain} .com/$ {path}? $ {queryparams}`;

3.. Neue Set- und Kartenobjekte

In ES5 verwenden wir häufig Arrays, um beispielsweise dynamische Daten zu speichern

 var collection = []; Sammlung.push (1, 2, 1); console.log (Sammlung); // [1, 2, 1]

Es enthält doppelte Daten. Wenn Sie keine doppelten Daten möchten, müssen Sie Code verwenden, um sie zu beurteilen.

 Funktion addToCollection (Sammlung, Wert) {if (collection.indexof (value) <0) {collection.push (value)}}

ES6 bietet festgelegte Objekte, was es viel bequemer macht, diese Situation zu bewältigen.

 collection = new set (); Sammlung.Add (1); Sammlung.Add (2); Sammlung.Add (1); Konsole.log (Sammlung); // {1, 2} festlegen

Die SET kann den Satz auch bequem durchqueren und die Daten im Satz verarbeiten.

ES5 wird normalerweise verwendet, um beispielsweise Schlüsselwertpaardaten zu speichern

 var collection = {}; Sammlung.A = 'ABC'; Sammlung.b = 'xyz';

ES6 hat eine Karte, also kann sie verwendet werden

 let collection = new map (); collection.set ('a', 'ABC'); Collection.set ('B', 'xyz');

Traversal ist auch sehr einfach

 Collection.foreach (Funktion (Wert, Schlüssel) {console.log (Schlüssel + ":" + Wert);}); console.log (collection.size);

4. Funktionsparameter

Es gibt zwei neue Funktionen für die Parameter von Funktionen in ES6

Standardwert

 Funktion doomething (etwasObject) {console.log (einigeObject);}

Hier kann ein Laufzeitfehler stattfinden und die Parameter müssen überprüft werden.

 Funktion dosomething (einigeObject) {if (einigeObject === undefined) {einigeObject = {}; } console.log (einigeObject);}

Diese Art von Verifizierungscode ist sehr häufig. Sie können Standardwerte für Parameter in ES6 festlegen, was viel einfacher ist.

 Funktion dosomething (einigeObject = {}) {console.log (einigeObject);}

Objektzerstörung

Wir übergeben häufig ein Objekt, das Schlüsselwertpaare als Parameter an eine Funktion enthält, und erhalten dann die verschiedenen Eigenschaften des Objekts innerhalb der Funktion

 Funktion doometheting (einigeObject) {var One = einigeObject.Propone; console.log (eins); var zwei = seltsObject.proptwo; console.log (zwei); var drei = einigeObject.propthree; console.log (drei);}

ES6 ermöglicht es uns, Objektparameter direkt in Parametern zu dekonstruieren

 Funktion dosomething ({Propone, Proptwo, Prothree}) {console.log (PROPONE); console.log (proptwo); console.log (prothree);}

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.