JavaScript ES6 Features (Deutsch)

In diesem Tutorial erfahren Sie mehr über die neuen Funktionen in der neuesten Version von JavaScript.

Was ist ECMAScript 6 (oder ES6)

ECMAScript 2015 (oder ES6) ist die sechste und wichtigste Ausgabe des ECMAScript Language Specification Standard. Es definiert den standard für die JavaScript-Implementierung.

ES6 brachte wesentliche änderungen an der JavaScript-Sprache., Es werden mehrere neue Funktionen eingeführt, z. B. Blockvariablen, eine neue Schleife zum Iterieren von Arrays und Objekten, Vorlagenliterale und viele andere Verbesserungen, um die JavaScript-Programmierung einfacher und unterhaltsamer zu gestalten. In diesem Kapitel werden einige der besten ES6-Funktionen beschrieben, die Sie in Ihrer täglichen JavaScript-Codierung verwenden können.

Das Schlüsselwort let

ES6 führt das neue Schlüsselwort let zum Deklarieren von Variablen ein. Vor ES6 war die einzige Möglichkeit, eine Variable in JavaScript zu deklarieren var Schlüsselwort., Mal sehen, was der Unterschied zwischen ihnen ist.

Es gibt zwei kritische Unterschiede zwischen var und let. Variablen, die mit dem Schlüsselwort var deklariert wurden, sind Funktionsbereiche und werden in ihrem Bereich oben angehoben, während Variablen, die mit let deklariert wurden, Blockbereiche sind ({}) und nicht angehoben werden.

Block scoping bedeutet einfach, dass ein neuer Bereich zwischen einem Paar geschweifter Klammern erstellt wird, dh {}., Wenn Sie also eine Variable mit dem Schlüsselwort let innerhalb einer Schleife deklarieren, existiert sie nicht außerhalb der Schleife, wie im folgenden Beispiel gezeigt:

Wie Sie im obigen Beispiel sehen können, ist die Variable i im ersten Block außerhalb der Schleife for nicht zugänglich. Auf diese Weise können wir denselben Variablennamen auch mehrmals wiederverwenden, da sein Gültigkeitsbereich auf den Block beschränkt ist ({}), was zu einer geringeren Variablendeklaration und saubererem Code führt.,

Das Schlüsselwort const

Das neue Schlüsselwort const ermöglicht die Definition von Konstanten. Konstanten sind schreibgeschützt, Sie können ihnen keine neuen Werte zuweisen. Sie sind auch blockreich wie let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

Sie können jedoch weiterhin Objekteigenschaften oder Array-Elemente ändern:

Das for…der Schleife

Die neuefor...of – Schleife ermöglicht es uns, sehr einfach über Arrays oder andere iterierbare Objekte zu iterieren., Außerdem wird der Code innerhalb der Schleife für jedes Element des iterierbaren Objekts ausgeführt. Hier ist ein Beispiel:

Diefor...of Schleife funktioniert nicht mit Objekten, da sie nicht iterierbar sind. Wenn Sie über die Eigenschaften eines Objekts iterieren möchten, können Sie die Schleife for-in verwenden.

Vorlagenliterale

Vorlagenliterale bieten eine einfache und saubere Möglichkeit, mehrzeilige Zeichenfolgen zu erstellen und Zeichenfolgeninterpolationen durchzuführen. Jetzt können wir Variablen oder Ausdrücke an jeder Stelle problemlos in eine Zeichenfolge einbetten.,

Template-Literale sind erstellt mit Rücken-tick – (` `) (grave accent) – Zeichen anstelle der üblichen doppelten oder einfachen Anführungszeichen. Variablen oder Ausdrücke können mithilfe der Syntax ${...} in die Zeichenfolge eingefügt werden. Vergleichen Sie die folgenden Beispiele und sehen Sie, wie nützlich es ist:

Um dies zu erreichen, mussten wir in ES5 Folgendes schreiben:

Standardwerte für Funktionsparameter

Jetzt können Sie in ES6 Standardwerte für die Funktionsparameter angeben., Dies bedeutet, dass, wenn keine Argumente für die Funktion bereitgestellt werden, wenn sie aufgerufen wird, diese Standardparameterwerte verwendet werden. Dies ist eine der am meisten erwarteten Funktionen in JavaScript. Hier ist ein Beispiel:

Um dies in ES5 zu erreichen, mussten wir Folgendes schreiben:

Pfeilfunktionen

Pfeilfunktionen sind ein weiteres interessantes Merkmal in ES6. Es bietet eine prägnantere Syntax zum Schreiben von Funktionsausdrücken, indem die Schlüsselwörter function und return deaktiviert werden.,

Pfeilfunktionen werden mit einer neuen Syntax definiert, der fat arrow (=>) Notation. Mal sehen, wie es aussieht:

Wie Sie sehen können, gibt es keine function und return Schlüsselwort in der Funktionsdeklaration.

Sie können auch die Klammern überspringen, dh () wenn genau ein Parameter vorhanden ist, müssen Sie ihn jedoch immer verwenden, wenn Sie Null oder mehr als einen Parameter haben.,

Wenn sich mehr als ein Ausdruck im Funktionskörper befindet, müssen Sie ihn außerdem um Klammern wickeln ({}). In diesem Fall müssen Sie auch die return Anweisung verwenden, um einen Wert zurückzugeben.

Es gibt verschiedene Varianten, wie Sie Pfeilfunktionen schreiben können. Hier sind die am häufigsten verwendeten:

Es gibt einen wichtigen Unterschied zwischen regulären Funktionen und Pfeilfunktionen., Im Gegensatz zu einer normalen Funktion hat eine Pfeilfunktion keine eigene this, sie nimmt this von der äußeren Funktion, in der sie definiert ist. In JavaScript ist this der aktuelle Ausführungskontext einer Funktion.,

Um dies klar zu verstehen, schauen wir uns die folgenden Beispiele an:

Umschreiben desselben Beispiels mit ES6-Vorlagenliteralen und Pfeilfunktion:

Wie Sie deutlich sehen können, bezieht sich das Schlüsselwort this im obigen Beispiel auf den Kontext der Funktion, die die Pfeilfunktion umschließt, die ein Objekt ist (Zeile no-9), im Gegensatz zum vorherigen Beispiel, in dem es sich auf das globale Objektfenster bezog (Zeile no-9).

Klassen

In ECMAScript 5 und früher waren Klassen in JavaScript nie vorhanden., Klassen werden in ES6 eingeführt, das Klassen in anderen objektorientierten Sprachen wie Java, PHP usw. ähnelt., sie funktionieren jedoch nicht genau so. ES6-Klassen erleichtern das Erstellen von Objekten, die Implementierung der Vererbung mithilfe des Schlüsselworts extends und die Wiederverwendung des Codes.

In ES6 können Sie eine Klasse mit dem neuen Schlüsselwort class deklarieren, gefolgt von einem Klassennamen. Standardmäßig werden Klassennamen in TitleCase geschrieben (dh Großschreibung des ersten Buchstabens jedes Wortes).,

Im obigen Beispiel erbt die Square-Klasse von Rectangle mit dem Schlüsselwort extends. Klassen, die von anderen Klassen erben, werden als abgeleitete Klassen oder untergeordnete Klassen bezeichnet.

Außerdem müssen Sie super() im untergeordneten Klassenkonstruktor aufrufen, bevor Sie auf den Kontext zugreifen (this)., Wenn Sie beispielsweise die super() weglassen und die getArea() – Methode für ein quadratisches Objekt aufrufen, führt dies zu einem Fehler, da die getArea() – Methode Zugriff auf das Schlüsselwort this erfordert.

Module

Vor ES6 gab es keine native Unterstützung für Module in JavaScript. Alles in einer JavaScript-Anwendung, z. B. Variablen in verschiedenen JavaScript-Dateien, teilte denselben Gültigkeitsbereich.

ES6 führt ein dateibasiertes Modul ein, in dem jedes Modul durch eine separate .js – Datei dargestellt wird., Jetzt können Sie dieexport oderimport Anweisung in einem Modul verwenden, um Variablen, Funktionen, Klassen oder eine andere Entität in/aus anderen Modulen oder Dateien zu exportieren oder zu importieren.

Lassen Sie uns ein Modul erstellen, dh eine JavaScript-Datei „main.js „und platziere den folgenden Code darin:

Erstelle jetzt eine weitere JavaScript-Datei“ App.js „mit folgendem Code:

Endlich eine HTML-Datei erstellen“ Test.html “ und mit dem folgenden Code und öffnen Sie diese HTML-Datei in Ihrem Browser mithilfe des HTTP-Protokolls (oder verwenden Sie localhost). Beachten Sie auch die type="module" auf Skript-Tag.,

Die Restparameter

ES6 führt Restparameter ein, mit denen wir eine beliebige Anzahl von Parametern in Form eines Arrays an eine Funktion übergeben können. Dies ist besonders hilfreich in Situationen, in denen Sie Parameter an eine Funktion übergeben möchten, aber keine Ahnung haben, wie viele Sie benötigen.

Ein Rest-Parameter wird durch Voranstellen eines benannten Parameters mit dem Rest-Operator (...) angegeben, dh drei Punkte. Rest-Parameter kann nur der letzte in der Liste der Parameter sein, und es kann nur einen Rest-Parameter geben., Schauen Sie sich das folgende Beispiel an, um zu sehen, wie es funktioniert:

Wenn der rest-Parameter der einzige Parameter in einer Funktion ist, werden alle Argumente an die Funktion übergeben, andernfalls werden die restlichen Argumente abgerufen, die die Anzahl der benannten Parameter überschreiten.

Der Spread-Operator

Der Spread-Operator, der auch mit (...) bezeichnet wird, führt die genau entgegengesetzte Funktion des Rest-Operators aus. Der Spread-Operator verteilt (dh teilt) ein Array und übergibt die Werte an die angegebene Funktion, wie im folgenden Beispiel gezeigt:

Der Spread-Operator kann auch verwendet werden, um die Elemente eines Arrays in ein anderes Array einzufügen, ohne die Array-Methoden wie push(), unshift() concat() usw.,

Destrukturierungszuweisung

Die Destrukturierungszuweisung ist ein Ausdruck, der es einfach macht, Werte aus Arrays oder Eigenschaften aus Objekten in verschiedene Variablen zu extrahieren, indem eine kürzere Syntax bereitgestellt wird.

Es gibt zwei Arten von destrukturierenden Zuweisungsausdrücken-die Array-und Objektdestrukturierungszuweisung.,machen Sie dasselbe in nur einer Zeile mit der Array-Destrukturierungszuweisung:

Sie können auch den Rest-Operator in der Array-Destrukturierungszuweisung verwenden, wie hier gezeigt:

Die Objekt-Destrukturierungszuweisung

Um die Eigenschaftswerte eines Objekts zu extrahieren, müssen wir so etwas schreiben:

Aber in ES6 können Sie die Eigenschaftswerte des Objekts extrahieren und sie den Variablen einfach so zuweisen:

Die meisten Funktionen, die wir oben besprochen haben, werden unterstützt in der neuesten Version der wichtigsten Webbrowser wie Google Chrome, Mozilla Firefox, Microsoft Edge, Safari usw.,