JavaScript-Pfeilfunktionen können Sie zu einem besseren Entwickler machen

JavaScript ES6 brachte spannende Veränderungen in die Welt der Webentwicklung. Neue Ergänzungen der JavaScript-Sprache brachten neue Möglichkeiten.

Eine der beliebtesten Änderungen war das Hinzufügen von Pfeilfunktionen in JavaScript. Pfeilfunktionen sind eine neue Methode zum Schreiben von JavaScript-Funktionsausdrücken, die Ihnen zwei verschiedene Möglichkeiten zum Erstellen von Funktionen in Ihrer App bietet.

Pfeilfunktionen erfordern ein wenig Anpassung, wenn Sie ein Experte für traditionelle JavaScript-Funktionen sind. Lassen Sie uns einen Blick darauf werfen, was diese sind, wie sie funktionieren und wie Sie davon profitieren.

Was sind JavaScript-Pfeilfunktionen?

Pfeilfunktionen sind eine neue Möglichkeit, Funktionsausdrücke zu schreiben, die in der Version von JavaScript ES6 enthalten . Sie ähneln den von Ihnen verwendeten JavaScript-Funktionsausdrücken, mit einigen etwas anderen Regeln.

Pfeilfunktionen sind immer anonyme Funktionen, haben andere Regeln für

this

, und haben eine einfachere Syntax als herkömmliche Funktionen.

Wie man Videos mit Altersbeschränkung auf YouTube ansieht

Diese Funktionen verwenden einen neuen Pfeil-Token:

=>

Wenn Sie schon einmal in Python gearbeitet haben, sind diese Funktionen sehr ähnlich zu Python Lambda-Ausdrücke .

Die Syntax für diese Funktionen ist etwas sauberer als bei normalen Funktionen. Dabei sind einige neue Regeln zu beachten:

Das Funktionsschlüsselwort wird entfernt
Das Rückgabeschlüsselwort ist optional
Geschweifte Klammern sind optional

Es sind viele kleine Änderungen zu besprechen. Beginnen wir also mit einem grundlegenden Vergleich der Funktionsausdrücke.

So verwenden Sie die Pfeilfunktionen

Pfeilfunktionen sind einfach zu bedienen. Das Verständnis von Pfeilfunktionen ist einfacher, wenn man sie Seite an Seite mit traditionellen Funktionsausdrücken vergleicht.

Hier ist ein Funktionsausdruck, der zwei Zahlen addiert; zuerst mit der traditionellen Funktionsmethode:

 let addnum = function(num1,num2){  
 return num1 + num2;  
};  
addnum(1,2);  
>>3

Es ist eine ziemlich einfache Funktion, die zwei Argumente verwendet und die Summe zurückgibt.

Hier ist der Ausdruck, der in eine Pfeilfunktion geändert wurde:

let addnum = (num1,num2) => { return num1 + num2;};  
addnum(1,2);  
>>3

Die Funktionssyntax ist bei Verwendung einer Pfeilfunktion ganz anders. Das Funktionsschlüsselwort wird entfernt; Das Pfeil-Token teilt JavaScript mit, dass Sie eine Funktion schreiben.

Die geschweiften Klammern und das Schlüsselwort return sind noch vorhanden. Diese sind optional mit Pfeilfunktionen. Hier ist ein noch einfacheres Beispiel für dieselbe Funktion:

let addnum = (num1,num2) => num1 + num2;

Das Schlüsselwort return und die geschweiften Klammern sind jetzt weg. Was übrig bleibt, ist eine sehr saubere einzeilige Funktion, die fast die Hälfte des Codes der ursprünglichen Funktion ausmacht. Sie erhalten das gleiche Ergebnis mit viel weniger geschriebenem Code.

Pfeilfunktionen haben noch mehr zu bieten. Lassen Sie uns tiefer eintauchen, damit Sie ein besseres Gefühl dafür bekommen, was sie tun können.

Funktionen der Pfeilfunktion

Pfeilfunktionen haben viele verschiedene Verwendungen und Funktionen.

ist usb c schneller als usb 3.0

Reguläre Funktionen

Pfeilfunktionen können ein oder mehrere Argumente verwenden. Wenn Sie zwei oder mehr Argumente verwenden, müssen Sie diese in Klammern setzen. Wenn Sie nur ein Argument haben, müssen Sie keine Klammern verwenden.

let square = x => x * x  
square(2);  
>>4

Pfeilfunktionen können ohne Argumente verwendet werden. Wenn Sie in Ihrer Funktion keine Argumente verwenden, müssen Sie leere Klammern verwenden.

let helloFunction = () => Console.log('Hello reader!');  
helloFunction();  
>>Hello reader!

Einfache Funktionen wie diese verwenden viel weniger Code. Stellen Sie sich vor, wie viel einfacher ein Komplex Projekt wie eine JavaScript-Diashow wird, wenn Sie eine einfachere Möglichkeit haben, Funktionen zu schreiben.

Dies verwenden

Das Konzept von

this

ist in der Regel der schwierigste Teil bei der Verwendung von JavaScript. Pfeilfunktionen machen

this

einfacher zu bedienen.

Wenn Sie Pfeilfunktionen verwenden

this

wird durch die einschließende Funktion definiert. Dies kann zu Problemen führen, die auftreten, wenn Sie verschachtelte Funktionen erstellen und benötigen

this

um sich auf Ihre Hauptfunktion zu bewerben

Hier ist ein beliebtes Beispiel, das die Problemumgehung zeigt, die Sie mit regulären Funktionen verwenden müssen.

function Person() {  
 var that = this; //You have to assign 'this' to a new variable  
 that.age = 0;  
 setInterval(function growUp() {  
 that.age++;  
 }, 1000);  
}

Wert von zuweisen

this

zu einer Variablen macht es lesbar, wenn Sie eine Funktion innerhalb Ihrer Hauptfunktion aufrufen. Das ist chaotisch, hier ist eine bessere Möglichkeit, dies mit den Pfeilfunktionen zu tun.

function Person(){  
 this.age = 0;  
 setInterval(() => {  
 this.age++; // Now you can use 'this' without a new variable declared  
 }, 1000);  
}

Sie eignen sich zwar hervorragend für Funktionen, sollten jedoch nicht zum Erstellen von Methoden innerhalb eines Objekts verwendet werden. Pfeilfunktionen verwenden nicht den richtigen Bereich für

this

Hier ist ein einfaches Objekt, das mithilfe einer Pfeilfunktion eine Methode im Inneren erstellt. Die Methode soll die Beläge beim Aufruf um eins variabel. Stattdessen funktioniert es überhaupt nicht.

So erstellen Sie einen symbolischen Link in Windows

let pizza = {  
toppings: 5,  
removeToppings: () => {  
 this.toppings--;  
 }  
}  
//A pizza object with 5 toppings  
>pizza  
>>{toppings: 5, removeToppings: f}  
pizza.removeToppings(); //The method will not do anything to the object  
>pizza  
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

Arbeiten mit Arrays

Mithilfe von Pfeilfunktionen können Sie den Code vereinfachen, der für die Arbeit mit Array-Methoden verwendet wird. Arrays und Array-Methoden sind sehr wichtige Bestandteile von JavaScript Sie werden sie also häufig verwenden.

Es gibt einige nützliche Methoden wie die Karte -Methode, die eine Funktion für alle Elemente eines Arrays ausführt und das neue Array zurückgibt.

let myArray = [1,2,3,4];  
myArray.map(function(element){  
return element + 1;  
});  
>> [2,3,4,5]

Dies ist eine ziemlich einfache Funktion, die jedem Wert im Array eins hinzufügt. Sie können dieselbe Funktion mit weniger Code schreiben, indem Sie eine Pfeilfunktion verwenden.

let myArray = [1,2,3,4];  
myArray.map(element => {  
return element + 1;  
});  
>> [2,3,4,5]

Es ist jetzt viel einfacher zu lesen.

Erstellen von Objektliteralen

Pfeilfunktionen können verwendet werden, um Objektliterale in JavaScript zu erstellen. Reguläre Funktionen können sie erstellen, aber sie sind etwas länger.

let createObject = function createName(first,last) {  
 return {  
 first: first,  
 last: last  
 };  
};

Sie können das gleiche Objekt mit einer Pfeilfunktion mit weniger Code erstellen. Bei Verwendung der Pfeilnotation müssen Sie den Funktionsrumpf in Klammern einschließen. Hier ist die verbesserte Syntax mit Pfeilfunktionen.

let createArrowObject = (first,last) => ({first:first, last:last});

JavaScript-Pfeilfunktionen und mehr

Sie kennen jetzt verschiedene Möglichkeiten, wie JavaScript-Pfeilfunktionen Ihnen das Leben als Entwickler erleichtern. Sie verkürzen die Syntax, geben Ihnen mehr Kontrolle mit

this

, erleichtern das Erstellen von Objekten und geben Ihnen eine neue Möglichkeit, mit Array-Methoden zu arbeiten.

Die Einführung von Pfeilfunktionen und vielen anderen Features in JavaScript ES6 zeigt, wie wichtig JavaScript in der Webentwicklung geworden ist. Es gibt jedoch noch so viel mehr, was Sie tun können.

Möchten Sie mehr über JavaScript erfahren? Lernen Sie diese JavaScript-Frameworks kennen. Außerdem unsere JavaScript-Spickzettel liefert wertvolle Informationen und erfährt mehr über wie JavaScript funktioniert kann Sie zu einem besseren Entwickler machen.

Teilen Teilen Tweet Email 6 Audible-Alternativen: Die besten kostenlosen oder günstigen Hörbuch-Apps

Wenn Sie nicht für Hörbücher bezahlen möchten, finden Sie hier einige großartige Apps, mit denen Sie sie kostenlos und legal anhören können.

Weiter lesen Verwandte Themen

Programmierung
JavaScript

Über den Autor Anthony Grant(40 veröffentlichte Artikel)

Anthony Grant ist ein freiberuflicher Autor für Programmierung und Software. Er ist ein Informatik-Major und beschäftigt sich mit Programmierung, Excel, Software und Technologie.

Mehr von Anthony Grant

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren