Les fonctions flèches JavaScript sont assez populaires. Et ils le méritent, différant par la syntaxe laconique, la liaison lexicale thiset le fait qu'ils sont très pratiques à utiliser comme rappels. Le matériel, dont nous publions la traduction aujourd'hui, comprend 5 recommandations sur l'utilisation des fonctions fléchées. Celui qui tire parti de ces recommandations a une chance de révéler plus pleinement le potentiel de ces fonctions.
1. Utilisez l'affichage des noms des fonctions fléchées
Les fonctions flèches JavaScript sont anonymes: leur propriété namecontient une chaîne vide - ''.( number => number + 1 ).name;
Les fonctions anonymes sont marquées comme anonymouslors du débogage ou lors de l'analyse de la pile d'appels. Malheureusement, le mot anonymousne contient aucune indication sur le code spécifique auquel il se rapporte.Voici l'un des points du code de débogage où des fonctions anonymes sont appelées.Code de débogage contenant des fonctions anonymesLa pile d'appels sur le côté droit de la figure contient des références à 2 fonctions marquées commeanonymous. De telles informations contenues dans la pile d'appels, on ne peut rien apprendre d'utile sur le code.Heureusement, JavaScript dispose d'un mécanisme pour dériver les noms de fonction (fonctionnalité ES2015), qui est capable, dans certaines conditions, de détecter un nom de fonction. L'idée de la sortie du nom est que JavaScript peut comprendre le nom de la fonction flèche à partir de sa position syntaxique, c'est-à-dire en fonction du nom de la variable qui stocke le lien vers l'objet fonction.Examinons le mécanisme de dérivation des noms de fonction en action:const increaseNumber = number => number + 1;
increaseNumber.name;
Étant donné que la référence à la fonction flèche est stockée dans une variable increaseNumber, JavaScript décide que le nom 'increaseNumber'convient bien à la fonction. Par conséquent, la fonction flèche obtient également un tel nom.Il est recommandé d'utiliser le mécanisme de dérivation de nom de fonction pour nommer les fonctions fléchées.Examinons maintenant le processus de débogage, au cours duquel le mécanisme de dérivation des noms de fonction est utilisé.Débogage de code contenant des fonctions fléchées qui reçoivent des nomsPuisque les fonctions fléchées ont maintenant des noms, la pile d'appels fournit des informations plus utiles sur le code en cours d'exécution:- Le nom de la fonction
handleButtonClickindique un appel au gestionnaire d'événements click. - Le nom
increaseCounterindique un appel à la fonction qui incrémente le compteur.
2. Dans la mesure du possible, efforcez-vous d'écrire des fonctions en ligne
Une fonction «en ligne» est une fonction constituée d'une seule expression. Dans les fonctions fléchées, j'aime le fait qu'elles sont très pratiques à utiliser pour créer de courtes fonctions en ligne.Par exemple, voici la forme «complète» d'une fonction flèche:const array = [1, 2, 3];
array.map((number) => {
return number * 2;
});
Cette fonction peut facilement être rendue plus compacte. À savoir, puisque la fonction ne contient qu'une seule expression, vous pouvez supprimer les accolades et return:const array = [1, 2, 3];
array.map(number => number * 2);
Il est recommandé que si une fonction contient une seule expression, la rendre en ligne.3. Utilisez soigneusement les fonctions fléchées et les opérateurs de comparaison.
Opérateurs de comparaison >, <, <=et >=sont très semblables à la flèche =>qui déclare flèche fonctions (telles flèches est aussi appelé « une flèche en gras »).Lorsque des opérateurs de comparaison sont utilisés dans une fonction en ligne, le code résultant peut ne pas être très clair.Déclarez une fonction de flèche qui utilise l'opérateur <=:const negativeToZero = number => number <= 0 ? 0 : number;
La présence dans une ligne de caractères =>et <=désoriente le lecteur de code.Afin de distinguer clairement les flèches des opérateurs de comparaison, plusieurs approches peuvent être utilisées.Tout d'abord, vous pouvez mettre l'expression entre parenthèses:const negativeToZero = number => (number <= 0 ? 0 : number);
Deuxièmement, vous pouvez déclarer intentionnellement une fonction flèche en utilisant une construction plus longue:const negativeToZero = number => {
return number <= 0 ? 0 : number;
};
Ces transformations suppriment l'incertitude causée par l'utilisation à la fois du symbole de la flèche et des opérateurs de comparaison sur une seule ligne.Il est recommandé que si la fonction d' une ligne Une flèche contient des déclarations >, <, <=et >=, de conclure l'expression correspondante entre parenthèses ou utiliser une forme d' annonces multiples fonctions flèche.4. Utilisez des parenthèses ou des structures multilignes lors de la création d'objets simples dans les fonctions fléchées
L'utilisation d'un littéral d'objet à l'intérieur d'une fonction de flèche intégrée entraînera une erreur de syntaxe:const array = [1, 2, 3];
array.map(number => { 'number': number });
JavaScript considère les accolades comme un bloc de code et non comme un littéral d'objet.Si vous placez l'objet littéral entre parenthèses, ce problème sera résolu:const array = [1, 2, 3];
array.map(number => ({ 'number': number }));
Si un littéral d'objet possède de nombreuses propriétés, vous pouvez même utiliser ici des sauts de ligne. La fonction flèche reste toujours intégrée:const array = [1, 2, 3];
array.map(number => ({
'number': number
'propA': 'value A',
'propB': 'value B'
}));
Les littéraux d'objets, lorsqu'ils sont utilisés dans des fonctions en ligne, sont recommandés pour être placés entre parenthèses.5. Veillez à nicher trop profondément.
Les fonctions fléchées diffèrent dans la syntaxe laconique. C'est bon. Mais à cause de cela, de nombreuses fonctions fléchées imbriquées les unes dans les autres peuvent former des structures difficiles à lire.Considérez le scénario suivant. Quand ils cliquent sur le bouton, une requête au serveur est exécutée. Lorsqu'une réponse du serveur contenant un ensemble de certains éléments est reçue, les noms de ces éléments sont affichés dans la console:myButton.addEventListener('click', () => {
fetch('/items.json')
.then(response => response.json())
.then(json => {
json.forEach(item => {
console.log(item.name);
});
});
});
Ici, nous voyons trois niveaux de fonctions de flèche d'imbrication. Afin de vous plonger dans ce qui se passe dans ce code, vous devez passer un peu de temps.Plusieurs approches peuvent être utilisées pour améliorer la lisibilité des fonctions imbriquées.La première approche consiste à écrire des références de fonction aux variables. Les noms de variable doivent décrire brièvement l'essence de la fonction (jetez un œil à la recommandation n ° 1 sur la dérivation des noms de fonction).const readItemsJson = json => {
json.forEach(item => console.log(item.name));
};
const handleButtonClick = () => {
fetch('/items.json')
.then(response => response.json());
.then(readItemsJson);
};
myButton.addEventListener('click', handleButtonClick);
Pendant le refactoring, nous avons extrait les fonctions fléchées imbriquées et les avons écrites dans les variables readItemsJsonet handleButtonClick. Le niveau d'imbrication du code est passé de 3 à 2. Maintenant, le code est devenu plus compréhensible.Une autre option pour refactoriser ce code est de traduire la fonction entière dans un format async/await. C'est un excellent moyen de résoudre le problème des fonctions imbriquées:const handleButtonClick = async () => {
const response = await fetch('/items.json');
const json = await response.json();
json.forEach(item => console.log(item.name));
};
myButton.addEventListener('click', handleButtonClick);
Il est recommandé d'éviter les niveaux d'imbrication trop profonds des fonctions fléchées, de les extraire en variables en tant que fonctions distinctes ou, si possible, d'utiliser la syntaxe async/await.Sommaire
Les fonctions flèches JavaScript sont anonymes. Afin de rendre le débogage de code plus productif, il est recommandé d'utiliser des variables qui stockent les références de fonction. Cela permet à JavaScript d'afficher les noms des fonctions.Les fonctions de flèche intégrées sont utiles lorsque le corps de la fonction ne contient qu'une seule expression. Lesopérateurs >, <, <=et >=comme une flèche =>qui est utilisé lors de la déclaration des interrupteurs de fonction. Lorsque ces opérateurs sont utilisés dans le corps d'une fonction de flèche intégrable, vous devez envisager la conversion de code.La syntaxe des littéraux d'objets, comme { prop: 'value' }, est comme un bloc de code {}. Par conséquent, lorsqu'un littéral d'objet est placé à l'intérieur d'une fonction de flèche incorporée, il doit être placé entre parenthèses:() => ({ prop: 'value' }).Des niveaux trop élevés d'imbrication de fonctions confondent celui qui lit le code. Il est recommandé de réduire le niveau d'imbrication des fonctions en les extrayant et en les écrivant dans des variables. Une autre approche pour réduire le niveau d'imbrication de code consiste à utiliser une construction async/await.Chers lecteurs! Connaissez-vous des astuces intéressantes pour utiliser les fonctions fléchées?