Teilen Sie dies:
Was ist ES6 und was Javascript-Programmierer wissen müssen
ES6 bezieht sich auf Version 6 der Programmiersprache ECMA Script. ECMA Script ist der standardisierte Name für JavaScript. Was ist JavaScript und kann das Internet ohne es existieren? Was ist JavaScript und kann das Internet ohne es existieren? JavaScript ist eines der Dinge, die viele als selbstverständlich betrachten. Jeder nutzt es. Lesen Sie mehr, und Version 6 ist die nächste Version nach Version 5, die 2011 veröffentlicht wurde. Sie ist eine wesentliche Verbesserung der JavaScript-Sprache und enthält viele weitere Funktionen, die die Entwicklung von umfangreichen Software-Anwendungen erleichtern sollen.
ECMAScript oder ES6 wurde im Juni 2015 veröffentlicht. Es wurde anschließend in ECMAScript 2015 umbenannt. Die Unterstützung von Webbrowsern für die gesamte Sprache ist noch nicht vollständig, obwohl große Teile davon unterstützt werden. Wichtige Webbrowser unterstützen einige Funktionen von ES6. Es ist jedoch möglich, Software zu verwenden, die als a bezeichnet wird Transpiler zum Konvertieren von ES6-Code in ES5, der von den meisten Browsern besser unterstützt wird.
Lassen Sie uns nun einige wichtige Änderungen betrachten, die ES6 in JavaScript einfügt.
1. Konstanten
Schließlich hat das Konzept der Konstanten es zu JavaScript geschafft! Konstanten sind Werte, die nur einmal definiert werden können (pro Geltungsbereich, nachstehend erläuterter Bereich). Eine Neudefinition innerhalb desselben Bereichs löst einen Fehler aus.
const JOE = 4.0 JOE = 3.5 // führt zu: Nicht abgerufener TypeError: Zuweisung an eine konstante Variable. Sie können die Konstante verwenden, wo immer Sie eine Variable verwenden können (var).
console.log ("Wert ist:" + joe * 2) // druckt: 8 2. Variablen und Funktionen im Blockbereich
Willkommen im 21. Jahrhundert, JavaScript! Mit ES6 deklarierte Variablen mit Lassen (und Konstanten, die oben beschrieben werden) folgen Block-Scoping-Regeln wie in Java, C ++ usw.
Vor diesem Update hatten Variablen in JavaScript einen Funktionsumfang. Wenn Sie also einen neuen Gültigkeitsbereich für eine Variable benötigten, mussten Sie ihn innerhalb einer Funktion deklarieren.
Variablen behalten den Wert bis zum Ende des Blocks. Nach dem Block wird der Wert im äußeren Block (falls vorhanden) wiederhergestellt.
sei x = "Hallo"; sei x = "Welt"; console.log ("innerer Block, x =" + x); console.log ("äußerer Block, x =" + x); // druckt den inneren Block, x = Welt äußeren Block, x = Hallo Sie können auch Konstanten innerhalb solcher Blöcke neu definieren.
sei x = "Hallo"; const x = 4,0; console.log ("innerer Block, x =" + x); try x = 3.5 catch (err) console.error ("innerer Block:" + err); x = "Welt"; console.log ("äußerer Block, x =" + x); // druckt den inneren Block, x = 4 innerer Block: TypeError: Zuweisung an eine konstante Variable. äußerer Block, x = Welt 3. Pfeilfunktionen
ES6 bietet eine neue Syntax zum Definieren von Funktionen mithilfe eines Pfeils. Im folgenden Beispiel, x ist eine Funktion, die einen aufgerufenen Parameter akzeptiert ein, und gibt sein Inkrement zurück:
var x = a => a + 1; x (4) // gibt 5 zurück Mit dieser Syntax können Sie in Funktionen problemlos Argumente definieren und übergeben.
Verwendung mit einem für jeden():
[1, 2, 3, 4] .forEach (a => console.log (a + "=>" + a * a)) // druckt 1 => 1 2 => 4 3 => 9 4 => 16 Definieren Sie Funktionen, die mehrere Argumente akzeptieren, indem Sie sie in Klammern einschließen:
[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // gibt zurück [3, 22, 44, 67, 98] 4. Standardfunktionsparameter
Funktionsparameter können jetzt mit Standardwerten deklariert werden. Im Folgenden, x ist eine Funktion mit zwei Parametern ein und b. Der zweite Parameter b erhält einen Standardwert von 1.
var x = (a, b = 1) => a * b x (2) // gibt 2 x (2, 2) // zurück und gibt 4 zurück Im Gegensatz zu anderen Sprachen wie C ++ oder Python können Parameter mit Standardwerten vor denen ohne Standardwerte angezeigt werden. Beachten Sie, dass diese Funktion als Block mit a definiert ist Rückkehr Wert zur Veranschaulichung.
var x = (a = 2, b) => return a * b Die Argumente werden jedoch von links nach rechts abgeglichen. Beim ersten Aufruf unten, b hat eine nicht definiert Wert auch wenn ein wurde mit einem Standardwert deklariert. Das übergebene Argument wird mit abgeglichen ein eher, als b. Die Funktion kehrt zurück NaN.
x (2) // gibt NaN zurück x (1, 3) // gibt 3 zurück Wenn du explizit eingibst nicht definiert Als Argument wird der Standardwert verwendet, sofern vorhanden.
x (undefined, 3) // gibt 6 zurück 5. Restfunktionsparameter
Beim Aufrufen einer Funktion besteht manchmal die Notwendigkeit, eine beliebige Anzahl von Argumenten übergeben zu können und diese Argumente innerhalb der Funktion zu verarbeiten. Dieses Bedürfnis wird von der Restfunktionsparameter Syntax. Es bietet eine Möglichkeit, den Rest der Argumente nach den definierten Argumenten mit der unten gezeigten Syntax zu erfassen. Diese zusätzlichen Argumente werden in einem Array erfasst.
var x = Funktion (a, b,… args) console.log ("a =" + a + "), b =" + b + "," + args.length + "args left"); x (2, 3) // druckt a = 2, b = 3, 0 links übrig x (2, 3, 4, 5) // druckt a = 2, b = 3, 2 links übrig 6. Stringvorlagen
String-Templating bezieht sich auf das Interpolieren von Variablen und Ausdrücken in Strings mit einer Syntax wie Perl oder der Shell. Eine Zeichenkettenvorlage ist in Back-Tick-Zeichen eingeschlossen ('). Im Gegensatz dazu sind einfache Anführungszeichen (') oder doppelte Anführungszeichen (“) zeigen normale Zeichenfolgen an. Die Ausdrücke in der Vorlage werden zwischen markiert $ und . Hier ist ein Beispiel:
var name = "joe"; var x = 'hallo $ name' // gibt "hallo joe" zurück Natürlich können Sie einen beliebigen Ausdruck zur Auswertung verwenden.
// Definiere eine Pfeilfunktion var f = a => a * 4 // setze einen Parameterwert var v = 5 // und werte die Funktion innerhalb der Stringvorlage var x = 'hallo $ f (v)' // gibt "Hallo 20" zurück Diese Syntax zum Definieren von Strings kann auch zum Definieren von mehrzeiligen Strings verwendet werden.
var x = 'Hallo Welt nächste Zeile' // gibt Hallo Welt nächste Zeile zurück 7. Objekteigenschaften
ES6 bietet eine vereinfachte Objekterstellungssyntax. Schauen Sie sich das Beispiel unten an:
var x = "Hallo Welt", y = 25 var a = x, y // entspricht dem ES5: x: x, y: y Berechnete Eigenschaftsnamen sind auch recht geschickt. Um mit ES5 und früheren Versionen eine Objekteigenschaft mit einem berechneten Namen festzulegen, mussten Sie Folgendes tun:
var x = "hallo Welt", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a ist jetzt: x: "hallo Welt", y: 25 joe25: 4 Jetzt können Sie alles in einer einzigen Definition ausführen:
var a = x, y, ["joe" + y]: 4 // gibt x zurück: "Hallo Welt", y: 25, joe25: 4 Und um Methoden zu definieren, können Sie sie natürlich auch mit dem Namen definieren:
var a = x, y, ["joe" + y]: 4, foo (v) return v + 4 a.foo (2) // gibt 6 zurück 8. Formale Klassendefinitionssyntax
Klassendefinition
Schließlich erhält JavaScript eine formale Klassendefinitionssyntax. Zwar handelt es sich lediglich um syntaktischen Zucker über die bereits verfügbaren Klassen, die auf Protytypen basieren, aber er dient der Verbesserung der Codeklarheit. Das heißt, das tut es nicht Fügen Sie ein neues Objektmodell oder etwas anderes hinzu.
class Circle Konstruktor (Radius) this.radius = radius // Verwendung davon var c = new Circle (4) // gibt zurück: Circle radius: 4 Methoden deklarieren
Eine Methode zu definieren ist auch recht einfach. Keine Überraschungen da.
class Circle Konstruktor (Radius) this.radius = radius computeArea () return Math.PI * this.radius * this.radius var c = new Circle (4) c.computeArea () // gibt Folgendes zurück: 50.26548245743669 Getter und Setter
Wir haben jetzt auch Getter und Setter mit einem einfachen Update der Syntax. Lassen Sie uns das neu definieren Kreis Klasse mit einem Bereich Eigentum.
class Circle Konstruktor (Radius) this.radius = radius get area () return Math.PI * this.radius * this.radius var c = neuer Kreis (4) // gibt zurück: Circle radius: 4 c.area // gibt zurück: 50.26548245743669 Lassen Sie uns nun einen Setter hinzufügen. Definieren können Radius als einstellbare Eigenschaft sollten wir das eigentliche Feld in neu definieren _Radius oder etwas, das nicht mit dem Setter zusammenstößt. Andernfalls tritt ein Stapelüberlauffehler auf.
Hier ist die neu definierte Klasse:
class Circle Konstruktor (Radius) this._radius = radius get area () return Math.PI * this._radius * this._radius set radius (r) this._radius = r var c = neuer Kreis (4) // gibt zurück: Circle _radius: 4 c.area // gibt zurück: 50.26548245743669 c.radius = 6 c.area // gibt zurück: 113.09733552923255 Alles in allem ist dies eine schöne Ergänzung zu objektorientiertem JavaScript.
Erbe
Zusätzlich zur Definition von Klassen mit Klasse Sie können auch das Schlüsselwort verwenden erweitert Schlüsselwort zum Erben von Superklassen. Lassen Sie uns sehen, wie dies an einem Beispiel funktioniert.
Klasse Ellipse Konstruktor (Breite, Höhe) this._width = width; this._height = height; get area () return Math.PI * this._width * this._height; set width (w) this._width = w; set height (h) this._height = h; Klasse Circle erweitert Ellipse Konstruktor (Radius) Super (Radius, Radius); set radius (r) super.width = r; Superhöhe = r; // Einen Kreis erstellen var c = new Circle (4) // gibt zurück: Circle _width: 4, _height: 4 c.radius = 2 // c ist jetzt: Circle _width: 2, _height: 2 c.area // gibt zurück: 12.566370614359172 c.radius = 5 c.area // liefert zurück: 78.53981633974483 Dies war eine kurze Einführung in einige Funktionen von JavaScript ES6.
Weiter: Scripting einer sprachempfindlichen Roboteranimation Skriptieren einer sprachempfindlichen Roboteranimation in p5.js Erstellen eines Skriptes einer sprachempfindlichen Roboteranimation in p5.js Möchten Sie, dass Ihre Kinder sich für die Programmierung interessieren? Zeigen Sie ihnen diese Anleitung zum Erstellen eines animierten Roboterkopfs mit Geräuschreaktion. Weiterlesen !
Bild-Gutschrift: micrologia / Depositphotos
Erfahren Sie mehr über: JavaScript, .