Maison > interface Web > js tutoriel > Maîtriser les fonctions d'ordre supérieur en JavaScript : débloquer la programmation fonctionnelle

Maîtriser les fonctions d'ordre supérieur en JavaScript : débloquer la programmation fonctionnelle

Linda Hamilton
Libérer: 2024-12-18 03:01:12
original
366 Les gens l'ont consulté

Mastering Higher-Order Functions in JavaScript: Unlock Functional Programming

Fonctions d'ordre supérieur en JavaScript

En JavaScript, une fonction d'ordre supérieur est une fonction qui prend une autre fonction comme argument ou renvoie une fonction en tant que résultat. Ces fonctions sont fondamentales pour la programmation fonctionnelle et permettent un code propre, modulaire et réutilisable.


1. Que sont les fonctions d'ordre supérieur ?

Une fonction d'ordre supérieur est :

  • Une fonction qui accepte d'autres fonctions comme paramètres.
  • Une fonction qui renvoie une autre fonction.

Cela fait de JavaScript un langage puissant pour la programmation fonctionnelle.


2. Exemples de fonctions d'ordre supérieur

A. Fonctionne comme arguments

Passer une fonction en argument permet de personnaliser les comportements.

Exemple : Itération de tableau avec forEach

const numbers = [1, 2, 3];

numbers.forEach(function(number) {
  console.log(number * 2);
});
// Output:
// 2
// 4
// 6
Copier après la connexion
Copier après la connexion

B. Fonctions renvoyant d'autres fonctions

Les fonctions de retour permettent de créer des composants flexibles et réutilisables.

Exemple : Usine de fonctions

function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

const triple = createMultiplier(3);
console.log(triple(5)); // Output: 15
Copier après la connexion
Copier après la connexion

3. Fonctions d'ordre supérieur intégrées en JavaScript

JavaScript fournit de nombreuses fonctions d'ordre supérieur dans sa bibliothèque standard :

A. carte

Transforme chaque élément d'un tableau.

const numbers = [1, 2, 3];
const squared = numbers.map(function(number) {
  return number * number;
});
console.log(squared); // Output: [1, 4, 9]
Copier après la connexion
Copier après la connexion

B. filtrer

Filtre les éléments en fonction d'une condition.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]
Copier après la connexion
Copier après la connexion

C. réduire

Réduit un tableau à une seule valeur en appliquant une fonction.

const numbers = [1, 2, 3];

numbers.forEach(function(number) {
  console.log(number * 2);
});
// Output:
// 2
// 4
// 6
Copier après la connexion
Copier après la connexion

4. Avantages des fonctions d'ordre supérieur

  1. Réutilisabilité : Les modèles courants peuvent être encapsulés.
  2. Modularité : Sépare le comportement de la logique.
  3. Lisibilité : Réduit le code répétitif.
  4. Abstractions puissantes : simplifie les opérations complexes.

5. Fonctions personnalisées d'ordre supérieur

Exemple : Fonction de répétition personnalisée

function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

const triple = createMultiplier(3);
console.log(triple(5)); // Output: 15
Copier après la connexion
Copier après la connexion

6. Applications pratiques

  1. Gestionnaires d'événements
const numbers = [1, 2, 3];
const squared = numbers.map(function(number) {
  return number * number;
});
console.log(squared); // Output: [1, 4, 9]
Copier après la connexion
Copier après la connexion
  1. API
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]
Copier après la connexion
Copier après la connexion
  1. Composition Fonctionnelle Combiner de petites fonctions pour créer des comportements complexes.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 10
Copier après la connexion

7. Défis liés aux fonctions d'ordre supérieur

  • Débogage : les fonctions anonymes rendent les traces de pile plus difficiles à lire.
  • Performances : une utilisation excessive peut entraîner des goulots d'étranglement en matière de performances.
  • Lisibilité : Les compositions complexes peuvent être difficiles à comprendre.

8. Résumé

  • Les fonctions d'ordre supérieur prennent des fonctions comme arguments ou renvoient des fonctions.
  • Ils sont au cœur de la programmation fonctionnelle et proposent des solutions modulaires et réutilisables.
  • Les fonctions d'ordre supérieur intégrées à JavaScript telles que mapper, filtrer et réduire simplifient les tâches courantes.

La maîtrise des fonctions d'ordre supérieur est essentielle pour écrire du code JavaScript efficace et expressif.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal