Fonctions de flèche en javascript: graisse et syntaxe concise

Compréhension approfondie des fonctions de flèche JavaScript. Nous vous montrerons comment utiliser la syntaxe des flèches ES6, ainsi que quelques erreurs courantes à connaître lors de l'utilisation des fonctions Arrow dans votre code. Vous verrez de nombreux exemples qui illustrent comment cela fonctionne.

Après la publication d'ECMAScript 2015 (également connue sous le nom d'ES6), les fonctions de flèche JavaScript sont apparues. Grâce à sa syntaxe concise et à la façon de gérer le mot-clé this, la fonction Arrow est rapidement devenue l'une des fonctionnalités préférées des développeurs.

points clés

La fonction
• Arrow fournit une syntaxe concise dans JavaScript en éliminant le mot-clé function, les accolades bouclées {} et le mot-clé return lorsqu'il n'y a qu'une seule expression.
• Pour les fonctions à paramètre unique, les parenthèses dans les paramètres de fonction de flèche peuvent être omises, mais pour les fonctions non paramètre ou multi-paramètres et lors de l'utilisation de paramètres par défaut, les supports doivent être utilisés.
• Les fonctions Arrow sont intrinsèquement anonymes, ce qui signifie qu'elles n'ont pas d'identifiants de nom, mais lorsqu'ils sont affectés à une variable, le nom de la fonction peut être déduit de la variable de débogage.
Le mot-clé
• dans la fonction this flèche capture sa valeur pour personnaliser le contexte fermé de la fonction flèche, et non là où elle est appelée, ce qui le rend adapté aux expressions de fonction traditionnelles qui doivent être liées à un this externe
Condition de contexte.
• Les fonctions de flèche function ne conviennent pas à tous les cas, en particulier dans les méthodes de l'objet ou lorsqu'ils utilisent des constructeurs this, car ils ont des liaisons lexicales arguments et sont des objets
manquants.
• .map() Lorsque vous utilisez des fonctions de flèche avec des méthodes de tableau telles que .sort(), .forEach(), .filter(), .reduce(),
,

,

et

, elles peuvent améliorer la lisibilité et la simplicité , mais il faut prendre soin de s'assurer qu'ils sont les bons outils pour ce travail dans un contexte spécifique.

Syntaxe des fonctions de flèche: réécrivez les fonctions régulières

La fonction

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

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

est comme une recette où vous pouvez stocker des instructions utiles pour accomplir ce qui doit se produire dans votre programme, comme effectuer une action ou renvoyer une valeur. En appelant votre fonction, vous pouvez effectuer les étapes contenues dans la recette. Vous pouvez le faire chaque fois que vous appelez la fonction sans réécrire la recette encore et encore.

Ce qui suit est le moyen standard de déclarer une fonction et de l'appeler en javascript:

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

Vous pouvez également écrire la même fonction que l'expression de fonction que suit:

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

Les fonctions de flèche JavaScript sont toujours des expressions. Voici comment réécrire la fonction ci-dessus comme une expression de la fonction de flèche en utilisant la notation de flèche de graisse: Les avantages incluent:

• Une seule ligne de code
• non function mot-clé
• non return mot-clé
• pas de crachettes bouclées {}

Dans JavaScript, la fonction est "citoyen de première classe". Vous pouvez stocker des fonctions dans des variables, les transmettre comme arguments à d'autres fonctions et les renvoyer comme des valeurs d'autres fonctions. Vous pouvez faire tout cela avec des fonctions de flèche JavaScript.

pas de syntaxe du support

Dans l'exemple ci-dessus, la fonction n'a pas de paramètres. Dans ce cas, vous devez ajouter un ensemble de supports vides () avant le symbole de la graisse flèche (= & gt;). Cela est également vrai lorsque vous créez une fonction avec plusieurs paramètres:

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

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

Cependant, lorsqu'il n'y a qu'un seul paramètre, vous pouvez omettre les supports (pas avoir à le faire, mais cela peut):

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

mais soyez prudent. Par exemple, si vous décidez d'utiliser le paramètre par défaut, vous devez l'enfermer entre parenthèses:

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

juste parce que vous le pouvez, cela ne signifie pas que vous devriez. Avec une satire légère et gentille, Kyle Simpson (l'auteur de "You Don't Know JS") a fait ses pensées sur l'omission de supports dans cet organigramme. (L'organigramme doit être inséré ici, mais comme l'image ne peut pas être insérée directement, elle est omise ici)

Retour implicite

Vous pouvez rendre la syntaxe de la flèche ES6 plus concise lorsqu'il n'y a qu'une seule expression dans le corps de la fonction. Vous pouvez tout mettre sur une seule ligne, supprimer les accolades bouclées et supprimer le mot-clé return.

Vous venez de voir comment ces lignes de code soignées fonctionnent dans l'exemple ci-dessus. Permettez-moi de vous donner un autre exemple de référence uniquement. La fonction de la fonction OrderByLikes () est comme son nom: il renvoie un tableau d'objets de la série Netflix disposés dans l'ordre du plus grand nombre de likes:

<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>

C'est cool, mais faites attention à la lisibilité du code - en particulier lors du tri d'un tas de fonctions de flèche en utilisant une ligne de code et une syntaxe de flèche ES6 non ramisée, comme dans cet exemple:

<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>

Que s'est-il passé là-bas? Essayez d'utiliser une syntaxe de fonction régulière:

<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>

Maintenant, vous pouvez rapidement comprendre comment la fonction externe Greeter a une salutation paramètre et renvoie une fonction anonyme. À son tour, cette fonction interne a un nom nommé paramètre et renvoie une chaîne en utilisant des valeurs de salutation et de noms. Voici comment appeler la fonction:

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

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

Notez ces erreurs de retour implicites

Lorsque votre fonction de flèche JavaScript contient plusieurs instructions, vous devez enfermer toutes les instructions en accolades bouclées et utiliser le mot-clé return.

Dans le code suivant, la fonction construit un objet contenant certains titres et résumé de la série Netflix (les commentaires Netflix proviennent du site Web Rotten Tomato):

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

La fonction de flèche dans la fonction

.map() est élargie par une série d'instructions et renvoie enfin un objet. Cela rend inévitable d'utiliser des accolades bouclées autour du corps de la fonction.

De plus, puisque vous utilisez des accolades bouclées, le retour implicite n'est pas une option. Vous devez utiliser le mot-clé return.

Si votre fonction renvoie l'objet littéral en utilisant un retour implicite , vous devez enfermer l'objet entre parenthèses. Ne pas le faire entraînera une erreur car le moteur JavaScript analyse par erreur les accolades de l'objet littéral en accolades de la fonction. Comme vous venez de le remarquer ci-dessus, vous ne pouvez pas omettre le mot-clé return lorsque vous utilisez des accolades bouclées dans la fonction de flèche.

La version plus courte du code précédent démontre cette syntaxe:

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

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

vous ne pouvez pas nommer la fonction de flèche

Les fonctions

qui n'ont pas d'identifiant de nom entre le mot-clé function et la liste des paramètres sont appelés fonctions anonymes . Voici à quoi ressemblent les expressions de fonction anonymes régulières:

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

Les fonctions de flèche sont toutes des fonctions anonymes:

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

À partir d'ES6, les variables et les méthodes peuvent déduire le nom d'une fonction anonyme basée sur leur position syntaxique, en utilisant leur attribut name. Cela permet de reconnaître la fonction lors de la vérification de sa valeur ou de la déclaration d'une erreur.

Vérifiez avec 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>

Notez que cet attribut inféré name n'existe que lorsque les fonctions anonymes sont affectées aux variables, comme indiqué dans l'exemple ci-dessus. Si vous utilisez des fonctions anonymes comme une fonction de rappel, cette fonction pratique est perdue. Ceci est illustré par la démonstration suivante, où les fonctions anonymes dans la méthode .setInterval() ne peuvent pas utiliser l'attribut 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>

et plus que cela. Cette propriété déduite name ne peut toujours pas être utilisée comme identifiant approprié pour lequel vous pouvez référencer la fonction à l'intérieur de la fonction - par exemple, pour la récursivité, les événements non liés, etc.

L'anonymat intrinsèque des fonctions Arrow conduit Kyle Simpson à exprimer ses points de vue comme suit:

Étant donné que je pense que les fonctions anonymes ne conviennent pas à une utilisation fréquente dans les programmes, je n'aime pas utiliser le formulaire de fonction Ferm = & gt; Arrow. —— "Vous ne connaissez pas JS"

comment gérer ce mot-clé

La chose la plus importante à propos des fonctions flèches est de se rappeler comment elles gèrent les mots clés this. En particulier, le mot-clé this à l'intérieur de la fonction de flèche ne sera pas référé.

Pour illustrer ce que cela signifie, consultez la démonstration suivante: (Le stylo code doit être inséré ici, mais comme le stylo de code ne peut pas être inséré directement, il est omis ici)

Il s'agit d'un bouton. Cliquer sur le bouton déclenche un compteur inversé de 5 à 1, qui s'affiche sur le bouton lui-même.

<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>

Notez comment le gestionnaire d'événements dans la méthode .addEventListener() est une expression de fonction anonyme régulière, pas une fonction flèche. Pourquoi? Si vous vous connectez à la fonction this, vous verrez qu'il fait référence à l'élément de bouton avec l'écouteur attaché, ce qui est exactement le résultat attendu et ce que le programme doit fonctionner comme prévu.

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

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

Dans la console des outils de développeur Firefox, il ressemble à ceci: (l'image doit être insérée ici, mais comme l'image ne peut pas être insérée directement, elle est omise ici)

Cependant, essayez de remplacer la fonction régulière par la fonction de flèche comme suit:

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

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

Maintenant, this ne cite plus les boutons. Au lieu de cela, il fait référence à un objet de fenêtre: (l'image doit être insérée ici, mais comme l'image ne peut pas être insérée directement, elle est omise ici)

Cela signifie que si vous souhaitez ajouter une classe au bouton en utilisant this après avoir cliqué sur le bouton, votre code ne fonctionnera pas, comme indiqué dans l'exemple suivant:

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

Le message d'erreur dans la console est le suivant: (L'image doit être insérée ici, mais comme l'image ne peut pas être insérée directement, elle est omise ici)

Lorsque vous utilisez les fonctions Arrow en JavaScript, la valeur du mot-clé this n'est pas rebelle. Il hérite de la portée des parents (c'est ce qu'on appelle la portée lexicale). Dans ce cas particulier, la fonction de flèche en question est transmise comme un argument à la méthode startBtn.addEventListener(), qui se trouve dans la portée globale. Par conséquent, this dans le gestionnaire de fonctions est également lié à la portée globale - c'est-à-dire l'objet Window.

Donc, si vous souhaitez que this référenne le bouton Démarrer dans votre programme, la bonne façon est d'utiliser une fonction régulière, pas une fonction fléchée.

Fonction de flèche anonyme

La prochaine chose à noter est le code de la méthode .setInterval() dans la démonstration ci-dessus. Ici, vous trouverez également une fonction anonyme, mais cette fois, c'est une fonction flèche. Pourquoi?

Notez que si vous utilisez une fonction régulière, quelle sera la valeur de this:

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

sera-ce un élément de bouton? Pas du tout. Ce sera un objet de fenêtre! (L'image doit être insérée ici, mais comme l'image ne peut pas être insérée directement, elle est omise ici)

En fait, le contexte a changé car this est maintenant dans une fonction non liée ou globale qui est transmise comme un argument à .setInterval(). Par conséquent, la valeur du mot-clé this change également car elle est désormais liée à la portée globale.

Dans ce cas, une astuce commune consiste à inclure une autre variable pour stocker la valeur du mot-clé this afin qu'il continue de référencer l'élément attendu - dans ce cas l'élément bouton:

<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>

Vous pouvez également utiliser .bind() pour résoudre ce problème:

<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>

En utilisant la fonction flèche, le problème a complètement disparu. Ce qui suit est la valeur de this lors de l'utilisation de la fonction flèche:

<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>

(l'image doit être insérée ici, mais comme l'image ne peut pas être insérée directement, elle est omise ici)

Cette fois, la console a enregistré les boutons, ce que nous voulions. En fait, le programme modifiera le texte du bouton, il a donc besoin de this pour référencer l'élément de bouton:

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

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

Fonction Arrow n'a pas son propre this contexte . Ils héritent de la valeur this du parent, et c'est à cause de cette fonctionnalité qu'ils deviennent un excellent choix dans les situations ci-dessus.

Les fonctions de flèche JavaScript ne sont pas toujours le bon outil

Les fonctions Arrow ne sont pas seulement une nouvelle façon de sophistiquer des fonctions JavaScript. Ils ont leurs propres limites, ce qui signifie que dans certains cas, vous ne voulez pas l'utiliser. Le gestionnaire de clics dans la démonstration précédente est un exemple, mais ce n'est pas le seul. Vérifions quelques autres.

Fonction de flèche comme méthode d'objet

La fonction flèche n'est pas bien utilisée comme méthode d'objet. Voici un exemple.

Considérez cet objet NetflixSeries, qui a certaines propriétés et plusieurs méthodes. L'appel console.log(netflixSeries.getLikes()) devrait imprimer un message contenant le nombre actuel de likes. console.log(netflixSeries.addLike())

En revanche, appeler la méthode

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

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

renvoie "Undefined a nan likes", et appeler la méthode

renvoie "Merci d'avoir aimé Undefined, qui a maintenant des likes nan". Par conséquent, .getLikes() et .addLike() ne peuvent pas se référer aux propriétés d'un objet this.title et this.likes respectivement. title likes Le même problème réside dans la portée lexicale de la fonction de flèche.

Dans la méthode de l'objet consiste à référence à la portée du parent, dans ce cas, il s'agit d'un objet de fenêtre, pas de l'objet parent lui-même - c'est-à-dire qu'il n'est pas un objet NetflixSeries.

this Bien sûr, la solution consiste à utiliser la fonction régulière:

Utilisez la fonction flèche d'une bibliothèque tierce

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

Une autre chose à noter est que les bibliothèques tierces lient généralement les appels de méthode afin que la valeur

pointe vers du contenu utile.

this Par exemple, dans un gestionnaire d'événements jQuery,

vous permettra d'accéder à l'élément DOM du gestionnaire lié:

this

Cependant, si nous utilisons la fonction de flèche - comme nous l'avons vu, il n'a pas son propre contexte

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

- nous obtiendrons des résultats inattendus:

this

Voici un autre exemple d'utilisation de Vue:

<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>

dans le

<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>

Hook,

se lie à l'instance Vue, donc le message "Bonjour, monde!" created this Cependant, si nous utilisons la fonction de flèche,

pointera vers la portée du parent, qui n'a pas l'attribut

: this message

La fonction de flèche n'a pas d'arguments objet

<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>

Parfois, vous devrez peut-être créer une fonction avec un nombre incertain de paramètres. Par exemple, supposons que vous souhaitiez créer une fonction qui répertorie votre série Netflix préférée par ordre de préférence. Cependant, vous ne savez pas combien de séries vous souhaitez inclure. JavaScript fournit des objets

. Il s'agit d'un objet de type tableau (pas un tableau complet) qui stocke la valeur transmise à la fonction lorsqu'elle est appelée.

arguments Essayez d'implémenter cette fonction à l'aide de la fonction flèche:

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

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

Lorsque vous appelez la fonction, vous recevrez le message d'erreur suivant: Uncing ReferenceError: Les arguments ne sont pas définis. Cela signifie que l'objet arguments n'est pas disponible dans la fonction flèche. En fait, le remplacement de la fonction de flèche par une fonction régulière peut résoudre le problème:

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

Par conséquent, si vous avez besoin d'objets arguments, vous ne pouvez pas utiliser la fonction de flèche.

Mais que se passe-t-il si vous voulez vraiment utiliser la fonction fléchée pour copier la même fonction? Une chose que vous pouvez faire est d'utiliser les paramètres restants de ES6 (...). Voici comment réécrire votre fonction:

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

Conclusion

En utilisant les fonctions Arrow, vous pouvez écrire une ligne de code propre, utiliser un retour implicite et finalement oublier d'utiliser l'ancienne méthode pour résoudre le problème de liaison de

Mot-clé en JavaScript. La fonction de flèche fonctionne également bien avec des méthodes de tableau telles que this, .map(), .sort(), .forEach(), .filter() et .reduce(). Mais n'oubliez pas: les fonctions de flèche ne remplacent pas les fonctions JavaScript régulières. N'oubliez pas, utilisez-les uniquement si les fonctions de flèche sont l'outil correct.

Si vous avez des questions sur les fonctions Arrow ou si vous avez besoin d'aide pour les utiliser correctement, je vous recommande de visiter le forum convivial. Il y a beaucoup de programmeurs bien informés prêts à aider.

Des questions fréquemment posées sur les fonctions de flèche JavaScript

Quelle est la fonction de flèche dans JavaScript?

Vous pouvez définir les fonctions de flèche en utilisant la syntaxe suivante: (Paramètres) => Expression. Par exemple: (x, y) = & gt; x y définit une fonction flèche qui prend deux paramètres et renvoie leur somme.

Comment définir la fonction de flèche?

Vous pouvez définir les fonctions de flèche en utilisant la syntaxe suivante: (Paramètres) => Expression. Par exemple: (x, y) = & gt; x y définit une fonction flèche qui prend deux paramètres et renvoie leur somme.

Quelle est la différence entre les fonctions de flèche et les fonctions régulières?

La fonction de flèche et la fonction régulière sont différentes dans les aspects suivants: Ils n'ont pas le leur this. Au lieu de cela, ils héritent de la valeur this de la portée lexicale environnante. Les fonctions de flèche ne peuvent pas être utilisées comme constructeurs, ce qui signifie que vous ne pouvez pas créer des instances d'objets en utilisant new. La fonction Arrow n'a pas son propre objet arguments. Au lieu de cela, ils héritent de la portée fermée arguments. La fonction de flèche est plus simple et plus adaptée aux opérations simples à une seule ligne.

Quels sont les avantages de l'utilisation des fonctions flèches?

Les fonctions Arrow fournissent une syntaxe concise pour rendre votre code plus lisible. Ils aident également à éviter le problème de la liaison this, car ils héritent du contexte environnant. Cela peut simplifier certains modèles de codage et réduire le besoin de solutiels tels que bind, apply ou call.

La fonction de flèche est-elle adaptée à tous les cas?

Bien que les fonctions de flèche soient utiles pour de nombreux scénarios, ils peuvent ne pas fonctionner dans tous les cas. Ils sont les mieux adaptés aux fonctions courtes et simples. Les fonctions traditionnelles peuvent être plus adaptées aux fonctions ou fonctions complexes qui nécessitent leur propre contexte this.

Quelles versions JavaScript prennent en charge les fonctions de flèche?

La fonction de flèche a été introduite dans ECMAScript 6 (ES6) et est prise en charge par les navigateurs modernes et les versions Node.js. Ils sont largement utilisés dans le développement de JavaScript moderne.

Quelles sont les limites des fonctions flèches?

La fonction

flèche ne peut pas être utilisée comme constructeur, n'a pas son propre objet arguments et n'est pas très adapté aux méthodes qui nécessitent un contexte dynamique this. De plus, leur syntaxe concise peut ne pas convenir aux fonctions contenant plusieurs instructions.

Les fonctions de flèche peuvent-elles être utilisées pour des méthodes dans des objets ou des classes?

Oui, les fonctions de flèche peuvent être utilisées pour des méthodes dans des objets ou des classes. Cependant, n'oubliez pas que les fonctions Arrow n'ont pas leur propre this, de sorte qu'elles peuvent ne pas fonctionner comme prévu dans les méthodes qui nécessitent un contexte dynamique this.

Comment renvoyer l'objet littéral de la fonction Arrow?

Lors du retour des littéraux d'objet directement des fonctions de flèche, l'objet doit être enfermé entre parenthèses pour éviter la confusion avec les blocs de fonction. Par exemple: () = & gt; ({key: value}).

Puis-je omettre des supports pour un seul paramètre dans la fonction de flèche?

Oui, si la fonction de flèche accepte un seul paramètre, les supports autour du paramètre peuvent être omis. Par exemple, x = & gt; x * 2 est une fonction de flèche valide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!