ist die Abkürzung für ECMAScript 6, ist der Zukünftige Standard für die Ausführung von JavaScript in aktuellen und kommenden Browsern und Servern. Dabei ist zu bemerken, dass ein NodeJS Server bereits unterstützt, aber manche Browser wie z.B. der IE11 nicht. Jetzt ist die Frage warum zu benutzen, obwohl manche Browser dies noch gar nicht unterstützen. Einmal bringt viele Vorteile in der Programmierung und macht vieles einfacher. Des weiteren gibt es Compiler (Babel), die aus ES5 machen und dadurch kann in ES6 programmiert werden und in ES5 ausgespielt werden.
Übersicht
let und const
ES6 bringt 2 neue Datentypen mit, einmal let und zum anderen const.
let
Der Datentype let ist für Variablen, die nur im aktuellen Block verarbeitet werden sollen. Es ist zu beachten, dass let in einem verschachtelten Block auch verfügbar ist, da sich ja der verschachtelte Block auch im aktuellen Block befindet. Kurz zur Klärung, ein Block ist z.B. eine if Bedingung, eine Funktion oder eine Schleife.
1 Uncaught ReferenceError: a is not defined Zum vergleich dazu ein Beispiel mit var:
Let überschreibt nicht die Variablen die im Block dadrüber liegen. Sprich du kannst eine Variable mit var deklarieren und den gleichen Variablennamen, mit einer let deklaration, in einer if Bedingung benutzen.
Des weiteren ist zu beachten, das z.B. in einer For Schleife der Kopf mit zum Block gehört.
const
Const steht für Konstante, eine Konstante darf nur einmal definiert werden und danach nicht mehr verändert werden, da sonst ein Fehler zurückgegeben wird. Es ist zu beachten, dass bei const immer der Name von der Konstante groß geschrieben wird.
Arrow Funktionen
Vorab erstmal zeige ich dir die „alten" Varianten Funktionen zu definieren.
Diese Definitionen sollten dir bekannt sein. Mit der Arrow Funktion kommt eine dritte Möglichkeit hinzu.
„var newConsole" definiert den Funktionsnamen, „()" die Parameter und „=>" definiert den Übergang zum Funktionsbody. Einer der Vorteile bei dieser Variante ist die Möglichkeit die Funktion zu kürzen. Da wir nur ein Befehl in der Funktion haben, verhält sich das ähnlich wie mit einer if Bedingung, man kann die geschweiften Klammern weg lassen.
Des weiteren kann man sich bei einer einzeiligen Funktion den return sparen.
Bei den Parametern gibt es auch eine kleine Besonderheit. Wenn du mehrere Parameter hast, schreibst du diese einfach mit einem Kommer getrent in die Klammern „= (parm1,parm2,parm3) =>". Falls du nur ein Parameter hast , kannst du dir die Klammern sogar sparen „= parm1 =>". Jetzt zeige ich dir, ein praktisches Beispiel dafür indem ich eine Variable mit einem festen Wert addieren mächte.
Diese Schreibweise macht sich gut bei kurzen Callback Funktionen, z.B. bei diesem Timeout.
Vorteil bei Klassen beim Zugriff auf „this"
Arrow Funktionen unterscheiden sich zu normalen Funktionen in einer riesigen Sache, es verarbeitet „this" anders. Bei Arrow Funktionen wird das this Objekt von der aktuellen deklarationspunkt benutzt. Das wird in einer Klasse am besten sichtbar.
thisTestArrowFunc: TestKlasse {} TestFunktion: Uncaught TypeError: Cannot read property 'test' of undefined Aber die normale Funktion kann auch Vorteile haben, z.B. wenn wir einen Button haben und dieser gedrückt wird, möchte man gerne in der Funktion mit dem Buttonobjekt über this arbeiten. Dies ist mit einer Arrow Funktion kompliziert zu bewerkstelligen.
Wenn jetzt der Button gedrückt wird, wird in der Konsole das Button-Objekt ausgegeben. in JSBin öffnen
Die Arrow Funktion gibt das Window Objekt zurück. in JSBin öffnen
Standardwerte bei Funktionen
Mit ES6 können Funktionen jetzt auch default Werte gegeben werden, sprcih wenn der Parameter nicht mitgegeben wird, wird der Standard Wert verwendet.
true false trueObjekterweiterungen
Objekterweiterungen ist das automatische verwenden von Variablen. Wenn du eine Variable mit dem Namen „name" definierst und danach ein Objekt mit dem Feld „name", wird die erstellte Variable automatisch in das Objekt gespeichert.
[object Object] { nachname: "Borkowski", name: "Marc" }Es ist natürlich möglich das Objektelement zu überschreiben bzw. nicht die Variable zu benutzen.
[object Object] { nachname: "Borkowski", name: "Max" }Jetzt kommt der große Vorteil in der Sache, dies funktioeniert auch mit Funktionen, sprich du erstellst eine Funktion (ES5) und in dieser Funktion kannst du über this auf die einzelnen Elemente zugreifen. Hierdran siehst du auch das Arrow Funktionen Nachteile haben können. Benutze Arrow Funktionen nicht immer, diese können auch Nachteile haben.
dynamisches erstellen von Objektelmenten
Es ist möglich Objektelemente über Variableninhalte zu erstellen, dazu musst du einfach den Variablenname in Eckige Klammern beim Objekt setzen.
[object Object] { nachname: "Borkowski", name: "Max" }Rest Operator
Der Rest Operator transformirt eine Liste von Parametern in ein Array. Das hat den Vorteil, dass die Parameter dynamisch verarbeitet werden können. Der Nachteil ist, dass als Parameter immer eine Liste und kein Array übertragen werden sollte, da sonst das Array wieder in ein Array gepackt wird.
Als praktisches Beispiel nehme ich eine Funktion die alle Parameter summieren soll, Dies ist ohne Rest Operator äußerst schwierig, da wir erst alle möglichen Parameter prüfen müssen.
in JSBin öffnenSpread Operator
Der Spread Operator ist das Gegenteil zum Rest Operator, es wandelt ein Array in eine Liste um. Dies ist ein Vorteil, wenn du zum Beispiel die max Methode verwendest, aber ein Array hast. Der Spread Operator wird diesmal beim Funktionsaufruf verwendet, nicht beim Funktionskopf.
in JSBin öffnenBeim Spread Operator ist auch möglich noch weitere Parameter hinzuzufügen. Man kann sogar mehrere Spread Operatoren hintereinander verwenden.
For of Loop
For of Loop ist eine For Schleife, in der ein Array einfacher verarbeitet werden kann. Jedes Array Element wird temporär, für den einen Intervall, in eine Variable gespeichert.
Dies ist natürlich auch mit einer Schleife machbar, aber diese kürzere Schreibweise macht den Code leserlicher.
Templates
Erstmal möchte ich dir das nach links gedrehte Anführungszeichen vorstellen. Neben Backspace mit gehaltener Shift Taste kannst du das Zeichen tippen -> „. Mit diesem Anführungszeichen ist es möglich Strings über mehrere Zeilen zu schreiben.
Mit den nach links gedrehten Anführungszeichen, ist es möglich Variablen mit einzubetten. Das machst du mit ${variablenname}.
"Herzlich Willkommen Marc"Um ${} zu schreiben ohne das eine Variable ausgegebn werden soll, kannst du die Stelle mit \ maskieren.
Es ist auch möglcih in den geschweiften Klammern Code auszuführen, als Beispiel möchte ich eine Zahl ausgeben und diese in der Ausgabe immer + 1 rechnen.
Destructuring Arrays
Mit Destructuring Arrays kann man Arrays auseinandernehmen bzw. einfacher mit den Werten arbeiten. Wenn du auf der linken Seite der Variablendefinition eckige Klammern schreibst, kannst du auf einzelne Elemente von einem Array zugreifen. Das klingt zwar kompliziert, aber am Code Beispiel wirst du es schnell verstehen.
Es werden 2 Variablen erstellt und diesen werden die Werte von den ersten beiden Elementen des Arrays zugewiesen. Du kannst auch den Rest Operator mit einbauen falls du alle Elemente eines Arrays haben, mit der Außname vom ersten.
Destructuring Arrays hat noch ein großen Vorteil, Variablen vertauschen, früher brauchte man noch eine dritte Variable in den man den Wert zwischen gespeichert hat. Jetzt ist dies mit dieser Technik einfacher zu lösen.
Destructuring Objekte
Was mit Arrays funktioniert, klappt auch mit Objekten. Nur der Unterschied ist, dass geschweifte Klammern verwendet werden, um Objektelemente aus dem Objekt zu „ziehen".
"Marc" 29 "Rostock"Des weiteren kannst du bei Objekten noch ein Alias mithinzufügen. Wenn ein ALias angegeben ist, wird der Variablenname überschrieben. Alias werden nach dem Objektnamen mit einem Doppelpunkt geschrieben.