Introduction aux fonctions d'ordre supérieur en javascript

Par définition, une fonction d'ordre supérieur est une fonction qui, au moins, reçoit une ou plusieurs autres fonctions comme arguments ou renvoie une autre fonction comme résultat. Dans ce tutoriel, nous nous concentrerons sur les fonctions de bibliothèque standard comme filtre, cartographie et réduirons: nous verrons quand ils pourront être utiles et comment les utiliser.

Dans ce tutoriel, vous apprendrez:

• Qu'est-ce qu'une fonction d'ordre supérieur.
• Pourquoi nous pouvons utiliser des fonctions d'ordre supérieur en javascript.
• Comment et quand utiliser le filtre, la carte et la réduction des fonctions.

Qu'est-ce qu'une fonction d'ordre supérieur ?

En javascript les fonctions sont Objets de première classe: ils peuvent être affectés à des variables, transmis en arguments à d'autres fonctions, ou être renvoyés par d'autres fonctions. L'utilisation de fonctions d'ordre supérieur est basée sur ces particularités. Nous définissons une fonction d'ordre supérieur comme une fonction qui accepte au moins d'autres fonctions comme ses arguments, ou renvoie une autre fonction comme le résultat. Dans ce tutoriel, nous nous concentrerons sur les fonctions de bibliothèque standard comme filtre, carte et réduire.

Dans ce tutoriel, nous ferons un usage de fonctions flèches: Si vous voulez en savoir plus sur cette nouvelle syntaxe de fonction, vous pouvez vérifier ce tutoriel que nous avons publié sur le sujet.

Filtre ou déployer.prototype.filtre

La première fonction dont nous parlerons est filtre, ou, pour utiliser son nom complet, déployer.prototype.filtre. Cette fonction est en fait une méthode du déployer objet, et ce qu'il fait, c'est très simple: il renvoie un nouveau tableau composé par les éléments du tableau d'origine qui passent le test implémenté dans son corps.

Pour être clair, voyons un exemple. Supposons que nous ayons un éventail de mots et que nous voulons «filtrer» des mots composés par exactement trois lettres. Nous pourrions obtenir ce que nous voulons en utilisant un pour boucle, écriture:

const Mords = ["House", "Pen", "Book", "Computer", "Car"]; const shortwords = []; // Nous pourrions utiliser un style C standard pour Loop… pour (que i = 0; i < words.length; i++)  if (words[i].length == 3)  shortWords.push(words[i])   //… or a for… of loop for (let word of words)  if (word.length == 3)  shortWords.push(word);   

Les deux exemples ci-dessus fonctionnent, et avec les deux nous obtenons le même résultat. Une fois le code exécuté, le tableau des «mots courts» aura deux membres: «stylo» et «voiture». Vous pouvez remarquer, cependant, que surtout le premier exemple est assez verbeux. Voyons comment nous pouvons accomplir le même résultat avec moins de code, en utilisant filtre:

const shortwords = mots.filtre ((élément) => élément.longueur == 3);

Nous avons obtenu exactement le même résultat. Il y a cependant une différence: cette fois, en utilisant également un flèche fonction, nous avons écrit tout dans une seule ligne de code!. Voici comment filtre Fonctionne: il n'accepte qu'un seul argument «obligatoire» qui est une autre fonction, un rappel.

Ce rappel accepte, à son tour, un argument qui est l'élément du tableau d'origine actuellement traité. Si l'élément passe le test (dans ce cas, si la longueur de la chaîne est égale à 3), l'élément est inséré dans le nouveau tableau.

Carte ou déployer.prototype.carte

Le carte (déployer.prototype.carte) Méthode, fait quelque chose de différent. Il accepte également une fonction de rappel comme son seul argument obligatoire, mais renvoie un nouveau tableau composé par les éléments résultant de l'application dudit rappel à tous les éléments du tableau d'origine.

Un exemple clarifiera tout. Cette fois, supposons que nous voulons obtenir un tableau qui devrait contenir toutes les cordes à l'intérieur du tableau «mots», mais sous forme de cas supérieure. En une seule ligne, nous pourrions écrire:

Const upperationdords = mots.map ((élément) => élément.touppercase ());

Après avoir exécuté le code ci-dessus, le tableau «Upperledordwords» sera:

[«House», «stylo», «livre», «ordinateur», «voiture»]

Le rappel accepté comme argument par carte, n'a qu'un seul argument obligatoire, qui est l'élément du tableau d'origine qui est traité. La valeur résultant de l'application du rappel à chaque élément du tableau d'origine est renvoyée (n'oubliez pas: les fonctions de flèche sans accolades bouclées utilisent un retour implicite) et ainsi ajouté au nouveau tableau. Le résultat, dans ce cas, est un nouveau tableau composé par la version supérieure de tous les éléments de l'original.

Réduire ou déployer.prototype.réduire

Le réduire, ou déployer.prototype.réduire La méthode fonctionne d'une manière différente: il accepte un rappel qui prend deux arguments obligatoires. Le premier est le soi-disant accumulateur, Et le second est le valeur actuelle. Au lieu de produire un nouveau tableau, cette fonction d'ordre supérieur utilise le rappel fourni, également appelé réducteur, pour réduire le tableau à une seule valeur, qui est renvoyé. C'est en fait plus simple qu'il n'y paraît, voyons un exemple de base.

Supposons que nous ayons un tableau contenant des chiffres:

const nombres = [15, 0.50, 200];

Maintenant, imaginez que nous voulons obtenir la somme de tous les chiffres contenus dans le tableau. Encore une fois, nous pourrions utiliser une boucle, ou, comme nous voulons démontrer, réduire, de la manière suivante:

Laissez TotalPrice = nombres.Réduisez ((accumulateur, currentValue) => Accumulateur + CurrentValue);

Le réduire La méthode, comme dit ci-dessus, accepte une fonction de rappel qui prend deux arguments obligatoires. Le premier est le accumulateur: Cet argument accumulera les résultats produits à chaque fois que la fonction de rappel est appelée. Le second est valeur actuelle, qui représente l'élément actuel du tableau d'origine qui est traité.

Une chose importante à remarquer est que, si aucune indication contraire (nous verrons dans un instant comment nous pouvons le faire), la première fois que la fonction de rappel est appelée, la valeur de l'accumulateur sera le premier élément du tableau. Nous pouvons réaliser qu'en enregistrant simplement la valeur du accumulateur et du valeur actuelle, Chaque fois que le rappel est exécuté:

Laissez TotalPrice = nombres.réduire ((accumulateur, currentValue) => console.log (accumulateur, currentValue); Accumulateur de retour + CurrentValue; ); 

La sortie du code ci-dessus sera:

15 0.5 15.5 200 

Comme vous pouvez le remarquer, si une valeur initiale pour le accumulateur n'est pas explicitement fourni, le premier élément du tableau est utilisé (15) et, très important, le indice du premier élément traité par le tableau, est1, Donc, dans ce cas, le premier élément à traiter est 0.5 (le deuxième).

Si vous y réfléchissez, cela a du sens: sinon le premier élément du tableau serait compté deux fois! (Il peut être utile de remarquer que nous aurions pu spécifier manuellement l'indice du premier élément du tableau à traiter, en utilisant le CurrentIndex argument facultatif du rappel, le fournissant après valeur actuelle). Comme prévu, la valeur finale de prix total sera 215.5:

Total Price 215.5 

Dans l'exemple ci-dessus, les éléments du tableau d'origine, les «nombres», étaient des nombres simples, donc Types primaires en javascript. Et s'il s'agissait d'objets? Supposons que nous ayons un éventail d'objets, chacun ayant trois propriétés: un nom, un prix et une monnaie de prix:

const items = [name: 'book', prix: 15, devise: 'eur', name: 'car', prix: 15000, devise: 'eur', name: 'ordinateur portable', prix: 1200 , devise: 'eur']; 

Ce que nous voulons obtenir ici, c'est la somme de tous les prix des articles. Un problème se pose immédiatement: nous ne voulons pas résumer directement chaque élément du tableau, car dans ce cas, nous travaillons avec des objets, mais le prix propriété de chacun. Nous devons donc utiliser un paramètre facultatif accepté par réduire, lequel est valeur initiale:

Laissez finalPrice = articles.Réduire ((Accumulateur, CurrentValue) => Accumulateur + CurrentValue.prix, 0)

Le prix final Nous obtenons, comme prévu, 16215. Si nous n'avions pas précisé le valeur initiale, Le fournissant après la fonction de rappel (0), le premier élément du tableau «éléments» aurait été utilisé comme valeur de départ pour le accumulateur. Puisqu'il s'agit d'un objet, le résultat n'aurait pas été comme prévu!

Conclusions

Dans ce tutoriel, nous avons appris à savoir ce qui définit une fonction d'ordre supérieur, et pourquoi est-il possible de les utiliser en javascript. Nous avons également appris à connaître et à utiliser trois fonctions d'ordre supérieur contenues dans la bibliothèque JavaScript standard, comme filtre, carte et réduire. Si vous êtes intéressé par d'autres sujets JavaScript, vous pouvez consulter nos tutoriels sur les promesses ou les fonctions Arrow.

Tutoriels Linux connexes:

• Une introduction à l'automatisation Linux, des outils et des techniques
• Masterring Bash Script Loops
• Choses à installer sur Ubuntu 20.04
• Mint 20: Mieux que Ubuntu et Microsoft Windows?
• Choses à faire après l'installation d'Ubuntu 20.04 Focal Fossa Linux
• Boucles imbriquées dans les scripts bash
• À quelle fréquence devez-vous redémarrer votre serveur Linux?
• Tutoriel de débogage GDB pour les débutants
• Gestion de la saisie des utilisateurs dans les scripts bash
• Comment doubler Kali Linux et Windows 10