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.
function, les accolades bouclées {} et le mot-clé return lorsqu'il n'y a qu'une seule expression. 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 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 .map() Lorsque vous utilisez des fonctions de flèche avec des méthodes de tableau telles que .sort(), .forEach(), .filter(), .reduce(),
Syntaxe des fonctions de flèche: réécrivez les fonctions régulières
La fonction// 函数声明
function sayHiStranger() {
return 'Hi, stranger!'
}
// 调用函数
sayHiStranger()Ce qui suit est le moyen standard de déclarer une fonction et de l'appeler en javascript:
const sayHiStranger = function () {
return 'Hi, stranger!'
}Vous pouvez également écrire la même fonction que l'expression de fonction que suit:
const sayHiStranger = () => 'Hi, stranger'
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: <🎜>
function mot-clé return mot-clé {} 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.
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:
// 函数声明
function sayHiStranger() {
return 'Hi, stranger!'
}
// 调用函数
sayHiStranger()Cependant, lorsqu'il n'y a qu'un seul paramètre, vous pouvez omettre les supports (pas avoir à le faire, mais cela peut):
const sayHiStranger = function () {
return 'Hi, stranger!'
}mais soyez prudent. Par exemple, si vous décidez d'utiliser le paramètre par défaut, vous devez l'enfermer entre parenthèses:
const sayHiStranger = () => 'Hi, stranger'
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)
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:
const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020C'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:
const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"Que s'est-il passé là-bas? Essayez d'utiliser une syntaxe de fonction régulière:
// 使用括号：正确
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)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:
// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低） const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes ) // 调用函数 // 输出：按降序排列的标题和点赞数 console.log(orderByLikes)
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):
const greeter = greeting => name => `${greeting}, ${name}!` .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:
// 函数声明
function sayHiStranger() {
return 'Hi, stranger!'
}
// 调用函数
sayHiStranger() 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:
const sayHiStranger = function () {
return 'Hi, stranger!'
}Les fonctions de flèche sont toutes des fonctions anonymes:
const sayHiStranger = () => 'Hi, stranger'
À 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:
const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020 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:
const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it" 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"
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.
// 使用括号：正确
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) 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.
// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低） const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes ) // 调用函数 // 输出：按降序排列的标题和点赞数 console.log(orderByLikes)
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:
// 函数声明
function sayHiStranger() {
return 'Hi, stranger!'
}
// 调用函数
sayHiStranger() 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:
const sayHiStranger = function () {
return 'Hi, stranger!'
}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.
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:
const sayHiStranger = () => 'Hi, stranger'
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:
const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020 Vous pouvez également utiliser .bind() pour résoudre ce problème:
const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it" 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:
// 使用括号：正确
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)(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:
// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低） const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes ) // 调用函数 // 输出：按降序排列的标题和点赞数 console.log(orderByLikes)
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 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.
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())
// 函数声明
function sayHiStranger() {
return 'Hi, stranger!'
}
// 调用函数
sayHiStranger() 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.
this Bien sûr, la solution consiste à utiliser la fonction régulière:
Utilisez la fonction flèche d'une bibliothèque tierce
const sayHiStranger = function () {
return 'Hi, stranger!'
}
this Par exemple, dans un gestionnaire d'événements jQuery,
this
const sayHiStranger = () => 'Hi, stranger'
this
const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020dans le
const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it" se lie à l'instance Vue, donc le message "Bonjour, monde!" created
this Cependant, si nous utilisons la fonction de flèche,
: this
message
// 使用括号：正确
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)
arguments Essayez d'implémenter cette fonction à l'aide de la fonction flèche:
// 函数声明
function sayHiStranger() {
return 'Hi, stranger!'
}
// 调用函数
sayHiStranger() 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:
const sayHiStranger = function () {
return 'Hi, stranger!'
} 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:
const sayHiStranger = () => 'Hi, stranger'
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.
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.
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.
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.
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.
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.
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.
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.
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.
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}).
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!
Quelle est la différence entre xls et xlsx
Pourquoi le disque dur mobile est-il si lent à s'ouvrir ?
méthode d'ouverture du fichier pkg
Pourquoi la désactivation des mises à jour automatiques dans Windows 11 n'est pas valide
Comment représenter des nombres négatifs en binaire
Vérifier la taille du dossier sous Linux
méthode de formatage HTML
Quel est le cœur d'un système de base de données ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
