Vorlagenzeichenfolge
Dies ist eine der Eigenschaften von ES6, die mir sehr gefällt. Es spiegelt die Beziehung zwischen Variablen und Strings sehr intuitiv wider. Wenn wir in ES5 den Zeichenfolgen Variablen hinzufügen möchten, müssen wir die folgende Schreibmethode verwenden:
Animate (Box, 'Translate (-' + itemwidth * num + 'px, 0)', 1000, function () {box.style.transitionDuration = ''; box.style.transform = 'translate (-800px, 0)'; Flag = true;});Verwenden Sie nun ES6 -Vorlagen -Zeichenfolgen, können Sie direkte Zeichenfolgen und Variablen kombinieren, um das Verständnis zu erleichtern.
Animate (Box, `Translate (-$ {itemwidth*num} px, 0)`, 1000, function () {box.style.transitionDuration = ''; box.style.transform = `translate (-$ {itemwidth*(item.Length-2)} px, 0)`;Ist es sehr intuitiv und bequem? Aus den beiden oben genannten einfachen Beispielen ist offensichtlich, dass in ES6 Strings mit Backknicks (``) gekennzeichnet sind, die bekannt werden müssen.
Es gibt noch eine weitere Funktion. Die Vorlagenzeichenfolge kann eine gefaltete Zeichenfolge ausgeben, die in herkömmlichen ES5 -Zeichenfolgen unmöglich ist. Es muss (/n) verwendet werden und kann nicht geschrieben werden, um beim Schreiben die Wagenrendite einzugeben. In der ES6 -String -Vorlage kann sie jedoch direkt geschrieben werden, um direkt einzugeben und zu speichern, und dann direkt ausgabe, wenn die Zeichenfolge ausgegeben wird, was sehr bequem ist.
lass myString = `abcdeffff fas`; console.log (MyString);/*Ausgabe abcDeffff fas*///
Erweiterung der Funktionen
1. Setzen Sie Standardwerte für die Funktion
In der Erweiterung der Funktion wird eine Funktion hinzugefügt, um Standardwerte für die Funktion festzulegen, die als sehr gut bezeichnet werden kann. Erinnerst du dich, wie wir Standardwerte für Funktionen in ES5 festgelegt haben?
Funktionstest (a, b, c) {var a = a || 10; var a = b || 15; var c = c || 20; console.log (a+b+c);}Hier setzen wir den Standardwert, um unseren erwarteten Effekt bis zu einem Tag zu erzielen. Wir verabschieden A = 0 Zoll. Zu diesem Zeitpunkt ist es falsch, dass wir auf diese Weise schreiben. Für das Programm ist 0 falsch, so dass A den Standardwert von 10 nimmt, wodurch der erwartete Effekt nicht erreicht wird. ES6 bietet uns jedoch eine sehr gute Möglichkeit, Standardwerte festzulegen. Der obige Code kann wie folgt umgeschrieben werden:
Funktionstest (a = 10, b = 15, c = 20) {console.log (a+b+c);}2. Pfeilfunktion
Schüler, die Coffics verstehen, sollten klar sein, dass die Kraft des Coffeescripts seine allgegenwärtige Pfeilfunktion ist, die sehr angenehm zu schreiben ist. Jetzt hat ES6 die Pfeilfunktion offiziell eingeführt, damit unser Programm beispielsweise vereinfacht werden kann:
// Die Schreibmethode von ES5 var test = Funktion (a, b) {return a+b;} // Die Pfeilfunktion von ES6 var test2 = test (a, b) => a+b;Beim Schreiben von Karussellern müssen Sie die Maus im Array -Objekt der kleinen Punkte zu den folgenden kleinen Punkten bewegen, damit sich der Diagramm in die richtige Position bewegen kann. In ES5 müssen wir dem aktuellen Objekt Attribute hinzufügen, das umständlich zu schreiben ist, und die Schreibmethode lautet wie folgt:
var lilist = document.querySelectorAll ('li'); für (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; lilist [i] .AdDeVentListener ('mouseenter', function () {console.log (this.index);}, false);}Dieses Attribut für das Index ist der Index des auf der aktuellen Maus platzierten Elements, und dann wird das aktuelle Element basierend auf diesem Index erhalten. In ES6 können wir jedoch die Pfeilfunktion und den neu eingeführten FindIndex im Array direkt verwenden, um den Index des aktuellen aktiven Elements zu finden. Der Code ist wie folgt:
lilist = document.querySelectorAll ('li'); lass arrayLilist = array.form (lilist); für (var i = 0; i <lilist.length; i ++) {lilist [i] .Index = i; lilist [i] .AdDeVentListener ('Mouseenter', function () {lass thisInIndex = arrayLilist.findIndex ((n) => n == this);}, false);}Dieser durch den oben genannte Code erhaltene Index ist der in der aktuelle Maus platzierte Index. Hier verstehe ich den Parameter n in der Pfeilfunktion. Nach dem Eingeben des Parameters N durchquert es das Objekt im Array, um das Objekt gleich zu finden und dann seinen Index zurückzugeben. Array.From () wird hier verwendet. Dies ist eine neue Methode, die dem Array in ES6 hinzugefügt wurde und das Klassenarray in ein Array umwandeln kann.
Es6 ist für… von Schleife
Die obige JS -Codeschleife verwendet für, aber tatsächlich kann sie durch die für… der Schleife in ES6 ersetzt werden, was das Schreiben prägnanter macht. Erinnerst du dich an die für… in Schleife in JS? Diese Schleife kann die Tasten in Schlüsselwertpaaren schaufeln, die Werte jedoch nicht schleifen. Die Entstehung von für… von ist, seine Mängel auszugleichen. Zu den Bereichen, die von der For… der Schleife verwendet werden können, gehören Arrays, Set- und Kartenstrukturen, einige Array-ähnliche Objekte (wie Argumenteobjekte, Domnnodelisten-Objekte), Generatorobjekte und Zeichenfolgen. Daher können wir diese Schleife verwenden, um die für die Schleife für die Schleife zu ersetzen . Hier sollten wir jedoch beachten, dass ein Fehler unter Chrome49 gemeldet wird, wenn Sie die für ... der Schleife direkt verwenden. Der Beamte hat bestätigt, dass dies ein Fehler von Chrome49 ist und in Chrome51 behoben wird . Als ich schrieb, benutzte ich Array.from (), um das Nodelist -Objekt in ein Array umzuwandeln, damit ich mit Zuversicht arbeiten kann. Der Code ist wie folgt:
lilist = document.querySelectorAll ('li'); lass arrayLilist = array.form (lilist); für (li lilist) {li.addeventListener ('mouseenter', function () {lass thisIntex = arraylilist.findindex ((n) => n ==);Zusammenfassen
Das obige ist der gesamte Inhalt dieses Artikels. Ist es nicht sehr prägnant? In diesem Artikel habe ich das Gefühl, dass nur diese Dinge den Charme von ES6 bereits fühlen lassen. Ich hoffe, es wird für alle hilfreich sein, ES6 zu lernen.