JavaScript/Tutorials/ES6

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
10-15min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
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).

  • ECMA 6
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

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.


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[Bearbeiten]

Objekt-Literale[Bearbeiten]

Benutzer:Rolf_b/tempObjekteEigenschaften#ECMAScript_6:_Abk.C3.BCrzende_Schreibweisen_und_berechnete_Eigenschaftsnamen

For .. of-Schleifen[Bearbeiten]

Hauptartikel: For..of-Schleife

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


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 + '!';

Pfeilfunktionen (Arrow Functions)[Bearbeiten]

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[Bearbeiten]

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

Hauptartikel: JavaScript/class

Destrukturierung[Bearbeiten]

Iteratoren[Bearbeiten]

Hauptartikel: JavaScript/Iterator

Promises[Bearbeiten]

Symbol[Bearbeiten]


Weblinks[Bearbeiten]