Home-theater-designers
ES6 bezieht sich auf Version 6 der Programmiersprache ECMA Script. ECMA Script ist der standardisierte Name für JavaScript und Version 6 ist die nächste Version nach Version 5, die 2011 veröffentlicht wurde. Es ist eine wesentliche Verbesserung der JavaScript-Sprache und fügt viele weitere Funktionen hinzu, die die umfangreiche Softwareentwicklung erleichtern sollen .
ECMAScript oder ES6 wurde im Juni 2015 veröffentlicht. Es wurde anschließend in ECMAScript 2015 umbenannt. Die Webbrowser-Unterstützung für die vollständige Sprache ist noch nicht vollständig, obwohl große Teile unterstützt werden. Die wichtigsten Webbrowser unterstützen einige Funktionen von ES6. Es ist jedoch möglich, Software zu verwenden, die als a . bekannt ist Spieler um ES6-Code in ES5 umzuwandeln, was von den meisten Browsern besser unterstützt wird.
Sehen wir uns nun einige wichtige Änderungen an, die ES6 an JavaScript mit sich bringt.
1. Konstanten
Endlich hat es das Konzept der Konstanten in JavaScript geschafft! Konstanten sind Werte, die nur einmal definiert werden können (pro Geltungsbereich, unten erklärter Geltungsbereich). Eine Neudefinition innerhalb desselben Geltungsbereichs löst einen Fehler aus.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Sie können die Konstante überall dort verwenden, wo Sie eine Variable verwenden können ( wo ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Blockbezogene Variablen und Funktionen
Willkommen im 21. Jahrhundert, JavaScript! Mit ES6 werden Variablen deklariert mit Lassen (und die oben beschriebenen Konstanten) befolgen Blockbereichsregeln genau wie in Java, C++ usw. (Weitere Informationen finden Sie unter Variablen in JavaScript deklarieren.)
Vor diesem Update waren Variablen in JavaScript funktionsbezogen. Das heißt, wenn Sie 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 (sofern vorhanden) wiederhergestellt.
So blockieren Sie E-Mails in Google Mail auf dem iPhone
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
Innerhalb solcher Blöcke können Sie auch Konstanten neu definieren.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Pfeilfunktionen
ES6 stellt vor Pfeilfunktionen zu JavaScript. (Diese ähneln herkömmlichen Funktionen, haben jedoch eine einfachere Syntax.) Im folgenden Beispiel x ist eine Funktion, die einen Parameter namens . akzeptiert zu , und gibt sein Inkrement zurück:
var x = a => a + 1;
x(4) // returns 5
Mit dieser Syntax können Sie ganz einfach Argumente in Funktionen definieren und übergeben.
Verwendung mit a für jeden() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
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)
// returns
[3, 22, 44, 67, 98]
4. Standardfunktionsparameter
Funktionsparameter können jetzt mit Standardwerten deklariert werden. Im Folgenden, x ist eine Funktion mit zwei Parametern zu und B . Der zweite Parameter B erhält einen Standardwert von 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Im Gegensatz zu anderen Sprachen wie C++ oder Python können Parameter mit Standardwerten vor denen ohne Standardwerte erscheinen. Beachten Sie, dass diese Funktion als Block mit a . definiert ist Rückkehr Wert zur Veranschaulichung.
var x = (a = 2, b) => { return a * b }
Argumente werden jedoch von links nach rechts abgeglichen. Im ersten Aufruf unten, B hat eine nicht definiert Wert obwohl zu wurde mit einem Standardwert deklariert. Das übergebene Argument wird abgeglichen mit zu eher, als B . Die Funktion gibt zurück NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Wenn Sie explizit vorbeikommen nicht definiert als Argument wird der Standardwert verwendet, falls vorhanden.
x(undefined, 3)
// returns 6
5. Parameter der Ruhefunktion
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. Dieser Bedarf wird von der Restfunktionsparameter Syntax. Es bietet eine Möglichkeit, den Rest der Argumente nach den definierten Argumenten zu erfassen, indem die unten gezeigte Syntax verwendet wird. Diese zusätzlichen Argumente werden in einem Array erfasst.
var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. String-Templating
String-Templating bezieht sich auf das Interpolieren von Variablen und Ausdrücken in Strings unter Verwendung einer Syntax wie Perl oder der Shell. Eine String-Vorlage ist in Backtick-Zeichen ( `` ). Im Gegensatz dazu einfache Anführungszeichen ( ' ) oder doppelte Anführungszeichen ( ' ) zeigen normale Zeichenfolgen an. Ausdrücke innerhalb der Vorlage sind zwischen $ { und } . Hier ist ein Beispiel:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Natürlich können Sie einen beliebigen Ausdruck zur Auswertung verwenden.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
Diese Syntax zum Definieren von Strings kann auch verwendet werden, um mehrzeilige Strings zu definieren.
var x = `hello world
next line`
// returns
hello world
next line
7. Objekteigenschaften
ES6 bietet eine vereinfachte Syntax zur Objekterstellung. Schauen Sie sich das folgende Beispiel an:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Berechnete Eigenschaftsnamen sind auch ziemlich raffiniert. Bei ES5 und früheren Versionen mussten Sie Folgendes tun, um eine Objekteigenschaft mit einem berechneten Namen festzulegen:
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
Jetzt können Sie alles in einer einzigen Definition tun:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
Um Methoden zu definieren, können Sie sie natürlich einfach mit dem Namen definieren:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Formale Klassendefinitionssyntax
Klassendefinition
Und schließlich erhält JavaScript eine formale Klassendefinitionssyntax. Obwohl es lediglich syntaktischer Zucker über den bereits verfügbaren protytypbasierten Klassen ist, dient es der Verbesserung der Code-Klarheit. Das heißt das geht nicht Fügen Sie ein neues Objektmodell oder ähnliches hinzu.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Methoden deklarieren
Auch das Definieren einer Methode ist recht einfach. Da gibt es keine Überraschungen.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
Getter und Setter
Wir haben jetzt auch Getter und Setter mit einer einfachen Aktualisierung der Syntax. Lass uns das neu definieren Kreis Klasse mit einem Bereich Eigentum.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
Fügen wir nun einen Setter hinzu. Definieren zu können Radius als einstellbare Eigenschaft sollten wir das eigentliche Feld umdefinieren zu _Radius oder etwas, das nicht mit dem Setter kollidiert. Andernfalls stoßen wir auf einen Stack-Überlauffehler.
Hier ist die neu definierte Klasse:
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Alles in allem ist dies eine nette Ergänzung zu objektorientiertem JavaScript.
Nachlass
Neben der Definition von Klassen mit dem Klasse Stichwort können Sie auch das erweitert Schlüsselwort, um von Superklassen zu erben. Sehen wir uns an einem Beispiel an, wie das funktioniert.
class Ellipse {
constructor(width, height) {
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; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
Und das war eine kurze Einführung in einige der Funktionen von JavaScript ES6.
Als nächstes: Kennenlernen einige wichtige JavaScript-Array-Methoden und Skripting einer sprachsensitiven Roboteranimation ! Informieren Sie sich auch über ein großartiges Front-End-Framework namens Vue .
Bildquelle: micrologia/ Depositphotos
Teilen Teilen Tweet Email Canon vs. Nikon: Welche Kameramarke ist besser?Canon und Nikon sind die beiden größten Namen in der Kamerabranche. Aber welche Marke bietet die bessere Auswahl an Kameras und Objektiven?
So legen Sie ein GIF als Hintergrund festWeiter lesen Verwandte Themen
- Programmierung
- JavaScript
Abonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren