JavaScript ES6 - weniger schreiben, mehr tun

JavaScript ES6 bietet neue Syntax und neue fantastische Funktionen, um Ihren Code moderner und lesbarer zu machen. Sie können weniger Code schreiben und mehr tun. ES6 führt uns in viele großartige Funktionen wie Pfeilfunktionen, Vorlagenzeichenfolgen, Klassenvernichtung, Module usw. ein. Lass uns einen Blick darauf werfen.

const und let

constist ein neues Schlüsselwort in ES6 zum Deklarieren von Variablen. constist mächtiger 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 sehr nützlich, um auf die Selektoren abzuzielen. Wenn Sie 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 constanstelle von var. Dies liegt daran, dass var"gehisst" wird. Es ist immer vorzuziehen, constwenn die Variable nicht neu zugewiesen werden soll.

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

letkann neu zugewiesen werden und neuen Wert annehmen. Es wird eine veränderbare Variable erstellt .

letist das gleiche wie constdarin, dass beide blockiert sind. Dies bedeutet, dass die Variable nur innerhalb ihres Bereichs verfügbar ist.

Pfeilfunktionen

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

Benutze das:

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

Auch können Sie auf Pfeil - Funktion mit verwenden map, filterundreduceeingebaute Funktionen.

Die Kartenfunktion mit Pfeilen sieht klarer und lesbarer aus als mapin ES5. Mit ES6 können Sie kürzeren und intelligenteren Code schreiben. Sie können dasselbe mit filterund verwenden reduce.

Vorlagenliterale

Vorlagenliterale oder Vorlagenzeichenfolgen sind ziemlich cool. Wir müssen den Plus-Operator (+) nicht verwenden, um Zeichenfolgen zu verketten, oder wenn wir eine Variable innerhalb einer Zeichenfolge verwenden möchten.

Die alte Syntax:

Mit neuer ES6-Syntax:

So einfach! Es ist ein wirklich großer Unterschied zwischen der alten Syntax und ES6. Beim Spielen mit Zeichenfolgen sieht die wörtliche Zeichenfolge in ES6 besser organisiert und strukturiert aus als in 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 fehlenden Parameter ausführen, nimmt sie den Wert des Standardparameters an tund gibt keinen Fehler zurück!

Schauen Sie sich dieses Beispiel an:

Die obige Funktion gibt undefiniert zurück, da wir vergessen haben, den zweiten Parameter anzugeben age.

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

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

Array- und Objektzerstörung

Die 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 alle Eigenschaften des Objekts abzurufen.

Hinweis:Wenn Sie eine Variable zuweisen, die nicht mit dem Namen der Eigenschaft identisch ist, wird undefiniert zurückgegeben. Zum Beispiel, wenn der Name der Eigenschaft lautet nameund wir ihn einem zuweisenusernameVariable,es wird undefiniert zurückgegeben.

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

For the array, we use the same syntax as the object. We have just to replace the curly brackets with square brackets.

Import and export

Using import and export in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.

If you are familiar with any JavaScript MVC framework, you will see that they use import and export to handle the components most of the time. So how do they really work?

It is simple! export allows you to export a module to be used in another JavaScript component. We use import to import that module to use it in our component.

For example, we have two files. The first is named detailComponent.jsand the second is namedhomeComponent.js.

In detailComponent.jswe are going to export the detail function.

And if we want to use this function in homeComponent.js,we will just use import.

If we want to import more than one module, we just put them within curly brackets.

So cool, isn’t it?!

Promises

Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!

If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: resolve and reject to handle an expected error.

Note: the fetch function returns a Promise itself!

const url="//jsonplaceholder.typicode.com/posts";
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

Now if you log your console it will return an array of data.

Rest parameter and Spread operator

The rest parameters are used to get the argument of an array, and return a new array.

The spread operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.

const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?']; const Func=(...anArray)=>{ return anArray; } console.log(Func(arr)); //output ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"

Classes

Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.

To create a class, use the class keyword followed by the name of the class with two curly brackets.

Now we can access the class methods and properties using the new keyword.

class myClass{ constructor(name,age){ this.name=name; this.age=age; } } const Home= new myClass("said",20); console.log(Home.name)// said

Verwenden Sie zum Erben von einer anderen Klasse das extendsSchlüsselwort gefolgt vom Namen der Klasse, von der Sie erben möchten.

Sie können mehr über Klassen erfahrenHier.

ES6 hat andere erstaunliche Funktionen - Sie können sie hier erkunden.

Fazit

Ich hoffe, ihr fand diesen Artikel nützlich 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. Vielen Dank für Ihre Zeit.

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