JavaScript/Tutorials/ES6
Text-Info
- 10-15min
- mittel
- Kenntnisse in
● JavaScript
JavaScript wurde 1995 von Netscape eingeführt und später von der Ecma als ECMAScript standardisiert. In der Geschichte seiner Entwicklung stand anfangs der schlechte Ruf durch missbräuchliche Verwendung zur Gestaltung von Webseiten und vermeintliche Sicherheitslücken.
2015 wurde die sechste Version von ECMAScript (ES6) veröffentlicht, die mittlerweile von allen modernen Browsern unterstützt wird. Es war seit der Veröffentlichung von ES5 im Jahre 2009 die erste grundlegende Überarbeitung von JavaScript. Dieses Tutorial soll Ihnen die wichtigsten Neuerungen vorstellen und auf entsprechende Seiten im SELF-Wiki verweisen.
Die Weiterführung der mit ES6 begonnenen Änderungen werden nach dem Jahr ihres Erscheinens benannt (ECMAScript 2019).
Details: caniuse.com
Inhaltsverzeichnis
neue Syntax[Bearbeiten]
let und const[Bearbeiten]
ES6 führte die Schlüsselwörter let und const ein, die es uns ermöglichen Variablen viel einfacher zu deklarieren. Variablen, die mit var deklariert wurden, waren als globale Variablen innerhalb des gesamten Scripts gültig.
Mit let
und const
deklarierte Variablen sind Block-skopiert, was bedeutet, dass sie nur innerhalb des Anweisungsblocks zugänglich sind, in dem sie deklariert wurden. Wenn wir also eine Variable mit let
deklarieren, ändert sie ihren Wert im äußeren Bereich nicht. const
ist ähnlich, aber der Wert von Variablen, die mit diesem Schlüsselwort deklariert wurden, kann sich durch Neuzuweisung nicht ändern. Es gibt keine feste Regel, wann welche Variablen zu verwenden sind.
const pi = 3.142;
var radius = 10;
var
für die Deklaration von Variablen der obersten Ebene, die von vielen Bereichen gemeinsam genutzt werden. Verwenden Sie let
für kleinere Gültigkeitsbereiche.Rest- und Spread-Operator[Bearbeiten]
Objekt-Literale[Bearbeiten]
For .. of-Schleifen[Bearbeiten]
Template Literale[Bearbeiten]
Template Literals (englisch für Vorlagenzeichenfolgen) ermöglichen die einfache Implementierung von Variablen mit einer sehr einfachen Syntax (${ }
) und die Einbettung von Ausdrücken.
So können Vorlagen verschachtelt, bzw. Zeichenketten einfacher zusammengefügt werden.
- Die Syntax der Schablonenliterale ist in Backticks eingeschlossen.
- Die Syntax-Platzhalter in Schablonenliteralen verwenden
${expression}
.
let name = Stefan;
const greeting = `Guten Morgen, ich heiße ${name}!`;
console.log(greeting);
Bisher hätte man die Strings mit dem Zeichenkettenverknüpfungsoperator + verbinden müssen:
const greeting = 'Guten Morgen, ich heiße ' + name + '!';
Pfeilfunktionen (Arrow Functions)[Bearbeiten]
ES6 führte Pfeile (=>
) als Kurzform für die Deklaration von Funktionen ein. Dieses Update hat drei bemerkenswerte Vorteile:
- Sie müssen nicht mehr die .bind()-Methode verwenden.
- Der Code ist viel sauberer und kürzer.
- Sie können die explizite Rückkehr überspringen.
Klassen[Bearbeiten]
Das Schlüsselwort class ermöglicht es, Objekte zu erstellen und Vererbung in Javascript zu realisieren.
Destrukturierung[Bearbeiten]
Iteratoren[Bearbeiten]
Promises[Bearbeiten]
Symbol[Bearbeiten]
Weblinks[Bearbeiten]
- http://www.ecma-international.org/ecma-262/6.0/ ECMAScript® 2015 Language Specification 6th Edition / June 2015