Was sind Pfeilfunktionen in JavaScript?

Eine der besten Merkmale, die uns das moderne JavaScript zur Verfügung gestellt hat, ist die Pfeilfunktion bezeichnet durch “=>”. Auch bekannt als "Fettpfeil”Kommt mit verschiedenen Vorteilen bei der Programmierung einher. Es kommt mit der Bindung von „diese“ und lässt den Code organisierter und kürzer aussehen.

Diese Funktionen sind der Grund, warum Pfeilfunktionen gegenüber anderen Arten der Funktionserklärung streng bevorzugt werden. Aber mit diesen Vergünstigungen kommen auch auch einige Nachteile.

In diesem Artikel lernen wir, wie Sie Funktionen mit Pfeilfunktionen in JavaScript schreiben und wie Sie Ihre einfachen Funktionen in Pfeilfunktionen umwandeln. Bevor wir uns darauf einlassen, verstehen wir einige grundlegende Konzepte zu Pfeilfunktionen in JavaScript.

Pfeilfunktionen in JavaScript

ES6 hat uns eine der wichtigsten und nützlichsten Merkmale zur Verfügung gestellt, die eine Pfeilfunktion darstellt, die bei der Erklärung der Funktionen auf einfachere Weise hilft und die Codezeilen verringert. Die Syntax der Pfeilfunktion wird unten erwähnt:

Syntax:

Sei FunktionName = (p1, p2,… pn) =>
Erklärung (en)

Hier,

• Funktionsname: Der Name der Funktion
• p1, p2,… . pn: Dies sind die Parameter der Funktionen
• Erklärung (en): Die Zeilen des JavaScript -Code im Körper der Funktion.

Mit diesen können wir unseren komplexen Code in eine präzisere und kompaktere Version umwandeln. Im Folgenden finden Sie einige der Funktionen, die es bietet:

Implizite Rendite

Danach werden die Verwendung jeglicher Art von Klammern, Funktionen oder der Rückgabe -Schlüsselwörter optional, sodass die implizite Rückgabe ermöglicht wird. Hier ist ein Beispiel:

// Pfeilfunktion
Beispiel.onclick = (x, y, z) => Dies.etwas tun()
// gleichwertig der einfachen Funktion
Beispiel.onclick = function (x, y, z)
Geben Sie dies zurück.etwas tun();
.binden (dies);

Durch die Verwendung von Pfeilfunktionen ermöglicht es einfach nur einen einzigen Ausdruck und gibt ihn implizit zurück.

"Das" Bindung : Es bindet automatisch das Schlüsselwort "Dies" an den von Pfeilfunktionen umgebenen Code, der umgeben ist. Zum Beispiel:

var x = this;
Beispiel.onclick = function ()
X.etwas tun();
;

Zu

Beispiel.Onclick = () => Dies.etwas tun()

Darüber hinaus bietet es eine kürzere, einfachere und kompaktere Version Ihres Codes.

So verwenden Sie Pfeilfunktionen in JavaScript

In JavaScript können wir Pfeilfunktionen mit einzelnen, mehreren oder sogar ohne Parametern verwenden. Sie sind nützlich für eine Zeilenaktion, verkleinern mehrere Zeilencode in weniger Zeilen und speichern daher Platz. Lassen Sie uns dies mit Beispiel verstehen:

JavaScript -Pfeilfunktion ohne Parameter

Die folgende Syntax wird verwendet, wenn die Pfeilfunktion mit Nullparametern funktioniert.

Syntax:

() => Anweisung (s)

Hier ist die Anweisung der Körper der Funktion mit Codezeilen.

Beispiel:

Sei print = () => Konsole.log ("Hallo");
drucken();

Im obigen Beispiel drucken wir einfach „Hallo“ mit der Pfeilfunktion. Wie Sie sehen können, haben die Pfeilfunktionen keinen Namen, sodass sie auch als anonyme Funktionen bezeichnet werden. Letztendlich können wir sie bei Bedarf nicht erneut anrufen oder wiederverwenden, da sie keinen Namen haben. Wenn wir jedoch die Pfeilfunktionen anrufen oder wiederverwenden müssen.

Hier haben wir es der Variablen „Druck“ zugewiesen und die Variable in der zweiten Zeile aufgerufen.

Ausgang:

JavaScript -Pfeilfunktion mit einzelnen Parametern

Bei einem einzelnen Parameter wird die folgende Syntax verwendet:

Syntax:

(p) => Anweisung (s)

Oder Sie können die Klammern entfernen und sie umschreiben wie:

p => Anweisung (s)

Hier ist die Anweisung der Körper der Funktion, die Codezeilen enthält und P ist der Parameter übergeben.

Beispiel:
In diesem Beispiel wird die Pfeilfunktion als Argument der MAP () -Methode verwendet, die ein String -Array in ein Array umwandelt, das die String -Länge enthält:

Lass Tage = ['Montag', 'Dienstag', 'Mittwoch'];
Lassen Sie Längen = Tage.Karte (Tage => Tage.Länge);
Konsole.log (Längen);

Ausgang:

JavaScript -Pfeilfunktion mit mehreren Parametern

Die folgende Syntax wird verwendet, wenn zwei oder mehr Parameter bestanden werden:

Syntax:

(p1, p2,…, pn) => Aussage;

Hier ist die Anweisung der Körper der Funktion, die Codezeilen enthält und P ist der Parameter übergeben. In diesem Bereich entspricht die "=> Aussage":

=> return Anweisung;

Im folgenden Beispiel wird eine Sort () -Methode ohne Verwendung der Pfeilfunktion verwendet, um Zahlen in absteigender Reihenfolge zu sortieren:

Sei Num = [3,1,5];
num.sortieren (Funktion (a, b)
Rückkehr B - a;
);
Konsole.log (num);

Dies kann in eine Pfeilfunktion umgewandelt werden

Sei Num = [3,1,5];
num.sortieren (a, b) => b - a);
Konsole.log (num);

Im obigen Beispiel hat die Funktion einen einzelnen Ausdruck „B-A“, sodass sie einfach das Ergebnis des Ausdrucks zurückgibt. Im Falle einer Blocksyntax müssen Sie jedoch das Keyword der Rückgabe erwähnen.

Ausgang:

Auf diese Weise können wir jede Funktion in eine Pfeilfunktion umwandeln. Es gibt jedoch zwei Punkte, die während der Arbeit mit Pfeilfunktionen berücksichtigt werden müssen:

• Die Pfeilfunktion sollte nicht zur Erstellung von Methoden in Objekten verwendet werden
• Pfeilfunktionen können nicht als Konstruktor verwendet werden.

Abschluss

Pfeilfunktionen sind der einfachste Weg, um Funktionen zu deklarieren, und reduziert die Codes -Zeilen, ohne die Funktionalität des Codes zu beeinflussen. In diesem Artikel haben wir gelernt, dass Pfeilfunktionen äußerst nützlich sind, wie sie eine komplexe Syntax und eine lange Codezeile in kompaktere und einfachere Code umwandeln. Darüber hinaus ist es nicht erforderlich, eine Pfeilfunktion zu benennen, es sei denn, Sie müssen die Funktion aufrufen oder wiederverwenden.

Zuerst mag Pfeilfunktionen schwierig erscheinen, aber mit der Zeit, wie Sie das Konzept verstehen, werden sie einfacher und bequem zu implementieren. Konvertieren Sie Ihren Code daher in weniger Zeilen mit einer einfacheren Logik.