Compréhension approfondie des fonctions fléchées dans JavaScript_Basic knowledge

Les flèches font partie de JavaScript depuis le début. Dans le premier JavaScript, il était recommandé d'envelopper le code du script en ligne dans des commentaires HTML. Cela peut empêcher les navigateurs qui ne prennent pas en charge JavaScript d'afficher votre code par erreur. Vous avez peut-être écrit du code comme celui-ci :

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

Les anciens navigateurs verront deux balises non prises en charge et un commentaire, que seuls les navigateurs plus récents prenant en charge JavaScript analyseront en tant que code JavaScript.

Pour prendre en charge cette fonctionnalité étrange, le moteur JavaScript du navigateur traite représente également un commentaire sur une seule ligne. La différence avec HTML est qu'en HTML, la partie avant --> est le contenu du commentaire, tandis qu'en JavaScript, la ligne après --> .

Seulement lorsque --> apparaît au début d'une ligne, cela indique que la flèche est un commentaire, car dans d'autres cas, --> est un opérateur (va vers).

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();
}

Le code ci-dessus peut réellement s'exécuter. Faire une boucle jusqu'à ce que n soit égal à 0 n'est pas une nouvelle fonctionnalité d'ES6, mais combinée à des fonctionnalités familières, elle est très trompeuse. Pouvez-vous comprendre comment fonctionne le code ci-dessus ? Vous pouvez trouver la réponse sur Stack Overflow.

Bien sûr, il y a une flèche, c'est-à-dire l'opérateur inférieur ou égal <=, peut-être pouvez-vous trouver un endroit pour utiliser les flèches, mais arrêtons-nous et regardons une flèche que nous n'avons jamais vue auparavant :

• va à l'opérateur
• <= inférieur ou égal à l'opérateur
• => ???

Alors, que signifie => C’est ce dont discutera cet article.

Parlons d’abord des fonctions.
Expressions de fonctions omniprésentes

Une fonctionnalité intéressante de JavaScript est que chaque fois que vous avez besoin d'une fonction, vous pouvez facilement la créer.

Par exemple, pour lier un événement de clic à un bouton :

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

La méthode .click() de jQuery nécessite une fonction comme paramètre. Nous pouvons facilement créer une fonction en place :

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

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

Écrire du code comme celui-ci est la chose la plus naturelle pour nous maintenant. Mais avant que JavaScript ne devienne populaire, ce style de code semblait encore un peu étrange car de telles fonctionnalités n'existaient pas dans d'autres langages. En 1958, Lisp avait des expressions de fonction, également appelées fonctions lambda, une fonctionnalité qui n'existait pas en C, Python, C# et Java depuis de nombreuses années.

Maintenant, ces quatre langages ont tous des expressions lambda, et les langages plus récents ont généralement des expressions lambda intégrées. JavaScript prend désormais en charge cette fonctionnalité, grâce aux développeurs de bibliothèques qui s'appuient fortement sur les expressions lambda, ce qui a conduit à une adoption généralisée.

JavaScript a une syntaxe légèrement verbeuse par rapport à plusieurs autres langages :

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

Fonction flèche

ES6 introduit une nouvelle syntaxe pour l'écriture des fonctions :

// 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());

Lorsque vous avez besoin d'une fonction avec un seul paramètre, la syntaxe de la fonction flèche peut être simplifiée en Identifiant => Expression, en omettant directement les mots-clés fonction et retour, ainsi que les parenthèses et le point-virgule final.

Pour écrire une fonction avec plusieurs paramètres (ou aucun paramètre, ou paramètres Rest et valeurs par défaut des paramètres, ou paramètres déstructurés), vous devez entourer les paramètres de parenthèses :

// 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);

Les fonctions fléchées peuvent également fonctionner parfaitement avec certaines bibliothèques de fonctions d'outils, telles que Underscore.js et Immutable. En fait, tous les exemples de la documentation Immutable sont écrits en ES6, et beaucoup d'entre eux utilisent déjà des fonctions fléchées.

En plus d'utiliser une expression dans le corps de la fonction, les fonctions fléchées peuvent également contenir un bloc d'instructions. Rappelez-vous l'exemple que nous avons mentionné précédemment :

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

Voici comment écrire la fonction flèche :

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

Il convient de noter que les fonctions fléchées utilisant des blocs d'instructions ne renverront pas automatiquement une valeur et que return doit être utilisé explicitement pour renvoyer une valeur.

Encore un conseil, lorsque vous utilisez une fonction flèche pour renvoyer un objet, utilisez toujours des parenthèses pour entourer l'objet renvoyé :

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

Étant donné que l'objet vide {} et le bloc d'instructions vide {} se ressemblent exactement, ES6 traitera toujours le { qui suit immédiatement => comme le début d'un bloc d'instructions au lieu du début d'un objet, puis chiot => {} est analysé comme une fonction fléchée sans corps de fonction et la valeur de retour n'est pas définie.