JavaScript ES6-weniger schreiben, mehr tun

JavaScript ES6 bringt neue Syntax und neue tolle Features, um Ihren Code moderner und lesbarer zu machen. Es ermöglicht Ihnen, weniger code zu schreiben und mehr zu tun. ES6 stellt uns viele großartige Funktionen wie Pfeilfunktionen, Vorlagenzeichenfolgen, Klassenzerstörung, Module… und mehr vor. Schauen wir mal.

const und let

const ist ein neues Schlüsselwort in ES6 zum Deklarieren von Variablen. const ist leistungsfähiger als var. Einmal verwendet, kann die variable nicht neu zugewiesen werden., Mit anderen Worten, es ist eine unveränderliche Variable, außer wenn sie mit Objekten verwendet wird.

Dies ist wirklich nützlich für die Ausrichtung der Selektoren. Wenn wir beispielsweise eine einzelne Schaltfläche haben, die ein Ereignis auslöst, oder wenn Sie ein HTML-Element in JavaScript auswählen möchten, verwenden Sie const anstelle von var. Dies liegt daran, dass var ‚gehisst’ist. Es ist immer vorzuziehen, const wenn Sie die Variable nicht neu zuweisen möchten .,

Im obigen Code ändert sich const nicht und kann nicht neu zugewiesen werden. Wenn Sie versuchen, ihm einen neuen Wert zu geben, wird ein Fehler zurückgegeben.

let können neu zugewiesen werden, und nehmen Sie neuen Wert ein. Es erstellt eine veränderbare Variable.

let ist die gleiche wie const in, dass beide sind blockiert-umfang. Dies bedeutet, dass die Variable nur in ihrem Gültigkeitsbereich verfügbar ist.,

Pfeilfunktionen

Die Pfeilfunktion ist wirklich großartig und macht Ihren Code lesbarer, strukturierter und sieht aus wie moderner Code. Anstatt dies zu verwenden:

Verwenden Sie dies:

Wie Sie sehen, scheint die Pfeilfunktion besser lesbar und sauber zu sein! Sie müssen die alte Syntax nicht mehr verwenden.

Außerdem können Sie die Pfeilfunktion mit map, filter und reduce integrierten Funktionen verwenden.,

Die Kartenfunktion mit Pfeilen sieht klarer und lesbarer aus als map in ES5. Mit ES6 können Sie kürzeren und intelligenteren Code schreiben. Sie können dasselbe mit filter und reduceverwenden.

Template-Literale

Template-Literale oder Template-Strings sind ziemlich cool. Wir müssen nicht den plus ( + ) – Operator verwenden, um Zeichenfolgen zu verketten, oder wenn wir eine Variable innerhalb einer Zeichenfolge verwenden möchten.,

Die alte syntax:

Mit der neuen ES6-syntax:

So einfach! Es ist ein wirklich großer Unterschied zwischen der alten syntax und ES6. Beim Spielen mit Strings sieht die Literalzeichenfolge in ES6 organisierter und gut strukturierter aus als ES5.

Standardparameter

Wenn ich in PHP arbeite, verwende ich normalerweise Standardparameter. Mit diesen können Sie einen Parameter im Voraus definieren.,

Wenn Sie also vergessen, den Parameter zu schreiben, wird kein undefinierter Fehler zurückgegeben, da der Parameter bereits in der Standardeinstellung definiert ist. Wenn Sie also Ihre Funktion mit einem verpassten Parameter ausführen, wird der Wert des Standardparameters t und es wird kein Fehler zurückgegeben!

Sehen Sie sich dieses Beispiel an:

Die obige Funktion gibt undefined zurück, da wir vergessen haben, den zweiten Parameter ageanzugeben.,

Aber wenn wir den Standardparameter verwenden, wird er nicht undefiniert zurückgegeben, und er wird seinen Wert verwenden, wenn wir vergessen, einen Parameter zuzuweisen!

Wie Sie sehen, gibt die Funktion einen Wert zurück, obwohl wir den zweiten Parameter verpasst haben. Jetzt können wir mit dem Standardparameter den Fehler im Voraus behandeln.

Array-und Objektzerstörung

Zerstörung erleichtert die Zuordnung der Werte eines Arrays oder Objekts zur neuen Variablen.,

Die alte Syntax:

Mit ES6 Syntax:

Mit ES5 müssen wir jeder Variablen jeden Wert zuweisen. Mit ES6 setzen wir unsere Werte einfach in geschweifte Klammern, um eine Eigenschaft des Objekts abzurufen.

Hinweis: Wenn Sie eine Variable zuweisen, die nicht mit dem Namen der Eigenschaft identisch ist, wird undefined zurückgegeben. Wenn der Name der Eigenschaft beispielsweise name ist und wir sie einer username Variablen zuweisen, wird undefined zurückgegeben.,

Wir müssen die Variable immer mit dem Namen der Eigenschaft benennen. Falls wir die Variable jedoch umbenennen möchten, können wir stattdessen den Doppelpunkt :.

Für das Array verwenden wir die gleiche Syntax wie das Objekt. Wir müssen nur die geschweiften Klammern durch eckige Klammern ersetzen.

Import und Export

Die Verwendung von import und export in Ihrer JavaScript-Anwendung macht es leistungsfähiger., Mit ihnen können Sie separate und wiederverwendbare Komponenten erstellen.

Wenn Sie mit einem JavaScript-MVC-Framework vertraut sind, werden Sie feststellen, dass import und verwendet werden, um die Komponenten die meiste Zeit zu behandeln. Wie funktionieren sie wirklich?

Es ist einfach! export ermöglicht den Export eines Moduls, das in einer anderen JavaScript-Komponente verwendet werden soll. Wir verwenden import, um dieses Modul zu importieren, um es in unserer Komponente zu verwenden.

Zum Beispiel haben wir zwei Dateien., Der erste heißt detailComponent.js und der zweite heißt homeComponent.js.

In detailComponent.js exportieren wir die Funktion detail.

Und wenn wir diese Funktion in homeComponent.js verwenden möchten, verwenden wir einfach import.

Wenn wir mehr als ein Modul importieren möchten, setzen wir sie einfach in geschweifte Klammern.,

So cool, nicht wahr?!

Versprechen

Versprechen sind eine neue Funktion von ES6. Es ist eine Methode zum schreiben von asynchronem code. Es kann verwendet werden, wenn wir beispielsweise Daten von einer API abrufen möchten oder wenn wir eine Funktion haben, deren Ausführung einige Zeit in Anspruch nimmt. Versprechen machen es einfacher, das Problem zu lösen, also lassen Sie uns unser erstes Versprechen erstellen!

Wenn Sie Ihre Konsole protokollieren, wird ein Versprechen zurückgegeben. Wenn wir also eine Funktion ausführen möchten, nachdem Daten abgerufen wurden, verwenden wir ein Versprechen., Das Versprechen verwendet zwei Parameter: resolve und reject, um einen erwarteten Fehler zu behandeln.

Hinweis: Die fetch-Funktion gibt selbst ein Versprechen zurück!

const url='https://jsonplaceholder.typicode.com/posts';

const getData=(url)=>{return fetch(url);}

getData(url).then(data=> data.json()).then(result=> console.log(result));

Wenn Sie nun Ihre Konsole protokollieren, wird ein Array von Daten zurückgegeben.

Rest-Parameter und Spread-Operator

Die Rest-Parameter werden verwendet, um das Argument eines Arrays abzurufen und ein neues Array zurückzugeben.,

Der spread-operator hat die gleiche syntax wie der parameter „Pause“, aber der spread-operator nimmt das Array selbst und nicht nur die Argumente. Wir können den Parameter Spread verwenden, um die Werte eines Arrays abzurufen, anstatt eine for Schleife oder eine andere Methode zu verwenden.

Klassen

Klassen sind der Kern der objektorientierten Programmierung (OOP). Sie machen Ihren code sicherer und gekapselt. Die Verwendung von Klassen gibt Ihrem Code eine schöne Struktur und hält ihn orientiert.,

Verwenden Sie zum Erstellen einer Klasse das Schlüsselwort class gefolgt vom Namen der Klasse mit zwei geschweiften Klammern.

Jetzt können wir mit dem Schlüsselwort new auf die Methoden und Eigenschaften new zugreifen.

Um von einer anderen Klasse zu erben, verwenden Sie das Schlüsselwort extends gefolgt vom Namen der Klasse, von der Sie erben möchten.,

Mehr über Klassen erfahren Sie hier.

ES6 hat andere erstaunliche Eigenschaften — Sie können sie hier erkunden.

Fazit

Ich hoffe, ihr habt diesen Artikel nützlich gefunden und ich hoffe, ich konnte euch einige der ES6-Funktionen vorstellen. Wenn ja, abonnieren Sie diese Mail-Liste, um mehr über Front-End-Themen zu erfahren. Danke für deine Zeit.

Übrigens habe ich kürzlich mit einer starken Gruppe von Software-Ingenieuren für eine meiner mobilen Anwendungen gearbeitet., Die Organisation war großartig und das Produkt wurde sehr schnell geliefert, viel schneller als andere Firmen und Freiberufler, mit denen ich gearbeitet habe, und ich denke, ich kann sie ehrlich für andere Projekte empfehlen. Schießen Sie mir eine E-Mail, wenn Sie Kontakt aufnehmen möchten — [email protected].