JavaScript ES6 a apporté des changements passionnants au monde du développement Web. De nouveaux ajouts au langage JavaScript ont apporté de nouvelles possibilités.
L'un des changements les plus populaires a été l'ajout de fonctions fléchées dans JavaScript. Les fonctions fléchées sont une nouvelle façon d'écrire des expressions de fonction JavaScript, vous offrant deux façons différentes de créer des fonctions dans votre application.
Les fonctions fléchées nécessitent un peu d'ajustement si vous êtes un expert des fonctions JavaScript traditionnelles. Voyons en quoi ils consistent, comment ils fonctionnent et comment ils vous profitent.
Les fonctions fléchées sont une nouvelle façon d'écrire des expressions de fonction qui ont été incluses dans la version de JavaScript ES6. Elles sont similaires aux expressions de fonction JavaScript que vous utilisiez, avec quelques règles légèrement différentes.
Les fonctions fléchées sont toujours des fonctions anonymes, ont des règles différentes pour
ceci , et ont une syntaxe plus simple que les fonctions traditionnelles.
Ces fonctions utilisent un nouveau jeton fléché :
=> Si vous avez déjà travaillé en Python, ces fonctions sont très similaires aux expressions Python Lambda.
La syntaxe de ces fonctions est un peu plus propre que les fonctions normales. Il y a quelques nouvelles règles à garder à l'esprit :
Il y a beaucoup de petits changements à passer en revue, alors commençons par une comparaison de base des expressions de fonction.
Les fonctions fléchées sont faciles à utiliser. Il est plus facile de comprendre les fonctions fléchées lorsqu'elles sont comparées aux expressions de fonction traditionnelles.
Voici une expression de fonction qui additionne deux nombres ; en utilisant d'abord la méthode de fonction traditionnelle :
let addnum =function(num1,num2){
renvoie num1 + num2 ;
} ;
addnum(1,2);
>>3 C'est une fonction assez simple qui prend deux arguments et renvoie la somme.
Voici l'expression changée en fonction fléchée :
let addnum =(num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3 La syntaxe de la fonction est assez différente en utilisant une fonction fléchée. Le mot-clé de la fonction est supprimé ; le jeton flèche permet à JavaScript de savoir que vous écrivez une fonction.
Les accolades et le mot-clé return sont toujours là. Ceux-ci sont facultatifs avec des fonctions fléchées. Voici un exemple encore plus simple de la même fonction :
let addnum =(num1,num2) => num1 + num2 ; Le mot-clé return et les accolades ont maintenant disparu. Ce qui reste est une fonction d'une ligne très propre qui représente près de la moitié du code de la fonction d'origine. Vous obtenez le même résultat avec beaucoup moins de code écrit.
Il y a plus dans les fonctions fléchées. approfondissons afin que vous ayez une meilleure idée de ce qu'ils peuvent faire.
Les fonctions fléchées ont de nombreuses utilisations et fonctionnalités incluses.
Les fonctions fléchées peuvent utiliser un ou plusieurs arguments. Si vous utilisez deux arguments ou plus, vous devez les mettre entre parenthèses. Si vous n'avez qu'un seul argument, vous n'avez pas besoin d'utiliser de parenthèses.
let square =x => x * x
carré(2);
>>4 Les fonctions fléchées peuvent être utilisées sans arguments. Si vous n'utilisez aucun argument dans votre fonction, vous devez utiliser des parenthèses vides.
let helloFunction =() => Console.log("Bonjour lecteur !");
bonjourFonction();
>>Bonjour lecteur ! Des fonctions simples comme celles-ci utilisent beaucoup moins de code. Imaginez à quel point un projet complexe comme un diaporama JavaScript devient plus facile lorsque vous disposez d'un moyen plus simple d'écrire des fonctions.
Le concept de
ceci tend à être la partie la plus délicate de l'utilisation de JavaScript. Les fonctions fléchées font
ceci plus facile à utiliser.
Lorsque vous utilisez les fonctions fléchées
ceci sera défini par la fonction englobante. Cela peut créer des problèmes qui surviennent lorsque vous créez des fonctions imbriquées et que vous avez besoin
ceci à appliquer à votre fonction principale
Voici un exemple populaire qui montre la solution de contournement que vous devez utiliser avec les fonctions régulières.
fonction Personne() {
var ça =ça; // Vous devez assigner 'this' à une nouvelle variable
cet âge =0 ;
setInterval(fonction grandir() {
cet.âge++ ;
}, 1000);
} Affectation de la valeur de
ceci à une variable la rend lisible lorsque vous appelez une fonction à l'intérieur de votre fonction principale. C'est désordonné, voici une meilleure façon de le faire en utilisant les fonctions fléchées.
fonction Personne(){
this.age =0 ;
setInterval(() => {
this.age++; // Vous pouvez maintenant utiliser 'this' sans déclarer une nouvelle variable
}, 1000);
} Bien qu'ils soient parfaits pour les fonctions, ils ne doivent pas être utilisés pour créer des méthodes à l'intérieur d'un objet. Les fonctions fléchées n'utilisent pas la bonne portée pour
ceci .
Voici un objet simple qui crée une méthode à l'intérieur en utilisant une fonction fléchée. La méthode doit réduire les garnitures variable par un lorsqu'il est appelé. Au lieu de cela, cela ne fonctionne pas du tout.
let pizza ={
garnitures :5,
supprimerToppings :() => {
this.toppings-- ;
}
}
//Un objet pizza avec 5 garnitures
> pizzas
>>{garnitures :5, supprimer les garnitures :f}
pizza.removeToppings(); //La méthode ne fera rien à l'objet
> pizzas
>>{toppings :5, removeToppings :f} //A toujours 5 toppings
En utilisant les fonctions fléchées, vous pouvez simplifier le code utilisé pour travailler avec les méthodes de tableau. Les tableaux et les méthodes de tableau sont des parties très importantes de JavaScript, vous les utiliserez donc beaucoup.
Il existe des méthodes utiles comme la carte méthode qui exécute une fonction sur tous les éléments d'un tableau et renvoie le nouveau tableau.
let myArray =[1,2,3,4] ;
myArray.map(fonction(élément){
élément de retour + 1 ;
});
>> [2,3,4,5] C'est une fonction assez simple qui ajoute un à chaque valeur du tableau. Vous pouvez écrire la même fonction avec moins de code en utilisant une fonction fléchée.
let myArray =[1,2,3,4] ;
monTableau.map(element => {
élément de retour + 1 ;
});
>> [2,3,4,5] C'est beaucoup plus facile à lire maintenant.
Les fonctions fléchées peuvent être utilisées pour créer des littéraux d'objet en JavaScript. Les fonctions régulières peuvent les créer, mais elles sont un peu plus longues.
let createObject =function createName(first,last) {
retourner {
premier:premier,
dernier :dernier
} ;
} ; Vous pouvez créer le même objet avec une fonction fléchée en utilisant moins de code. En utilisant la notation fléchée, vous devrez envelopper le corps de la fonction entre parenthèses. Voici la syntaxe améliorée avec les fonctions fléchées.
let createArrowObject =(first,last) => ({first:first, last:last}); Vous connaissez maintenant différentes façons dont les fonctions de flèche JavaScript vous facilitent la vie en tant que développeur. Ils raccourcissent la syntaxe, vous donnent plus de contrôle en utilisant
ceci , facilitent la création d'objets et vous offrent une nouvelle façon de travailler avec les méthodes de tableau.
L'introduction de fonctions fléchées, ainsi que de nombreuses autres fonctionnalités, dans JavaScript ES6 montre à quel point JavaScript est devenu important dans le développement Web. Vous pouvez faire bien plus encore.
Vous voulez en savoir plus sur JavaScript ? Découvrez ces frameworks JavaScript. De plus, notre aide-mémoire JavaScript fournit des informations précieuses et en savoir plus sur le fonctionnement de JavaScript peut faire de vous un meilleur développeur.