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); // 2In 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 definiertIn 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} festlegenDie 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.