Maison > Article > interface Web > Fonctions d'ordre supérieur et curry en JavaScript

Fonctions d'ordre supérieur et curry en JavaScript

WBOYavant: 2023-09-04 17:57:07762parcourir

JavaScript 中的高阶函数和柯里化

Les fonctions sont des fonctionnalités très utiles dans n'importe quel langage de programmation. Les développeurs pourront peut-être trouver n'importe quel langage de programmation qui ne contient pas cette fonction. De plus, lorsque nous commençons à apprendre un langage de programmation, nous apprenons certainement les fonctions, c'est-à-dire les blocs de code qui permettent la réutilisation du code.

Dans ce didacticiel, nous découvrirons les fonctions d'ordre supérieur et le curry.

Fonctions d'ordre supérieur

Avant de commencer le curry en JavaScript, comprenons d'abord les fonctions d'ordre supérieur.

La définition simple d'une fonction d'ordre supérieur est : une fonction qui prend une autre fonction comme paramètre ou renvoie une fonction. Avez-vous déjà utilisé la méthode sort() en JavaScript ou dans tout autre langage de programmation comme C++ ou Python ? Si tel est le cas, vous avez peut-être passé une fonction de rappel comme argument à la méthode sort() pour trier le tableau en fonction d'un contexte spécifique.

Par conséquent, nous pouvons dire que la méthode sort() est une fonction d'ordre supérieur.

Grammaire

Les utilisateurs peuvent utiliser des fonctions d'ordre supérieur selon la syntaxe suivante.

function sortArray(ele1, ele2) {
   
   // function body
}
array.sort(sortArray);

Dans la syntaxe ci-dessus, sort() est une fonction d'ordre supérieur car nous avons passé la fonction sortArray() comme paramètre.

Exemple

Dans l'exemple ci-dessous, nous avons créé un tableau de nombres contenant différentes valeurs numériques. Après cela, nous utilisons la méthode filter() pour filtrer tous les éléments du tableau qui sont divisibles par 2.

Les utilisateurs peuvent constater que nous avons passé la fonction filter_func() comme paramètre de la méthode filter(). Par conséquent, nous pouvons dire que la méthode filter() est une fonction d’ordre supérieur.

<html>
<body>
   <h2>Higher-order functions using the filter() method.</h2> 
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let array = [10, 30, 23, 32, 32, 32, 32, 45, 5, 6, 878989, 34, 23];
      
      // creating the function to filter values
      function filter_func(element) {
         return element % 2 == 0;
      }
      
      // higher-order function
      let divisibleBy2 = array.filter(filter_func);
      output.innerHTML += "The filtered values are " + divisibleBy2;
   </script>
</body>
</html>

Exemple

Dans cet exemple, nous avons créé un tableau de chaînes. Après cela, nous mettons en majuscule la première lettre de toutes les valeurs du tableau en utilisant la méthode map(). Nous passons la fonction de flèche de rappel comme argument à la méthode map, qui renvoie une chaîne après la mise en majuscule du premier caractère.

Nous mettons en majuscule le premier caractère de chaque chaîne de tableau en utilisant les méthodes substr() et toUpperCase().

<html>
<body>
   <h2>Higher-order functions using the map() method</h2>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let array = ["hi", "users", "welcome", "on", "tutorialspoint!"];
      output.innerHTML += "Original Array: <br>" + array + "<br>";
      
      // higher-order function
      let results = array.map((string) => {
         
         // creating the first character capitalize
         return string.substr(0, 1).toUpperCase() + string.substr(1);
      });
      output.innerHTML += "<br>The array after capitalizing the first character: <br>" + results;
   </script>
</body>
</html>

Désormais, les utilisateurs peuvent connaître les avantages de l'utilisation de fonctions d'ordre supérieur. Par exemple, la méthode filter() a été implémentée dans la bibliothèque Array de JavaScript, permettant aux utilisateurs de remplacer la logique de filtre en passant une fonction de rappel personnalisée en tant que paramètre.

Currying en JavaScript

Currying est similaire aux fonctions d'ordre supérieur, il renvoie des fonctions. Les fonctions curry acceptent plusieurs paramètres et les utilisateurs peuvent transmettre les valeurs des paramètres aux fonctions imbriquées.

La dernière fonction imbriquée de la fonction curry renvoie le résultat final.

Grammaire

Les utilisateurs peuvent écrire des fonctions au curry selon la syntaxe suivante.

function addition(num1) {
   return function (num2) {
      return num1 + num2;
   };
}
addition(10)(20);

Nous renvoyons cette fonction à partir de la fonction addition() dans la syntaxe ci-dessus. De plus, les utilisateurs peuvent également observer comment nous appelons la fonction addition() en passant plusieurs paramètres.

Exemple

Dans l'exemple ci-dessous, nous créons une fonction curry appelée addition(). La fonction d'addition n'a qu'un seul paramètre. Il renvoie également une fonction imbriquée qui prend également un seul argument. La fonction imbriquée renvoie la somme des arguments num1 et num2 .

<html>
<body>
   <h2>Curried functions</h2>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      
      // curried function, which returns the function
      function addition(num1) {
         return function (num2) {
            return num1 + num2;
         };
      }
      output.innerHTML += "After calling the curried function, the result is " + addition(10)(20);
   </script>
</body>
</html>

Les utilisateurs ont découvert les fonctions d'ordre supérieur et les fonctions au curry dans ce didacticiel. Les fonctions d'ordre supérieur et curried ont de nombreuses utilisations, dont certaines que nous avons vues avec trois exemples.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：5 fonctionnalités AngularJS incroyablesArticle suivant：5 fonctionnalités AngularJS incroyables

Articles Liés

Voir plus