Pfeilfunktionen in JavaScript: Fett & Concise Syntax

eingehendes Verständnis von JavaScript-Pfeilfunktionen. Wir zeigen Ihnen, wie Sie die ES6 -Arrow -Syntax verwenden, sowie einige häufige Fehler, die Sie bei der Verwendung von Pfeilfunktionen in Ihrem Code bewusst sind. Sie werden viele Beispiele sehen, die veranschaulichen, wie es funktioniert.

Nach der Veröffentlichung von ECMascript 2015 (auch als ES6 bekannt) erschien JavaScript -Pfeilfunktionen. Dank seiner prägnanten Syntax und der Umgang mit dem Schlüsselwort this wurde die Pfeilfunktion schnell zu einer der Lieblingsfunktionen der Entwickler.

Schlüsselpunkte

Die
• -Pfeilfunktion bietet eine prägnante Syntax in JavaScript, indem das Schlüsselwort function, Curly Accraces {} und das Schlüsselwort return, wenn es nur einen Ausdruck gibt, eliminiert.
• Für Einzelparameterfunktionen können Klammern in Pfeilfunktionsparametern weggelassen werden. Für Nicht-Parameter- oder Mehrparameterfunktionen und bei Verwendung von Standardparametern müssen Klammern verwendet werden.
• Pfeilfunktionen sind von Natur aus anonym, was bedeutet, dass sie keine Namensbezeichnungen haben, aber wenn sie einer Variablen zugeordnet sind, kann der Funktionsname aus der Variablen für das Debuggen abgeleitet werden.
Das Schlüsselwort
• in der this Pfeilfunktion erfasst ihren Wert, um den geschlossenen Kontext der Pfeilfunktion anzupassen, nicht dort, wo sie aufgerufen wird, was es für herkömmliche Funktionsausdrücke geeignet macht, die an eine externe this gebunden werden müssen Kontextzustand.
• Pfeilfunktionen sind nicht für alle Fälle geeignet, insbesondere in den Methoden des Objekts oder bei Verwendung von function -Konstruktoren, da sie lexikalische this -Bindungen haben und arguments Objekte fehlen.
• Bei Verwendung von Pfeilfunktionen mit Array -Methoden wie .map(), .sort(), .forEach(), .filter(), .reduce(),
,

und

können sie die Lesbarkeit und Einfachheit verbessern Es muss jedoch darauf geachtet werden, dass sie in einem bestimmten Kontext die richtigen Tools für diesen Job sind.

Pfeilfunktionssyntax: Schreiben Sie reguläre Funktionen

um Die

-Funktion ist wie ein Rezept, in dem Sie nützliche Anweisungen speichern können, um das zu erfüllen, was in Ihrem Programm passieren muss, z. B. eine Aktion oder die Rückgabe eines Wertes. Wenn Sie Ihre Funktion aufrufen, können Sie die im Rezept enthaltenen Schritte ausführen. Sie können dies jedes Mal tun, wenn Sie die Funktion aufrufen, ohne das Rezept immer wieder neu zu schreiben.

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

Folgendes ist die Standardmethode, um eine Funktion zu deklarieren und sie in JavaScript aufzurufen:

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

Sie können auch dieselbe Funktion wie ein Funktionsausdruck wie folgt schreiben:

<code class="language-javascript">const sayHiStranger = () => 'Hi, stranger'</code>

JavaScript -Pfeilfunktionen sind immer Ausdrücke. So schreiben Sie die obige Funktion als Pfeilfunktionsausdruck mit Fettpfeilnotation um:

Die Vorteile umfassen:

• Nur eine Codezeile
• no function Schlüsselwort
• no return Schlüsselwort
• Keine lockigen Klammern {}

In JavaScript lautet die Funktion "First Class Citizen". Sie können Funktionen in Variablen speichern, sie als Argumente an andere Funktionen übergeben und sie als Werte aus anderen Funktionen zurückgeben. Sie können all dies mit JavaScript -Pfeilfunktionen ausführen.

Keine Klammsyntax

im obigen Beispiel hat die Funktion keine Parameter. In diesem Fall müssen Sie vor dem Symbol für Fettpfeil (= & gt;) eine Reihe leerer Klammern () () hinzufügen. Dies gilt auch, wenn Sie eine Funktion mit mehreren Parametern erstellen:

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

Wenn es jedoch nur einen Parameter gibt, können Sie die Klammern weglassen (müssen dies nicht tun, aber es kann es können):

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

Aber sei vorsichtig. Wenn Sie beispielsweise den Standardparameter verwenden, müssen Sie ihn in Klammern einschließen:

<code class="language-javascript">const sayHiStranger = () => 'Hi, stranger'</code>

Nur weil Sie können, heißt das nicht, dass Sie es sollten. Kyle Simpson (der Autor von "You Kenne JS JS") steckte mit einer unbeschwerten, gutherzigen Satire seine Gedanken darüber, Klammern in diesen Flussdiagramm zu weglassen. (Das Flussdiagramm sollte hier eingefügt werden, aber da das Bild nicht direkt eingefügt werden kann, wird es hier weggelassen)

implizite Rückgabe

Sie können die ES6 -Pfeilsyntax präziser machen, wenn nur ein Ausdruck im Funktionskörper vorhanden ist. Sie können alles auf eine Zeile legen, die lockigen Klammern entfernen und das Schlüsselwort return entfernen.

Sie haben gerade gesehen, wie diese ordentlichen Codezeilen im obigen Beispiel funktionieren. Lassen Sie mich Ihnen ein weiteres Beispiel nur als Referenz geben. Die Funktion der Funktion "OrderBylikes () ist wie der Name: Es gibt ein Array von Netflix -Serienobjekten zurück, die in der Reihenfolge der höchsten Anzahl von Likes angeordnet sind:

<code class="language-javascript">const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020</code>

Das ist cool, aber seien Sie vorsichtig mit der Lesbarkeit des Codes - insbesondere bei der Sortierung einer Reihe von Pfeilfunktionen mithilfe einer Codezeile und einer unverzweigten ES6 -Pfeilsyntax, wie in diesem Beispiel:

<code class="language-javascript">const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"</code>

Was ist dort passiert? Versuchen Sie, die reguläre Funktionssyntax zu verwenden:

<code class="language-javascript">// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)</code>

Jetzt können Sie schnell verstehen, wie der externe Funktionsgrüßer eine Parametergruß hat, und gibt eine anonyme Funktion zurück. Diese interne Funktion hat wiederum einen Parameter mit dem Namen namens Name und gibt eine Zeichenfolge mit Begrüßungs- und Namenswerten zurück. Hier erfahren Sie, wie Sie die Funktion nennen:

<code class="language-javascript">// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 调用函数
// 输出：按降序排列的标题和点赞数
console.log(orderByLikes)</code>

Beachten Sie diese impliziten Rückgabebereich

Wenn Ihre JavaScript -Pfeilfunktion mehrere Anweisungen enthält, müssen Sie alle Anweisungen in lockigen Klammern einschließen und das Schlüsselwort return verwenden.

Im folgenden Code erstellt die Funktion ein Objekt mit einigen Titeln und Zusammenfassungen von Netflix -Serien (Netflix -Kommentare stammen von der faulen Tomaten -Website):

<code class="language-javascript">const greeter = greeting => name => `${greeting}, ${name}!`</code>

Die Pfeilfunktion in der Funktion

.map() wird durch eine Reihe von Anweisungen erweitert und schließlich ein Objekt zurückgibt. Dies macht es unvermeidlich, lockige Klammern um den Funktionskörper umsetzt.

Da Sie lockige Klammern verwenden, ist die implizite Rendite keine Option. Sie müssen das Schlüsselwort return verwenden.

Wenn Ihre Funktion das Objektliteral mit implizitem Return zurückgibt, müssen Sie das Objekt in Klammern einschließen. Andernfalls führt dies zu einem Fehler, da die JavaScript -Engine fälschlicherweise die Klammern des Objekts wörtlich in die Klammern der Funktion analysiert. Wie Sie erst oben bemerkt haben, können Sie das Schlüsselwort return nicht unterlassen, wenn Sie in der Pfeilfunktion lockige Klammern verwenden.

Die kürzere Version des vorherigen Code zeigt diese Syntax:

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

Sie können die Pfeilfunktion nicht benennen

Funktionen, die zwischen dem Schlüsselwort function und der Parameterliste keine Namensbezeichnung haben, werden anonyme Funktionen bezeichnet. So sehen regelmäßige anonyme Funktionsausdrücke aus wie:

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

Pfeilfunktionen sind alle anonymen Funktionen:

<code class="language-javascript">const sayHiStranger = () => 'Hi, stranger'</code>

Ab ES6 können Variablen und Methoden den Namen einer anonymen Funktion basierend auf ihrer syntaktischen Position unter Verwendung ihres name -attributs schließen. Dies ermöglicht es, die Funktion zu erkennen, wenn sie ihren Wert überprüfen oder einen Fehler melden.

wenden Sie sich an anonymousarrowfunc:

<code class="language-javascript">const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020</code>

Beachten Sie, dass dieses abgeleitete Attribut nur dann vorhanden ist, wenn anonyme Funktionen Variablen zugewiesen werden, wie im obigen Beispiel gezeigt. Wenn Sie anonyme Funktionen als Rückruffunktion verwenden, geht diese praktische Funktion verloren. Dies wird durch die folgende Demonstration veranschaulicht, wobei anonyme Funktionen in der Methode name das Attribut .setInterval() nicht verwenden können: name

<code class="language-javascript">const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"</code>

und mehr als das. Diese abgeleitete Eigenschaft

kann immer noch nicht als geeignete Kennung verwendet werden, für die Sie die Funktion innerhalb der Funktion verweisen können - zum Beispiel für Rekursion, Ereignisse entbinden usw. name

Die intrinsische Anonymität der Pfeilfunktionen führt Kyle Simpson dazu, seine Ansichten wie folgt auszudrücken:

Da ich denke, dass anonyme Funktionen nicht für die häufige Verwendung in Programmen geeignet sind, mag ich es nicht, das Formular für = & gt; Pfeilfunktion zu verwenden. —— "Du kennst JS nicht"

wie man dieses Schlüsselwort

umgeht

Das Wichtigste an Pfeilfunktionen ist, sich daran zu erinnern, wie sie mit den Schlüsselwörtern

umgehen. Insbesondere wird das Schlüsselwort this in der Pfeilfunktion nicht wiedergegeben. this

Um zu veranschaulichen, was dies bedeutet, lesen Sie die folgende Demonstration: (Der Codestift sollte hier eingefügt werden, aber da der Codestift nicht direkt eingefügt werden kann, wird er hier weggelassen)

Dies ist eine Taste. Wenn Sie auf die Schaltfläche klicken, wird ein Rückwärtszähler von 5 bis 1 ausgelöst, der auf der Schaltfläche selbst angezeigt wird.

<code class="language-javascript">// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)</code>

Beachten Sie, dass der Ereignishandler in der Methode

ein regelmäßiger anonymer Funktionsausdruck ist, keine Pfeilfunktion. Warum? Wenn Sie sich in der Funktion .addEventListener() anmelden, werden Sie feststellen, dass es das Schaltflächenelement mit dem angehängten Hörer verweist. Dies ist genau das erwartete Ergebnis und das, was das Programm wie geplant funktionieren muss. this

<code class="language-javascript">// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 调用函数
// 输出：按降序排列的标题和点赞数
console.log(orderByLikes)</code>

In der Firefox Developer Tools -Konsole sieht es so aus: (Das Bild sollte hier eingefügt werden, aber da das Bild nicht direkt eingefügt werden kann, wird es hier weggelassen)

Versuchen Sie jedoch, die reguläre Funktion durch die Pfeilfunktion wie folgt zu ersetzen:

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

Jetzt zitiert this keine Schaltflächen mehr. Stattdessen verweist es ein Fensterobjekt: (Das Bild sollte hier eingefügt werden, aber da das Bild nicht direkt eingefügt werden kann, wird es hier weggelassen)

Dies bedeutet, dass Ihr Code nicht funktioniert, wenn Sie nach dem Klicken auf die Schaltfläche eine Klasse zur Schaltfläche hinzufügen möchten, wie im folgenden Beispiel gezeigt: this

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

Die Fehlermeldung in der Konsole lautet wie folgt: (Das Bild sollte hier eingefügt werden, aber da das Bild nicht direkt eingefügt werden kann, wird es hier weggelassen)

Wenn Sie die Pfeilfunktionen in JavaScript verwenden, wird der Wert des Schlüsselworts

nicht zurückgebracht. Es erbt vom übergeordneten Bereich (dies wird als lexikalischer Bereich bezeichnet). In diesem speziellen Fall wird die fragliche Pfeilfunktion als Argument an die this -Methode übergeben, die sich im globalen Bereich befindet. Daher ist startBtn.addEventListener() im Funktionshandler auch an den globalen Bereich gebunden - dh das Fensterobjekt. this

Wenn Sie also

auf die Startschaltfläche in Ihrem Programm verweisen möchten, können Sie eine reguläre Funktion und keine Pfeilfunktion verwenden. this

anonyme Pfeilfunktion

als nächstes zu beachten ist der Code in der

-Methode in der obigen Demonstration. Hier finden Sie auch eine anonyme Funktion, diesmal ist es jedoch eine Pfeilfunktion. Warum? .setInterval()

Beachten Sie, dass bei Verwendung einer regulären Funktion der Wert von

: this

<code class="language-javascript">const sayHiStranger = () => 'Hi, stranger'</code>

Wird es ein Tastenelement sein? Gar nicht. Es wird ein Fensterobjekt sein! (Das Bild sollte hier eingefügt werden, aber da das Bild nicht direkt eingefügt werden kann, wird es hier weggelassen)

Tatsächlich hat sich der Kontext geändert, da sich

jetzt in einer ungebundenen oder globalen Funktion befindet, die als Argument an this übergeben wird. Daher ändert sich auch der Wert des Schlüsselworts .setInterval(), da es jetzt an den globalen Bereich gebunden ist. this

In diesem Fall besteht ein häufiger Trick darin, eine andere Variable zu berücksichtigen, um den Wert des Schlüsselworts

so zu speichern, sodass er weiter auf das erwartete Element verweist - in diesem Fall das Schaltflächenelement: this

<code class="language-javascript">const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020</code>

Sie können auch

verwenden, um dieses Problem zu lösen: .bind()

<code class="language-javascript">const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"</code>

Mit der Pfeilfunktion verschwand das Problem vollständig. Das Folgende ist der Wert von

bei der Verwendung der Pfeilfunktion: this

<code class="language-javascript">// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)</code>

(Das Bild sollte hier eingefügt werden, aber da das Bild nicht direkt eingefügt werden kann, wird es hier weggelassen)

Diesmal hat die Konsole die Tasten aufgezeichnet, was wir wollten. Tatsächlich ändert das Programm den Schaltflächentext, sodass es

auf das Schaltflächenelement verweist: this

<code class="language-javascript">// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 调用函数
// 输出：按降序排列的标题和点赞数
console.log(orderByLikes)</code>

Pfeilfunktion

hat keinen eigenen -Kontext this. Sie erben vom Wert des Elternteils, und aufgrund dieses Merkmals werden sie in den oben genannten Situationen zu einer ausgezeichneten Wahl.

JavaScript -Pfeilfunktionen sind nicht immer das richtige Werkzeug

Pfeilfunktionen sind nicht nur eine schicke neue Art, JavaScript -Funktionen zu schreiben. Sie haben ihre eigenen Einschränkungen, was bedeutet, dass Sie es in einigen Fällen nicht verwenden möchten. Der Klick -Handler in der vorherigen Demonstration ist ein Beispiel, dies ist jedoch nicht der einzige. Lassen Sie uns noch ein paar überprüfen.

Pfeilfunktion als Objektmethode

Pfeilfunktion wird nicht gut als Objektmethode verwendet. Hier ist ein Beispiel.

Betrachten Sie dieses Netflixseries -Objekt, das einige Eigenschaften und verschiedene Methoden aufweist. Rufen Sie console.log(netflixSeries.getLikes()) eine Nachricht mit der aktuellen Anzahl von Likes aus. console.log(netflixSeries.addLike())

Im Gegensatz dazu retektiert die

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

-Methode zurück "undefined hat Nan -Likes" und reserviert die

-Methode zurück. Daher können .getLikes() und .addLike() nicht auf die Eigenschaften eines Objekts this.title bzw. this.likes verweisen. title likes Das gleiche Problem liegt im lexikalischen Bereich der Pfeilfunktion.

In der Objektmethode verweist das übergeordnete Bereich, in diesem Fall handelt es sich um ein Fensterobjekt, nicht das übergeordnete Objekt selbst - dh es handelt sich nicht um ein Netflixseries -Objekt.

this Natürlich besteht die Lösung darin, die reguläre Funktion zu verwenden:

Verwenden Sie die Pfeilfunktion einer Bibliothek von Drittanbietern

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

Eine andere Sache, die zu beachten ist, ist, dass Bibliotheken von Drittanbietern normalerweise Methodenaufrufe binden, damit der Wert

auf nützliche Inhalte verweist. this

Zum Beispiel können Sie in einem Jquery -Event -Handler

auf das DOM -Element des gebundenen Handlers zugreifen: this

<code class="language-javascript">const sayHiStranger = () => 'Hi, stranger'</code>

Wenn wir jedoch die Pfeilfunktion verwenden - wie wir gesehen haben, gibt es keinen eigenen

Kontext - wir erhalten unerwartete Ergebnisse: this

<code class="language-javascript">const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020</code>

Hier ist ein weiteres Beispiel für die Verwendung von VUE:

<code class="language-javascript">const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"</code>

Bindet in der

-Haken created an die VUE -Instanz, also wird die Nachricht "Hallo, Welt!" this

Wenn wir jedoch die Pfeilfunktion verwenden, verweist

auf das übergeordnete Bereich, das nicht das Attribut this hat: message

<code class="language-javascript">// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)</code>

Die Pfeilfunktion hat kein Argumente Objekt

Manchmal müssen Sie möglicherweise eine Funktion mit einer unsicheren Anzahl von Parametern erstellen. Angenommen, Sie möchten eine Funktion erstellen, die Ihre bevorzugte Netflix -Serie in der Reihenfolge der Präferenz auflistet. Sie wissen jedoch nicht, wie viele Serien Sie einbeziehen möchten. JavaScript bietet

Objekte. Dies ist ein Array-ähnliches Objekt (kein vollständiges Array), das den an die Funktion übergebenen Wert speichert, wenn es aufgerufen wird. arguments

Versuchen Sie, diese Funktion mit der Pfeilfunktion zu implementieren:

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

Wenn Sie die Funktion aufrufen, erhalten Sie die folgende Fehlermeldung: Uncortn ReferenceError: Argumente sind nicht definiert. Dies bedeutet, dass das arguments -Objekt in der Pfeilfunktion nicht verfügbar ist. Tatsächlich kann das Ersetzen der Pfeilfunktion durch eine reguläre Funktion das Problem lösen:

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

Wenn Sie daher arguments Objekte benötigen, können Sie die Pfeilfunktion nicht verwenden.

Aber was ist, wenn Sie wirklich die Pfeilfunktion verwenden möchten, um dieselbe Funktion zu kopieren? Eine Sache, die Sie tun können, ist die verbleibenden Parameter von ES6 (...) zu verwenden. Hier erfahren Sie, wie Sie Ihre Funktion umschreiben:

<code class="language-javascript">const sayHiStranger = () => 'Hi, stranger'</code>

Schlussfolgerung

Durch die Verwendung von Pfeilfunktionen können Sie eine saubere Codezeile schreiben, die implizite Rendite verwenden und schließlich vergessen, die alte Methode zu verwenden, um das Bindungsproblem von

in JavaScript zu lösen. Die Pfeilfunktion funktioniert auch gut mit Array -Methoden wie this, .map(), .sort(), .forEach(), .filter() und .reduce(). Aber denken Sie daran: Pfeilfunktionen ersetzen die regulären JavaScript -Funktionen nicht. Denken Sie daran, verwenden Sie sie nur, wenn Pfeilfunktionen das richtige Werkzeug sind.

Wenn Sie Fragen zu Pfeilfunktionen haben oder Hilfe benötigen, um sie korrekt zu verwenden, empfehle ich Ihnen, das sitePoint-freundliche Forum zu besuchen. Es gibt viele sachkundige Programmierer, die bereit sind, um zu helfen.

häufig gestellte Fragen zu JavaScript -Pfeilfunktionen

Was ist die Pfeilfunktion in JavaScript?

Sie können Pfeilfunktionen anhand der folgenden Syntax definieren: (Parameter) => Ausdruck. Zum Beispiel: (x, y) = & gt; x y definiert eine Pfeilfunktion, die zwei Parameter erfordert und ihre Summe zurückgibt.

Wie kann man die Pfeilfunktion definieren?

Sie können Pfeilfunktionen anhand der folgenden Syntax definieren: (Parameter) => Ausdruck. Zum Beispiel: (x, y) = & gt; x y definiert eine Pfeilfunktion, die zwei Parameter erfordert und ihre Summe zurückgibt.

Was ist der Unterschied zwischen Pfeilfunktionen und regulären Funktionen?

Die Pfeilfunktion und die reguläre Funktion unterscheiden sich in den folgenden Aspekten: Sie haben keine eigenen this. Stattdessen erben sie den Wert des umgebenden lexikalischen Bereichs. Pfeilfunktionen können nicht als Konstruktoren verwendet werden, was bedeutet, dass Sie keine Instanzen von Objekten mit this erstellen können. Die Pfeilfunktion hat kein eigenes new -Objekt. Stattdessen erben sie den geschlossenen Bereich arguments. Die Pfeilfunktion ist einfacher und geeigneter für einfache Einzelleitungsvorgänge. arguments

Was sind die Vorteile der Verwendung von Pfeilfunktionen?

Pfeilfunktionen bieten eine kurze Syntax, um Ihren Code lesbarer zu machen. Sie helfen auch, das Problem der

-Bindung zu vermeiden, da sie den umgebenden Kontext erben. Dies kann bestimmte Codierungsmuster vereinfachen und die Notwendigkeit von Problemumgehungen wie this, bind oder apply verringern. call

Ist die Pfeilfunktion für alle Fälle geeignet?

Obwohl Pfeilfunktionen für viele Szenarien nützlich sind, funktionieren sie möglicherweise nicht in allen Fällen. Sie eignen sich am besten für kurze und einfache Funktionen. Traditionelle Funktionen können besser für komplexe Funktionen oder Funktionen geeignet sein, die einen eigenen this -Kontext erfordern.

Welche JavaScript -Versionen unterstützen Pfeilfunktionen?

Die Pfeilfunktion wurde in ECMascript 6 (ES6) eingeführt und wird von modernen Browsern und Node.js -Versionen unterstützt. Sie werden in der modernen JavaScript -Entwicklung häufig eingesetzt.

Was sind die Einschränkungen der Pfeilfunktionen?

Die

-Pfeilfunktion kann nicht als Konstruktor verwendet werden, hat kein eigenes arguments -Objekt und ist nicht sehr geeignet für Methoden, die einen dynamischen this -Kontext erfordern. Darüber hinaus ist ihre prägnante Syntax möglicherweise nicht für Funktionen, die mehrere Anweisungen enthalten.

Können Pfeilfunktionen für Methoden in Objekten oder Klassen verwendet werden?

Ja, Pfeilfunktionen können für Methoden in Objekten oder Klassen verwendet werden. Denken Sie jedoch daran, dass die Pfeilfunktionen nicht über ihre eigenen this verfügen, sodass sie möglicherweise nicht wie erwartet in Methoden funktionieren, die einen dynamischen this -Kontext erfordern.

Wie kann ich Objektliteral aus der Pfeilfunktion zurückgeben?

Wenn Objektliterale direkt aus Pfeilfunktionen zurückgegeben werden, muss das Objekt in Klammern eingeschlossen sein, um Verwirrung mit Funktionsblöcken zu vermeiden. Zum Beispiel: () = & gt; ({Schlüssel: Wert}).

Kann ich Klammern für einen einzelnen Parameter in der Pfeilfunktion weglassen?

Ja, wenn die Pfeilfunktion einen einzelnen Parameter akzeptiert, können die Klammern um den Parameter weggelassen werden. Zum Beispiel ist x = & gt; x * 2 eine gültige Pfeilfunktion.

Das obige ist der detaillierte Inhalt vonPfeilfunktionen in JavaScript: Fett & Concise Syntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!