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

neue Syntax

let und const

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.

Beispiel

const pi = 3.142;
var radius = 10;

Empfehlung: Verwenden Sie 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

Hauptartikel: JavaScript/Operatoren/Rest- oder Spread-Operator

Objekt-Literale

Benutzer:Rolf b/tempObjekteEigenschaften#ECMAScript 6: Abkürzende Schreibweisen und berechnete Eigenschaftsnamen

For .. of-Schleifen

Hauptartikel: For..of-Schleife

Template Literale

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}.

Template Literale mit Dollar-Vorzeichen

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:

bisherige Schreibweise

 const greeting = 'Guten Morgen, ich heiße ' + name + '!';

Hauptartikel: JavaScript/Objekte/String/template-literal

Pfeilfunktionen (Arrow Functions)

ES6 führte Pfeile (=>) als Kurzform für die Deklaration von Funktionen ein. Dieses Update hat drei bemerkenswerte Vorteile:

1. Sie müssen nicht mehr die .bind()-Methode verwenden.
2. Der Code ist viel sauberer und kürzer.
3. Sie können die explizite Rückkehr überspringen.

Hauptartikel: Pfeilfunktion

Klassen

Das Schlüsselwort class ermöglicht es, Objekte zu erstellen und Vererbung in Javascript zu realisieren.

Hauptartikel: JavaScript/class

Destrukturierung

Hauptartikel: JavaScript/Destrukturierung

Iteratoren

Hauptartikel: JavaScript/Iterator

Promises

Hauptartikel: JavaScript/Objekte/Promise

Symbol

Hauptartikel: JavaScript/Objekte/Symbol

Weblinks

• http://www.ecma-international.org/ecma-262/6.0/ ECMAScript® 2015 Language Specification 6th Edition / June 2015