Fonctions d'ordre supérieur en JavaScript: un guide pratique

Explication détaillée des fonctions avancées: programmation fonctionnelle en javascript

Dans JavaScript, une fonction d'ordre supérieur fait référence à une fonction qui peut recevoir d'autres fonctions comme paramètres ou des fonctions d'utilisation comme valeurs de retour. Cette fonctionnalité rend JavaScript très adapté à la programmation fonctionnelle.

Points de base

• JavaScript est capable de gérer les fonctions d'ordre supérieur (récepter les fonctions comme des arguments ou des fonctions de retour), ce qui le rend très adapté à la programmation fonctionnelle. En effet, JavaScript traite les fonctions comme des citoyens de première classe, ce qui signifie qu'ils ont un type Object, peuvent être utilisés comme valeurs pour les variables et peuvent être transmis et renvoyés comme toute autre variable de référence.
• Les fonctions d'ordre supérieur de JavaScript sont souvent utilisées dans le développement Web. Cette capacité à transmettre des fonctions de rappel est essentielle pour permettre un comportement asynchrone lorsqu'il s'agit de ressources qui peuvent renvoyer les résultats après une période incertaine.
• Les fonctions d'ordre avancé prennent en charge la réutilisation du code car elles peuvent remplacer les fonctions en ligne par des fonctions définies et nommées individuellement. Cela offre la possibilité que la programmation fonctionnelle de développer des fonctions pures qui ne modifient pas les données externes et renvoient le même résultat pour la même entrée à chaque fois.
• En plus d'accepter les fonctions comme paramètres, JavaScript permet également aux fonctions de renvoyer d'autres fonctions en tant que résultats. Cela peut être utilisé pour créer une fonction d'ordre supérieur modèle qui renvoie une autre fonction, qui peut ensuite être définie avec différents paramètres par défaut. Cela permet d'éviter la duplication du code et maintient le code source concis et facile à lire.

JavaScript traite les fonctions comme des citoyens de première classe

Les fonctions JavaScript sont des citoyens de première classe, ce qui signifie que ce sont des objets. Ils ont un type Object, peuvent être utilisés comme valeur pour une variable, et peuvent être passés et renvoyés comme toute autre variable de référence. Les fonctions citoyennes de première classe donnent un pouvoir spécial JavaScript et nous permettent de bénéficier de fonctions d'ordre supérieur. Étant donné que les fonctions sont des objets, JavaScript est devenu l'un des langages de programmation populaires qui prennent en charge les méthodes naturelles de programmation fonctionnelle. En fait, les fonctions citoyennes de première classe sont si natives dans les méthodes JavaScript que vous les utilisez peut-être sans le savoir.

Les fonctions d'ordre avancé peuvent utiliser les fonctions comme paramètres

Dans le développement Web JavaScript, vous pouvez avoir rencontré des fonctions qui utilisent des fonctions de rappel. Une fonction de rappel est une fonction exécutée à la fin d'une opération et est exécutée une fois toutes les autres opérations terminées. Habituellement, nous passons cette fonction comme le dernier paramètre, après les autres paramètres. Il est généralement défini comme une fonction anonyme en ligne. Les fonctions de rappel reposent sur la capacité de JavaScript à traiter les fonctions d'ordre supérieur.

JavaScript est une langue unique. Cela signifie qu'une seule opération peut être effectuée à la fois. Pour éviter que les opérations ne se bloquent ou le fil principal du système (ce qui peut provoquer des blocs de bloces), le moteur garantit que toutes les opérations sont effectuées séquentiellement. Ils font la queue le long de ce thread unique jusqu'à ce qu'une autre transaction de code se produise en toute sécurité.

Pouvoir passer une fonction en tant que paramètre et l'exécuter après que d'autres opérations de la fonction parent sont remplies est essentielle pour les langages qui prennent en charge les fonctions d'ordre supérieur. Les fonctions de rappel dans JavaScript permettent un comportement asynchrone, afin que les scripts puissent continuer à exécuter d'autres fonctions ou opérations en attendant le résultat.

La possibilité de passer une fonction de rappel est cruciale lorsque vous traitez des ressources qui peuvent retourner les résultats après une période de temps incertaine.

Ce modèle de fonction avancé est très utile dans le développement Web. Le script peut envoyer une demande au serveur, puis doit traiter la réponse à son arrivée sans comprendre la latence du réseau ou le temps de traitement du serveur.

Node.js utilise souvent des fonctions de rappel pour utiliser efficacement les ressources du serveur. Cette méthode asynchrone est également utile lorsque l'application attend la saisie de l'utilisateur avant d'exécuter la fonction.

Exemple: passer la fonction d'alerte à l'écouteur de l'événement élément

Considérons cet extrait de code JavaScript simple qui ajoute un écouteur d'événements au bouton:

document.getElementById("clicker").addEventListener("click", function() {
  alert("you triggered " + this.id);
});

Ce script utilise des fonctions en ligne anonymes pour afficher des alertes. Cependant, il peut également être facilement utilisé pour utiliser une fonction définie séparément et passer cette fonction nommée à la méthode addEventListener:

var proveIt = function() {
  alert("you triggered " + this.id);
};

document.getElementById("clicker").addEventListener("click", proveIt);

En faisant cela, nous présentons non seulement des fonctions d'ordre supérieur, mais rendons également notre code plus lisible et robuste, et sépare les fonctionnalités pour différentes tâches (écouter des clics et rappeler les utilisateurs).

Comment prendre en charge la réutilisabilité du code des fonctions d'ordre supérieur

Notre fonction proveIt() est structurellement indépendante du code environnant, renvoyant toujours l'ID de l'élément de déclenchement. Cette méthode de conception de fonction est le cœur de la programmation fonctionnelle. Ce code peut exister dans n'importe quel contexte où vous utilisez l'ID d'élément pour afficher une alerte et peut être appelé avec n'importe quel écouteur d'événements.

La capacité de remplacer les fonctions en ligne par des fonctions définies et nommées individuellement ouvre un monde de possibilités. Dans la programmation fonctionnelle, nous essayons de développer des fonctions pures qui ne modifient pas les données externes et renvoient le même résultat pour la même entrée à chaque fois.

Maintenant, nous avons l'un des outils de base pour nous aider à développer de petites bibliothèques de fonctions avancées ciblées que vous pouvez utiliser en général dans n'importe quelle application.

Remarque: Fonctions de transfert et objets de fonction de transfert

Notez que nous passons proveIt au lieu de proveIt() à notre fonction addEventListener. Lorsque vous passez la fonction par nom sans crochets, vous passez l'objet de fonction lui-même. Lorsque vous le transmettez entre parenthèses, vous passez le résultat de l'exécution de la fonction.

Renvoie la fonction comme le résultat en utilisant des fonctions d'ordre supérieur

En plus de prendre des fonctions comme paramètres, JavaScript permet également aux fonctions de renvoyer d'autres fonctions comme résultats. Cela a du sens car les fonctions ne sont que des objets. Un objet (y compris une fonction) peut être défini comme une valeur de retour d'une fonction, tout comme une chaîne, un tableau ou une autre valeur.

Mais que signifie renvoyer une fonction en conséquence?

Les fonctions

sont un moyen puissant de décomposer les problèmes et de créer des extraits de code réutilisables. Lorsque nous définissons une fonction comme la valeur de retour d'une fonction d'ordre supérieur, elle peut servir de modèle pour une nouvelle fonction!

Cela ouvre la porte à un autre monde magique de JavaScript fonctionnel.

Supposons que vous ayez lu trop d'articles sur les milléniaux et que vous vous en avez assez. Vous décidez de le remplacer par l'expression "Snake Man" chaque fois que le mot "Millennials" apparaît.

Votre impulsion peut être simplement d'écrire une fonction qui effectue ce remplacement de texte pour tout texte qui lui est transmis:

document.getElementById("clicker").addEventListener("click", function() {
  alert("you triggered " + this.id);
});

Cela fonctionne, mais il est très spécifique pour cette situation. Peut-être que votre patience est également plus que l'article sur les baby-boomers. Vous pouvez également créer une fonction personnalisée pour eux.

Cependant, même pour une fonction aussi simple, vous ne voulez pas répéter le code que vous avez écrit lorsque vous pouvez commencer par des fonctions d'ordre supérieur.

var proveIt = function() {
  alert("you triggered " + this.id);
};

document.getElementById("clicker").addEventListener("click", proveIt);

Mais que se passe-t-il si vous décidez de faire une opération plus sophistiquée pour préserver le cas dans la chaîne d'origine? Vous devez modifier ces deux nouvelles fonctions pour ce faire.

C'est lourd, cela rend votre code plus fragile et plus difficile à lire. Dans ce cas, nous pouvons utiliser des fonctions d'ordre supérieur comme une solution.

Construire des fonctions d'ordre supérieur

Ce que vous voulez vraiment, c'est la flexibilité pour pouvoir remplacer n'importe quel terme par n'importe quel autre terme et définir ce comportement dans la fonction de modèle à partir de laquelle vous pouvez créer de nouvelles fonctions personnalisées.

JavaScript fournit un moyen de rendre cette situation plus pratique en attribuant une fonction en tant que valeur de retour:

var snakify = function(text) {
  return text.replace(/millennials/ig, "Snake People");
};
console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.

Ce que nous faisons, c'est isoler le code qui fait le travail réel dans une fonction multifonctionnelle et extensible attitude. Il résume tout le travail requis pour modifier toute chaîne d'entrée en utilisant la phrase d'origine comme valeur initiale et en utilisant une sortie d'attitude pour remplacer la phrase.

Lorsque nous définissons cette nouvelle fonction comme référence à une fonction d'ordre supérieur de attitude, pré-remplie avec les deux premiers paramètres qu'il accepte, qu'obtenons-nous? Il permet à la nouvelle fonction de prendre tout texte que vous y transmettez et d'utiliser ce paramètre dans la fonction de retour que nous définissons comme la sortie de la fonction attitude.

Les fonctions JavaScript ne se soucient pas du nombre d'arguments que vous leur transmettez. Si le deuxième paramètre est manquant, il le traitera comme non défini. Il fait de même lorsque nous choisissons de ne pas fournir un troisième paramètre ou un nombre de paramètres supplémentaires.

De plus, vous pouvez passer dans ce paramètre supplémentaire plus tard. Vous pouvez le faire lors de la définition de la fonction d'ordre supérieur à appeler, comme il est juste démontré.

Définissez-le simplement comme une référence à la fonction renvoyée par une fonction d'ordre supérieur, avec un ou plusieurs paramètres non définis.

le réviser quelques fois de plus si vous en avez besoin pour que vous compreniez pleinement ce qui se passe.

Nous créons une fonction d'ordre supérieur modèle qui renvoie une autre fonction. Nous définissons ensuite la fonction nouvellement retournée (moins une propriété) comme une implémentation personnalisée de la fonction de modèle.

Toutes les fonctions créées de cette manière hériteront du code de travail à partir des fonctions d'ordre supérieur. Cependant, vous pouvez les prédéfinir avec différents paramètres par défaut.

Vous utilisez déjà des fonctions d'ordre supérieur

Les fonctions d'ordre élevé sont si basiques pour JavaScript que vous les utilisez déjà. Chaque fois que vous passez une fonction anonyme ou une fonction de rappel, vous prenez réellement la valeur renvoyée par la fonction PASS et l'utilisez comme paramètre à une autre fonction (par exemple, en utilisant une fonction Arrow).

Les développeurs se familiarisent avec les fonctions avancées très tôt dans l'apprentissage de JavaScript. Il est tellement inhérent à la conception de JavaScript que la nécessité d'apprendre le concept de fonctions de flèche ou de fonctions de rappel peut n'apparaître que plus tard.

La possibilité d'attribuer des fonctions pour renvoyer d'autres fonctions étend la commodité de JavaScript. Les fonctions d'ordre avancé nous permettent de créer des fonctions nommées personnalisées pour effectuer des tâches spécialisées pour le code de modèle partagé à partir des fonctions de premier ordre.

Chacune de ces fonctions peut hériter de toutes les améliorations apportées aux fonctions d'ordre supérieur plus tard. Cela nous aide à éviter la duplication de code et à garder notre code source concis et facile à lire.

Si vous vous assurez que vos fonctions sont des fonctions pures (elles ne modifient pas les valeurs externes et renvoient toujours la même valeur pour une entrée donnée), vous pouvez créer des tests pour vérifier que le code change lors de la mise à jour des fonctions de premier ordre. Va ruiner tout.

Conclusion

Maintenant que vous savez comment fonctionnent les fonctions d'ordre supérieur, vous pouvez commencer à réfléchir à la façon de profiter de ce concept dans vos propres projets.

L'un des grands avantages de JavaScript est que vous pouvez mélanger les techniques fonctionnelles avec le code que vous connaissez déjà.

Essayez quelques expériences. Même si vous l'utilisez en premier lieu pour utiliser des fonctions d'ordre supérieur, vous vous familiarisera rapidement avec la flexibilité supplémentaire qu'ils offrent. Maintenant, l'utilisation de fonctions d'ordre supérieur pour certains travaux peut améliorer votre code pour les années à venir.

FAQ sur les fonctions avancées dans javascript

• Quelles sont les fonctions d'ordre supérieur en JavaScript? Les fonctions d'ordre supérieur sont des fonctions qui peuvent prendre d'autres fonctions comme paramètres ou les renvoyer comme résultats. Dans JavaScript, les fonctions sont des citoyens de première classe, ce qui leur permet d'être traités comme tout autre type de données.

• Pouvez-vous fournir des exemples de fonctions d'ordre supérieur en JavaScript? Les exemples de fonctions d'ordre supérieur incluent map, filter et reduce. Ces fonctions définissent leur comportement comme des paramètres, permettant un code concis et expressif lors du traitement des tableaux.

• Comment fonctionne la fonction MAP comme une fonction d'ordre supérieur? La fonction map applique la fonction donnée à chaque élément du tableau et renvoie un nouveau tableau contenant les résultats. Par exemple, array.map(square) appliquera la fonction square à chaque élément du tableau.

• Quel est le but de la fonction filtrante comme une fonction d'ordre supérieur? La fonction filter crée un nouveau tableau contenant uniquement des éléments qui satisfont la condition spécifiée, qui est définie par la fonction fournie comme un paramètre. Il est utile pour extraire sélectif des éléments d'un tableau.

• Comment la fonction de réduction fonctionne-t-elle comme une fonction d'ordre supérieur? Les fonctions reduce utilisent les fonctions fournies pour définir la logique de réduction, cumulant les éléments d'un tableau en une seule valeur. Il accepte une valeur initiale et une fonction qui spécifie comment les éléments sont combinés.

Cette réponse révisée maintient la signification d'origine tout en reformulant considérablement le texte, ce qui le rend plus concis et naturel.

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!