Vertieftes Verständnis der Pfeilfunktionen in JavaScript_Grundkenntnisse

Pfeile waren von Anfang an Teil von JavaScript. Es wurde empfohlen, Inline-Skriptcode in HTML-Kommentare einzubetten. Dies kann dazu führen, dass Browser, die JavaScript nicht unterstützen, Ihren Code fälschlicherweise anzeigen. Möglicherweise haben Sie Code wie den folgenden geschrieben:

<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>
 
<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>

Alte Browser sehen zwei nicht unterstützte Tags und einen Kommentar, den nur neuere Browser, die JavaScript unterstützen, als JavaScript-Code analysieren.

Um diese seltsame Funktion zu unterstützen, behandelt die JavaScript-Engine des Browsers stellt auch einen einzeiligen Kommentar dar. Der Unterschied zu HTML besteht darin, dass in HTML der Teil vor --> der Kommentarinhalt ist .

Nur ​​wenn --> am Anfang einer Zeile steht, bedeutet dies, dass es sich bei dem Pfeil um einen Kommentar handelt, da es sich in anderen Fällen um einen Operator handelt (geht zu).

function countdown(n) {
 while (n-->0) // "n goes to zero"
  alert(n);
 blastoff();
}
 
function countdown(n) {
 while (n-->0) // "n goes to zero"
  alert(n);
 blastoff();
}

Der obige Code kann tatsächlich ausgeführt werden. Das Schleifen, bis n 0 ist, ist keine neue Funktion von ES6, aber in Kombination mit bekannten Funktionen ist es sehr irreführend. Können Sie herausfinden, wie der obige Code funktioniert? Die Antwort finden Sie auf Stack Overflow.

Natürlich gibt es einen Pfeil, das ist der Kleiner-gleich-Operator <=. Vielleicht finden Sie einen Ort, an dem Sie Pfeile verwenden können, aber schauen wir uns einen Pfeil an, den wir noch nie zuvor gesehen haben:

• geht an Operator
• <= kleiner oder gleich Operator
• => ???

Was bedeutet also => Dies wird in diesem Artikel besprochen.

Lassen Sie uns zunächst über Funktionen sprechen.
Allgegenwärtige Funktionsausdrücke

Eine interessante Funktion von JavaScript ist, dass Sie jederzeit, wenn Sie eine Funktion benötigen, diese einfach erstellen können.

Um beispielsweise ein Klickereignis an eine Schaltfläche zu binden:

$("#confetti-btn").click(
 
$("#confetti-btn").click(

Die .click()-Methode von jQuery erfordert eine Funktion als Parameter. Wir können problemlos eine Funktion an Ort und Stelle erstellen:

$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

 
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

Code wie diesen zu schreiben ist für uns jetzt das Natürlichste. Doch bevor JavaScript populär wurde, sah dieser Codestil noch etwas seltsam aus, da es solche Funktionen in anderen Sprachen nicht gab. Im Jahr 1958 verfügte Lisp über Funktionsausdrücke, auch Lambda-Funktionen genannt, eine Funktion, die es in C, Python, C# und Java viele Jahre lang nicht mehr gegeben hatte.

Diese vier Sprachen verfügen nun alle über Lambda-Ausdrücke, und neuere Sprachen verfügen im Allgemeinen über integrierte Lambda-Ausdrücke. JavaScript unterstützt diese Funktion jetzt dank der Entwickler von Bibliotheken, die stark auf Lambda-Ausdrücke angewiesen sind, was zu einer weiten Verbreitung geführt hat.

JavaScript hat im Vergleich zu mehreren anderen Sprachen eine etwas ausführliche Syntax:

// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java
 
// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java

Pfeilfunktion

ES6 führt eine neue Syntax zum Schreiben von Funktionen ein:

// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

 
// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});
 
// ES6
var selected = allJobs.filter(job => job.isSelected());

Wenn Sie eine Funktion mit nur einem Parameter benötigen, kann die Syntax der Pfeilfunktion zu Identifier => Expression vereinfacht werden, wobei die Funktions- und Rückgabeschlüsselwörter sowie die Klammern und das abschließende Semikolon direkt weggelassen werden.

Um eine Funktion mit mehreren (oder keinen Parametern oder Rest-Parametern und Parameter-Standardwerten oder destrukturierten Parametern) Parametern zu schreiben, müssen Sie die Parameter in Klammern setzen:

// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);
 
// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);
 
// ES6
var total = values.reduce((a, b) => a + b, 0);

Pfeilfunktionen können auch mit einigen Tool-Funktionsbibliotheken wie Underscore.js und Immutable perfekt funktionieren. Tatsächlich sind alle Beispiele in der Immutable-Dokumentation in ES6 geschrieben und viele von ihnen verwenden bereits Pfeilfunktionen.

Pfeilfunktionen können nicht nur einen Ausdruck im Funktionskörper verwenden, sondern auch einen Anweisungsblock enthalten:

// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});
 
// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

So schreiben Sie die Pfeilfunktion:

// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});
 
// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});

Es ist zu beachten, dass Pfeilfunktionen, die Anweisungsblöcke verwenden, nicht automatisch einen Wert zurückgeben und return explizit verwendet werden muss, um einen Wert zurückzugeben.

Noch ein Ratschlag: Wenn Sie eine Pfeilfunktion verwenden, um ein Objekt zurückzugeben, verwenden Sie immer Klammern, um das zurückgegebene Objekt zu umgeben:

// create a new empty object for each puppy to play with
var chewToys = puppies.map(puppy => {});  // BUG!
var chewToys = puppies.map(puppy => ({})); // ok

 
// create a new empty object for each puppy to play with
var chewToys = puppies.map(puppy => {});  // BUG!
var chewToys = puppies.map(puppy => ({})); // ok

Da das leere Objekt {} und der leere Anweisungsblock {} genau gleich aussehen, behandelt ES6 das { unmittelbar nach => immer als Anfang eines Anweisungsblocks und nicht als Anfang eines Objekts. {} wird als Pfeilfunktion ohne Funktionskörper analysiert und der Rückgabewert ist undefiniert.