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

Werbung

JavaScript ES6 brachte aufregende 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 zu JavaScript. Pfeilfunktionen sind eine neue Methode zum Schreiben von JavaScript-Funktionsausdrücken, mit der Sie auf zwei verschiedene Arten Funktionen in Ihrer App erstellen können.

Wenn Sie ein Experte für traditionelle JavaScript-Funktionen sind, müssen die Pfeilfunktionen ein wenig angepasst werden. Werfen wir einen Blick darauf, was diese sind, wie sie funktionieren und wie sie Ihnen zugute kommen.

Was sind JavaScript-Pfeilfunktionen?

Pfeilfunktionen sind eine neue Methode zum Schreiben von Funktionsausdrücken in der Version von JavaScript ES6 enthalten Was ist ES6 und was müssen Javascript-Programmierer wissen?ES6 bezieht sich auf Version 6 der Programmiersprache ECMA Script (Javascript). Lassen Sie uns nun einige wichtige Änderungen betrachten, die ES6 an JavaScript bringt. Weiterlesen

. Sie ähneln den von Ihnen verwendeten JavaScript-Funktionsausdrücken mit einigen geringfügig anderen Regeln.

Pfeilfunktionen sind immer anonyme Funktionen, für die unterschiedliche Regeln gelten Diesund haben eine einfachere Syntax als herkömmliche Funktionen.

Diese Funktionen verwenden ein neues Pfeil-Token:

=>

Wenn Sie jemals in Python gearbeitet haben, sind diese Funktionen sehr ähnlich Python Lambda-Ausdrücke Ein Leitfaden für Anfänger zum Verständnis der Python Lambda-FunktionenLambdas in Python sind eine der nützlichsten, wichtigsten und interessantesten Funktionen, die Sie kennen sollten. Hier erfahren Sie, wie Sie sie verwenden und warum sie nützlich sind. Weiterlesen .

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

• Das Funktionsschlüsselwort wird entfernt
• Das Schlüsselwort return ist optional
• Geschweifte Klammern sind optional

Es müssen noch viele kleine Änderungen vorgenommen werden. Beginnen wir also mit einem grundlegenden Vergleich der Funktionsausdrücke.

Verwendung von Pfeilfunktionen

Pfeilfunktionen sind einfach zu bedienen. Das Verständnis der Pfeilfunktionen ist einfacher, wenn sie neben herkömmlichen Funktionsausdrücken verglichen werden.

Hier ist ein Funktionsausdruck, der zwei Zahlen hinzufügt. 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 akzeptiert und die Summe zurückgibt.

Hier wird der Ausdruck in eine Pfeilfunktion geändert:

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

Die Funktionssyntax bei Verwendung einer Pfeilfunktion ist sehr unterschiedlich. Das Funktionsschlüsselwort wird entfernt. Das Pfeiltoken zeigt JavaScript an, 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:

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

Das Schlüsselwort return und die geschweiften Klammern sind jetzt weg. Was 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 bieten noch mehr. Lassen Sie uns tiefer eintauchen, damit Sie ein besseres Gefühl dafür bekommen, was sie können.

Funktionen der Pfeilfunktion

Pfeilfunktionen haben viele verschiedene Verwendungszwecke und Funktionen.

Regelmäßige 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.

sei Quadrat = x => x * x Quadrat (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 ("Hallo Leser!"); helloFunction (); >> Hallo Leser!

Einfache Funktionen wie diese verbrauchen viel weniger Code. Stellen Sie sich vor, wie viel einfacher ein Komplex ist Projekt wie eine JavaScript-Diashow So erstellen Sie eine JavaScript-Diashow in 3 einfachen SchrittenHeute zeige ich Ihnen, wie Sie eine Javacript-Diashow von Grund auf neu erstellen - lassen Sie uns gleich loslegen! Weiterlesen wird, wenn Sie eine einfachere Möglichkeit haben, Funktionen zu schreiben.

Verwenden Sie dies

Das Konzept von Dies Dies ist in der Regel der schwierigste Teil bei der Verwendung von JavaScript. Pfeilfunktionen machen Dies einfacher zu bedienen.

Wenn Sie Pfeilfunktionen verwenden Dies wird durch die umschließende Funktion definiert. Dies kann zu Problemen führen, die auftreten, wenn Sie verschachtelte Funktionen erstellen und benötigen Dies auf Ihre Hauptfunktion anwenden

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

Funktion Person () {var that = this; // Du musst 'this' einer neuen Variablen zuweisen that.age = 0; setInterval (Funktion growUp () {that.age ++; }, 1000); }

Zuweisen des Wertes von Dies Eine Variable macht sie lesbar, wenn Sie eine Funktion innerhalb Ihrer Hauptfunktion aufrufen. Dies ist chaotisch. Hier ist eine bessere Möglichkeit, dies mithilfe von Pfeilfunktionen zu tun.

Funktion Person () {this.age = 0; setInterval (() => {this.age ++; // Jetzt können Sie 'this' ohne eine neue deklarierte Variable verwenden}, 1000); }

Sie eignen sich zwar hervorragend für Funktionen, sollten jedoch nicht zum Erstellen von Methoden innerhalb eines Objekts verwendet werden. Pfeilfunktionen verwenden nicht das richtige Scoping für Dies.

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

lass pizza = { toppings: 5, removeToppings: () => {this.toppings--; } } // Ein Pizzaobjekt mit 5 Belägen. > Pizza. >> {toppings: 5, removeToppings: f} pizza.removeToppings (); // Die Methode macht nichts mit dem Objekt> pizza. >> {toppings: 5, removeToppings: f} // Hat noch 5 toppings.

Arbeiten mit Arrays

Mit den Pfeilfunktionen können Sie den Code für die Arbeit mit Array-Methoden vereinfachen. Arrays und Array-Methoden sind sehr wichtige Bestandteile von JavaScript 5 JavaScript-Array-Methoden, die Sie heute beherrschen solltenMöchten Sie JavaScript-Arrays verstehen, können sie aber nicht in den Griff bekommen? Weitere Informationen finden Sie in unseren JavaScript-Array-Beispielen. Weiterlesen 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 (Funktion (Element) { Rückgabeelement + 1; }); >> [2,3,4,5]

Dies ist eine ziemlich einfache Funktion, die jedem Wert im Array einen 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 => { Rückgabeelement + 1; }); >> [2,3,4,5]

Es ist jetzt viel einfacher zu lesen.

Objektliterale erstellen

Mit Pfeilfunktionen können Objektliterale in JavaScript erstellt werden. Regelmäßige Funktionen können sie erstellen, sind jedoch etwas länger.

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

Sie können dasselbe Objekt mit einer Pfeilfunktion mit weniger Code erstellen. Mit der Pfeilnotation müssen Sie den Funktionskörper in Klammern setzen. Hier ist die verbesserte Syntax mit Pfeilfunktionen.

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

JavaScript-Pfeilfunktionen und darüber hinaus

Sie kennen jetzt verschiedene Möglichkeiten, wie JavaScript-Pfeilfunktionen Ihnen das Leben als Entwickler erleichtern. Sie verkürzen die Syntax und geben Ihnen mehr Kontrolle über DiesErleichtern Sie das Erstellen von Objekten und geben Sie Ihnen eine neue Möglichkeit, mit Array-Methoden zu arbeiten.

Die Einführung von Pfeilfunktionen zusammen mit vielen anderen Funktionen in JavaScript ES6 zeigt, wie wichtig JavaScript für die Webentwicklung geworden ist. Sie können jedoch noch so viel mehr tun.

Möchten Sie mehr über JavaScript erfahren? Unsere JavaScript-Spickzettel Das ultimative JavaScript-SpickzettelHolen Sie sich mit diesem Spickzettel eine kurze Auffrischung zu JavaScript-Elementen. Weiterlesen bietet wertvolle Informationen und mehr darüber wie JavaScript funktioniert Was ist JavaScript und wie funktioniert es?Wenn Sie Webentwicklung lernen, sollten Sie Folgendes über JavaScript und die Funktionsweise von HTML und CSS wissen. Weiterlesen kann Sie zu einem besseren Entwickler machen.