Programmation et script

Comment utiliser les fonctions flèches en javascript

Comment utiliser les fonctions flèches en javascript

La syntaxe des fonctions Arrow a été introduite avec Ecmascript6: En utilisant cette nouvelle syntaxe, dans certains cas (mais pas tous), nous pouvons produire un code plus concis et lisible, surtout lorsque notre fonction ne contient qu'une seule expression. Dans ce tutoriel, nous verrons comment nous pouvons définir une fonction fléchée, quelles sont les différences avec les fonctions standard et quels sont les cas où l'utilisation des fonctions de flèche n'est pas appropriée.

Dans ce tutoriel, vous apprendrez:

  • Qu'est-ce qu'une fonction flèche.
  • Comment une fonction flèche est définie.
  • Les différences entre les fonctions de flèche et les fonctions standard.
  • Les cas dans lesquels les fonctions de flèche ne peuvent pas être utilisées.

Exigences logicielles et conventions de ligne de commande Linux
Catégorie Exigences, conventions ou version logicielle utilisée
Système Système d'exploitation agnostique.
Logiciel Une installation de nœud Pour suivre ce tutoriel dans un environnement non naval.
Autre Connaissance des concepts JavaScript et orientés objet.
Conventions # - Exige que les commandes Linux soient exécutées avec des privilèges racine soit directement en tant qu'utilisateur racine, soit par l'utilisation de Sudo commande
$ - Exige que les commandes Linux soient exécutées en tant qu'utilisateur non privilégié régulier

Qu'est-ce qu'une «fonction de flèche»?

Les fonctions flèches ont été introduites avec ECMascript6: En utilisant cette nouvelle syntaxe, nous pouvons souvent obtenir du code plus concis, dans certains cas, traduisant des rappels multi-lignes en une seule ligne, grâce à des fonctionnalités comme la retour implicite. En raison de ses particularités, cependant, les fonctions de flèche ne peuvent pas remplacer les fonctions standard partout: il y a des contextes où nous ne pouvons pas les utiliser, et nous verrons pourquoi.

Des fonctions standard aux fonctions flèches

Dans ce paragraphe, nous verrons un exemple de la façon dont nous pouvons remplacer une fonction standard par une fonction fléchée: nous utiliserons un rappel de fonction d'ordre supérieur comme un exemple parfait lors de l'exécution d'une telle substitution est complètement très bien.

Comme vous le savez sûrement, un fonction d'ordre supérieur est une fonction qui renvoie une autre fonction, ou accepte une autre fonction comme un argument. Dans cet exemple, nous utiliserons filtre, ou déployer.prototype.filtre si tu veux. Cette méthode du objet Array, prend une fonction comme argument et renvoie un nouveau tableau, peuplé de tous les éléments du tableau d'origine qui sont positifs au test implémenté à l'intérieur de la fonction de rappel.

Voyons un exemple d'utilisation du filtre avec une fonction classique. Imaginez que nous avons un tableau de objets, Chacun d'eux représentant des personnages du livre «Seigneur des Anneaux»:

CONSTACTES CONSEUX = [Name: 'Frodo', Race: 'Hobbit', Name: 'Sam', Race: 'Hobbit', Name: 'Legolas', Race: 'Elf', Name: ' Aragorn ', race:' man ', nom:' boromir ', race:' man ']
Copie

Le personnages Le tableau contient 5 éléments; Chacun d'eux a deux propriétés: nom et course. Maintenant, supposons que nous voulons créer un nouveau tableau peu rempli uniquement par les personnages qui appartiennent à la race des hommes. En utilisant le filtre et la syntaxe de fonction standard, nous écrivons:

const Men = caractères.filtre (fonction filTermen (élément) élément de retour.race == 'man'; );
Copie

Comme dit avant, filtre, Prend une fonction comme un argument: lorsque vous utilisez la syntaxe standard, cette fonction peut être nommée ou anonyme. Dans la plupart des situations, les fonctions anonymes sont utilisées comme rappels, mais pour le bien de cet exemple, et pour mettre en évidence plus tard l'une des différences entre la syntaxe des fonctions standard et flèche, nous avons donné un nom à notre fonction: filterners.

La fonction de rappel à utiliser avec filtre, ne prend qu'un seul obligatoire paramètre, qui est l'élément du tableau d'origine qui est traité à chaque fois. Si la fonction renvoie vrai, L'élément est inséré en tant que membre du nouveau tableau, si la fonction retourne FAUX L'élément n'est pas. Dans ce cas spécifique, nous avons défini un test simple:

personnage.race == 'homme'
Copie

Ce test revient vrai si la coursepropriété de l'élément qui est traité, équivaut à la chaîne «homme». Voici le résultat de ce que nous avons écrit ci-dessus:

[name: 'aragorn', race: "man ', name:' boromir ', race:" man']
Copie

Maintenant, supposons que nous voulions refactoriser le code ci-dessus en utilisant un fonction de flèche. Nous écrivions:

const Men = caractères.filtre (élément => élément.race == 'man');
Copie

En utilisant le fonctions flèches Syntaxe, nous avons pu accomplir le même résultat de l'exemple précédent avec une seule ligne de code: à quel point?!. Ne vous inquiétez pas si à première vue, la nouvelle syntaxe vous confond, continuez simplement à lire.

La syntaxe de la fonction de flèche

Pendant que nous définissons une fonction standard en utilisant le fonction mot-clé, une fonction flèche est définie en utilisant le => symbole. Ce n'est évidemment pas la seule différence entre les deux: l'une des plus importantes que nous devons mettre en évidence ici est que si les fonctions classiques, dans les expressions de fonctions, peuvent être nommées ou anonymes, les fonctions flèches sont toujours anonymes.

Définition des arguments dans les fonctions Arrow

Dans l'exemple précédent, puisque nous nous débarrassons de la fonction mot-clé, la première chose que nous pouvons lire est élément, qui est l'argument accepté par la fonction flèche. La règle à suivre lors de la définition des arguments attendus par une fonction flèche est simple: si la fonction accepte plusieurs arguments, ou aucun argument du tout, nous devons les enfermer entre parenthèses; Si la fonction ne contient qu'un seul argument, comme c'est le cas dans notre exemple, nous pouvons omettre complètement la parenthèse.

Par exemple, imaginez que nous voulons définir une fonction qui renvoie le produit de deux nombres passés comme ses arguments. Nous écrivions:

// Étant donné que la fonction prend deux paramètres, nous devons utiliser les parenthèses constant multiply = (a, b) => a * b;
Copie

Retour implicite et accolades bouclées

Dans tous les exemples ci-dessus, vous avez peut-être remarqué l'absence d'une autre chose: le accolades qui délimitent le corps de la fonction. Pourquoi les avons-nous omis? Si le corps de la fonction de flèche se compose d'une seule expression, les accolades bouclées peuvent être omises: si c'est le cas, le résultat de l'expression est implicitement renvoyé:

// Si nous omettons les accolades bouclées, le résultat de l'expression est implicitement renvoyé par Multiply = (a, b) => a * b; multiplier (2,3); 6 // Résultat est 6: il est implicitement renvoyé // Si nous utilisons des accolades bouclées, le résultat n'est pas implicitement renvoyé par Multiply = (a, b) => a * b multiply (2,3); Undefined // Le résultat ne sera pas défini, car nous n'avons pas explicitement renvoyé le résultat de l'expression
Copie

Dans le code ci-dessus, nous avons défini une fonction très simple, multiplier: Cette fonction attend deux paramètres, donc nous devons les enfermer entre parenthèses. Le => le symbole définit la fonction de flèche. Dans le premier exemple, comme nous n'avons qu'une seule expression, qui renvoie le produit des deux nombres passés sous forme de paramètres, nous pouvons omettre des accolades bouclées et profiter de la fonction de retour implicite.

Dans le deuxième exemple, nous avons utilisé les accolades bouclées, donc la fonction est retournée indéfini, Puisque nous n'avons aucun retour implicite: pour obtenir le résultat attendu que nous aurions dû utiliser retour explicitement.

Plusieurs déclarations ou expressions dans le corps de la fonction

Les accolades bouclées sont également la seule façon de spécifier plusieurs instructions ou expressions à l'intérieur d'une fonction flèche. Par exemple, supposons qu'au lieu de renvoyer le produit de deux nombres, nous voulons que notre fonction puisse sortir une chaîne, l'affichant:

constable multiply = (a, b) => const product = a * b; console.log ('Le produit de $ a et $ b est $ product');  multiplier (2,3); Le produit de 2 et 3 est 6
Copie

Et si nos fonctions Arrow devaient renvoyer un objet littéral, lui-même délimité par des accolades bouclées? Dans ce cas, nous devons enfermer l'objet littéral entre parenthèses:

const CreateChar = (CharacterName, caractères) => (nom: caractéristique, race: caractères); createChar ('gimli', 'nain') name: "gimli ', race:" nain'
Copie

Comment ce se comporte à l'intérieur des fonctions de flèche

L'une des différence les plus pertinentes, sinon la plus pertinente entre les fonctions classiques et les fonctions de flèche est de savoir comment le ce travaux. Cette différence est la principale raison pour laquelle dans certains cas, nous ne pouvons pas utiliser les fonctions flèches, comme nous le verrons bientôt. Avant de mettre en évidence les différences, Recaptons comment ce fonctionne lorsqu'il est utilisé dans les fonctions standard. La première chose à retenir est que la valeur de ce est déterminé par la façon dont la fonction elle-même est appelée, voyons quelques exemples.

Le défaut: ce est une référence à la portée globale

Quand ce est utilisé à l'intérieur d'une fonction autonome, et nous ne travaillons pas dans mode strict, il fait référence à la portée globale, qui est le fenêtre objet sur un environnement de navigateur, ou le objet global en nœud.js. Dans la même situation, mais en mode strict, ce sera indéfini Et nous recevrons une erreur:

var i = 20; // Ici, nous avons utilisé VAR au lieu de laisser car ce dernier ne crée pas de propriété sur la portée globale. fonction foo () console.journal (ceci.je);  // mode non strict foo () 20 // mode strict foo () TypeError: Impossible de lire la propriété 'i' non définie
Copie

Liaison implicite

Lorsqu'une fonction standard est référencée dans un objet, et cette fonction est appelée avec cet objet en tant que contexte, en utilisant la notation de points, ce devient une référence à cet objet. C'est ce qu'on appelle liaison implicite:

fonction foo () console.journal (ceci.je);  Soit Object = I: 20, FOO: FOO // La propriété FOO est une référence à l'objet FOOT FOO.foo () // c'est une référence à l'objet, donc ce.Je suis un objet.I 20
Copie

Liaison explicite

Nous disons que nous utilisons un liaison explicite Lorsque nous déclarons explicitement ce ce devrait faire référence. Il peut être accompli en utilisant le appel, appliquer ou lier Méthodes d'une fonction (qui en JavaScript est elle-même un objet de première classe. N'oubliez pas le premier cas que nous avons mentionné ci-dessus, lorsque la liaison par défaut s'applique:

var i = 20; fonction foo () console.journal (ceci.je);  const objet = i: 100 foo () // Ceci sortira 20 ou générera une éERROR TYPE en mode strict. // Si nous définissons explicitement cela pour être une référence à l'objet, les choses changent. // Appelez et appliquez exécuter la fonction immédiatement avec le nouveau contexte: FOO.Appelez (objet) // la sortie est 100 foo.appliquer (objet) // la sortie est 100 // lier à la place, renvoie une nouvelle fonction avec le contexte spécifié. Laissez BoundFoo = Foo.lier (objet) boundfoo () // la sortie est 100
Copie

Sont quelques différences entre appel, appliquer et lier: le pertinent est que ce dernier renvoie un nouvelle fonction lié au contexte spécifié, tandis qu'avec les deux autres, la fonction, liée au contexte spécifié, est exécutée immédiatement. Il y a d'autres différences, mais nous ne les verrons pas ici. L'important est de comprendre comment fonctionne explicitement la liaison.

Comment les fonctions Arrow sont différentes dans ce égard?

Dans tous les cas et exemples ci-dessus, nous avons vu comment, lors de l'utilisation de fonctions standard, la valeur de ce dépend de la façon dont la fonction est appelée. Les fonctions de flèche, utilisent plutôt le lexical ceci: Ils n'ont pas le leur ce, mais utilisez toujours le ce de leur portée entourée. Un exemple typique où cela pourrait produire des effets inattendus sur les auditeurs d'événements. Supposons que nous ayons un bouton avec ID «Button1», et que nous voulons modifier son texte lorsqu'il est cliqué:

Cliquez sur moi! // L'auditeur d'événements avec une fonction standard comme document de rappel.getElementByid ('Button1').addEventListener ('click', function () this.innerText = "cliquez sur!";)
Copie

Le code fonctionne parfaitement, et une fois le bouton cliqué, son texte change comme prévu. Et si nous utilisons une fonction flèche dans ce cas? Supposons que nous l'écrivons comme ceci:

document.getElementByid ('Button1').addEventListener ('click', () =>.innerText = "cliquez sur!";)
Copie

Le code ci-dessus ne fonctionne pas, pourquoi? Facile: parce que, comme nous l'avons dit auparavant, alors que dans le premier exemple, ce À l'intérieur de la fonction de rappel standard fait référence à l'objet sur lequel l'événement se produit (le bouton), lorsque nous utilisons la fonction flèche ce est hérité de la portée des parents, qui dans ce cas est le fenêtre objet. Par souci d'exhaustivité, nous devons dire que l'exemple ci-dessus pourrait être facilement corrigé pour fonctionner avec une fonction fléchée:

document.getElementByid ('Button1').addEventListener ('click', événement => événement.cible.innerText = "cliquez sur!";)
Copie

Cette fois, le code fonctionne parce que nous n'avons pas utilisé ce Pour référencer le bouton, mais nous avons laissé notre fonction accepter un argument, qui est événement. Dans le corps de fonction que nous avons utilisé événement.cible Pour référencer l'objet qui a envoyé l'événement.

Pour la même raison que nous avons mentionnée ci-dessus, les fonctions de flèche ne peuvent pas être utilisées comme méthodes d'objet ou méthodes de prototype:

// Les fonctions de flèche ne fonctionnent pas comme méthodes d'objet… const objet1 = i: 1000, foo: () => console.log ('la valeur de i est $ ce.i ') objet1.foo () La valeur de i n'est pas définie //… et ils ne fonctionnent pas comme méthodes prototypes. const Person = fonction (nom, âge) ceci.name = name; ce.âge = âge;  Personne.prototype.introduire = () => console.log ('mon nom est $ ceci.nom et je suis $ ceci.Âge ans »); const Jack = new Person ('Jack', 100); jack.Nom 'Jack' Jack.100 ans Jack.introdu () mon nom n'est pas défini et je n'ai pas défini des années
Copie

Conclusions

La syntaxe de la fonction Arrow est une très belle fonctionnalité introducteur avec ecmascript6. Avec cette nouvelle façon de définir les fonctions, nous pouvons écrire du code plus court et plus propre. Nous avons vu comment définir une fonction flèche et comment fonctionne la nouvelle syntaxe.

Nous avons également vu pourquoi les fonctions Arrow ne peuvent pas remplacer les fonctions standard en toutes circonstances, car elles n'ont pas leur propre ce, et utilise celui de leur portée entourée: cela, comme nous l'avons vu dans ce tutoriel, les rend non utilisables comme méthodes ou constructeurs. Si vous êtes intéressé par d'autres tutoriels JavaScript, restez à l'écoute: dans le prochain tutoriel, nous parlerons du aller chercher, fonction. En attendant, vous pouvez consulter notre article sur les promesses.

Tutoriels Linux connexes:

  • Advanced Bash Regex avec des exemples
  • Introduction aux boucles JavaScript
  • Une introduction à l'automatisation Linux, des outils et des techniques
  • Masterring Bash Script Loops
  • Choses à installer sur Ubuntu 20.04
  • Boucles imbriquées dans les scripts bash
  • Bash regexps pour les débutants avec des exemples
  • Mint 20: Mieux que Ubuntu et Microsoft Windows?
  • Tutoriel de débogage GDB pour les débutants
  • Créer des règles de redirection et de réécriture en .htaccess sur Apache…