Composition de la fonction en javascript avec array.prototype.reduceright

Ces dernières années, la programmation fonctionnelle en JavaScript est devenue de plus en plus populaire. Alors que certains de ses principes souvent publiés (tels que l'invariance) nécessitent des solutions de contournement, le traitement des fonctions de première classe de la langue prouve son support pour le code composable motivé par cette primitive de base. Avant d'introduire comment combiner dynamiquement les fonctions à partir d'autres fonctions, passons en revue brièvement.

Points clés

• Les combinaisons de fonctions dans JavaScript peuvent créer des fonctions complexes en combinant des fonctions plus simples, améliorant ainsi la réutilisabilité et la modularité du code. Cette approche simplifie la compréhension, le débogage et les tests du code, et encourage le principe de «ne pas vous répéter» (sec) et réduit la redondance.
• Les fonctions d'ordre avancé (peuvent prendre une ou plusieurs fonctions en tant que paramètres, ou renvoyer une fonction en conséquence) sont des parties clés des combinaisons de fonctions en JavaScript. Ils sont utilisés pour créer de nouvelles fonctions en combinant des fonctions existantes.
• JavaScript gère les fonctions comme des valeurs, permettant une combinaison facile de travaux plus grands et spécifiques au contexte. L'utilisation de fonctions d'ordre supérieur entraîne une séparation de leurs définitions et appels. Cela peut libérer les développeurs des contraintes hiérarchiques strictes imposées par la programmation orientée objet.
• Les combinaisons de fonctions peuvent être utilisées avec des frameworks JavaScript tels que React ou Vue. Dans React, la combinaison de composants pour créer des interfaces utilisateur complexes est un modèle commun. De même, le système de mixin de Vue peut être considéré comme une forme de combinaisons de fonctions.

Qu'est-ce qu'une fonction?

En fait, une fonction est une procédure qui permet l'exécution d'un ensemble d'étapes impératives pour effectuer des effets secondaires ou des valeurs de retour. Par exemple:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Lorsque cette fonction est appelée avec un objet avec les propriétés FirstName et LastName, getfullName renvoie une chaîne contenant les deux valeurs correspondantes:

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Il convient de noter que depuis ES2015, JavaScript prend désormais en charge Fonction Arrow Syntaxe:

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

Étant donné que notre fonction getfullName a un 1 (c'est-à-dire un seul paramètre) et n'a qu'une seule instruction de retour, nous pouvons simplifier cette expression:

const getFullName = person => `${person.firstName} ${person.surname}`;

Bien que les méthodes de ces trois expressions soient différentes, elles atteignent toutes le même but à la fin:

• Créez une fonction appelée getfullName qui peut être accessible via la propriété du nom.
• accepte une personne de paramètre.
• Renvoie une chaîne calculée contenant personne.firstname et personne.lastname, séparée par des espaces.

combinant la fonction via la valeur de retour

En plus d'attribuer des valeurs de retour des fonctions aux déclarations (par exemple const personne = getPerson ();), nous pouvons également les utiliser pour remplir les paramètres d'autres fonctions, ou fournir généralement des valeurs lorsque JavaScript leur permet. Supposons que nous ayons des fonctions qui remplissent les effets secondaires de la journalisation et de ses session:

const log = arg => {
  console.log(arg);
  return arg;
};

const store = arg => {
  sessionStorage.setItem('state', JSON.stringify(arg));
  return arg;
};

const getPerson = id => id === 'homer'
  ? ({ firstName: 'Homer', surname: 'Simpson' })
  : {};

Nous pouvons effectuer ces opérations sur la valeur de retour de GetPerson en utilisant les appels imbriqués:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Étant donné que les paramètres requis doivent être fournis à la fonction en fonction de la façon dont il est appelé, la fonction la plus intérieure sera appelée en premier. Ainsi, dans l'exemple ci-dessus, la valeur de retour de GetPerson sera transmise au journal, et la valeur de retour du journal sera transmise au magasin. En combinant des appels de fonction pour construire des déclarations, nous pouvons éventuellement construire des algorithmes complexes à partir de blocs de construction atomiques, mais la nidification de ces appels peut devenir difficile à gérer; à quoi ressemblerait-il si nous voulions combiner 10 fonctions?

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Heureusement, nous pouvons utiliser une élégante implémentation générale: simplifiez le tableau de fonctions en fonctions d'ordre supérieur.

tableau cumulatif à l'aide de l'arraie.prototype.reduce

La méthode de réduction du prototype

Array prend une instance de tableau et l'accumule en une seule valeur. Si nous voulons additionner un tableau de numéros, nous pouvons utiliser la méthode suivante:

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

Dans ce segment de code, Numbers.reduce accepte deux paramètres: la fonction de rappel qui sera appelée sur chaque itération, et la valeur initiale du paramètre total transmis à la fonction de rappel; La prochaine addition d'itération au total. Pour décomposer davantage cela en étudiant les appels ci-dessus à résumer:

Notre fonction de rappel fonctionnera 5 fois
Puisque nous fournissons une valeur initiale, le total sera 0 sur le premier appel
Le premier appel reviendra 0 2, ce qui a fait la résolution du total à 2 sur le deuxième appel
Le résultat renvoyé par cet appel ultérieur 2 3 sera fourni au paramètre total dans le troisième appel, etc.

Bien que la fonction de rappel accepte deux autres paramètres, qui représentent l'index actuel et l'instance de tableau qui appelle Array.prototype.reduce, les deux premiers sont les plus critiques et sont généralement appelés:

Accumulateur - La valeur renvoyée par la dernière fonction de rappel d'itération. Dans la première itération, cela se résout à la valeur initiale, et si aucune valeur initiale n'est spécifiée, elle se résout vers le premier élément du tableau.
CurrentValue - La valeur du tableau de l'itération actuelle; puisque elle est linéaire, il progresse de l'arrivée [0] à Array [Array.Length - 1]

combinant la fonction à l'aide de array.prototype.reduce

Maintenant que nous comprenons comment simplifier les tableaux en valeurs uniques, nous pouvons utiliser cette méthode pour combiner les fonctions existantes en nouvelles fonctions:

const getFullName = person => `${person.firstName} ${person.surname}`;

Notez que nous utilisons la syntaxe du paramètre REST (...) pour lancer n'importe quel nombre de paramètres dans un tableau, afin que les consommateurs n'aient pas besoin de créer explicitement de nouvelles instances de tableau pour chaque site d'appel. Compose renvoie également une autre fonction, ce qui fait de composer une fonction d'ordre supérieur qui accepte une valeur initiale (initialArg). Ceci est crucial car nous pouvons donc combiner de nouvelles fonctions réutilisables sans les appeler avant nécessaire;

Alors, comment combinons-nous d'autres fonctions en une seule fonction d'ordre supérieur?

Dans ce code:

• La déclaration de la personne se résoudra à {FirstName: 'Homer', incident: 'Simpson'}
• La représentation ci-dessus de la personne sera sortie de la console du navigateur
• La personne sera sérialisée en JSON puis rédigera sessionstorage
sous la clé de la personne

L'importance de l'ordre des appels

Capacité à combiner n'importe quel nombre de fonctions en utilisant la composition des utilitaires pour rendre notre code plus concis et abstrait. Cependant, nous pouvons mettre en évidence un point en revisitant l'appel en ligne:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Les gens peuvent trouver naturel de le copier avec notre fonction de composition:

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Dans ce cas, pourquoi FNEST (4) === fcomposed (4) se résout à False? Vous vous souvenez peut-être que j'ai souligné comment interpréter l'appel interne en premier lieu, donc composer (g, h, i) est en fait équivalent à x = & gt; Retours fcomposés 9. Nous pouvons simplement inverser l'ordre d'appel des variantes imbriquées ou combinées de F, mais étant donné la spécificité de composer pour refléter les appels imbriqués, nous avons besoin d'un moyen de réduire la fonction dans l'ordre de droite à gauche; .reduceRight fournit ceci:

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

Avec cette implémentation, FNEST (4) et FCOMPOSED (4) se résolvent à 10. Cependant, notre fonction GetPersonwithsideEffects est désormais mal définie; bien que nous puissions inverser l'ordre des fonctions internes, dans certains cas, la lecture de gauche à droite peut faciliter l'analyse psychologique des étapes du programme. Il s'avère que nos méthodes précédentes ont été assez courantes, mais sont souvent appelées tuyau :

const getFullName = person => `${person.firstName} ${person.surname}`;

En utilisant notre fonction de tuyau, nous conserverons l'ordre de gauche à droite requis par GetPersonwithIthsideFects. Les pipelines sont devenus un élément majeur des RXJ pour des raisons décrites ci-dessus;

combinaisons de fonction comme alternatives à l'héritage

Nous avons vu dans l'exemple précédent comment combiner plusieurs fonctions infinies en unités plus grandes, réutilisables et orientées cible. Un autre avantage de la combinaison de fonctions est de vous libérer de la rigidité des graphiques de succession. Supposons que nous voulons réutiliser le comportement de journalisation et de stockage en fonction de la hiérarchie des classes;

const log = arg => {
  console.log(arg);
  return arg;
};

const store = arg => {
  sessionStorage.setItem('state', JSON.stringify(arg));
  return arg;
};

const getPerson = id => id === 'homer'
  ? ({ firstName: 'Homer', surname: 'Simpson' })
  : {};

En dehors de la longueur, le problème direct avec ce code est que nous abusent de l'héritage pour mettre en œuvre la réutilisation; Un problème potentiellement plus grave est de nommer les conflits:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Si nous voulons instancier le mystate et appeler sa méthode de magasin, nous n'appellerons pas la méthode du magasin storable à moins que nous ajoutions un appel à super.store () dans mystate.prototype.store, mais cela sera à l'état créant un serré , couplage fragile entre storable. Cela peut être atténué à l'aide de systèmes d'entités ou de modèles de politique, comme je l'ai introduit ailleurs, mais malgré les avantages de hériter de la taxonomie plus large des systèmes d'expression, les combinaisons de fonctions fournissent un moyen plat et concis de partager sans dépendance au code du nom de la méthode.

Résumé

JavaScript gère les fonctions comme des valeurs et génère leurs expressions, ce qui facilite la combinaison de travaux plus grands et spécifiques au contexte. La réflexion à cette tâche comme un cumulatif des tableaux de fonction élimine le besoin d'appels impératifs imbriqués, et l'utilisation de fonctions d'ordre supérieur entraîne la séparation de leurs définitions et de leurs appels. De plus, nous pouvons nous débarrasser des contraintes hiérarchiques strictes imposées par la programmation orientée objet.

FAQ sur les combinaisons de fonctions en javascript

Quelle est la signification de la combinaison de fonctions en JavaScript?

La combinaison de fonctions est un concept de base dans JavaScript et une grande programmation fonctionnelle. Il permet aux développeurs de créer des fonctions complexes en combinant des fonctions plus simples, améliorant ainsi la réutilisabilité et la modularité de leur code. Cette approche rend le code plus facile à comprendre, à déboguer et à tester. Il encourage également le principe de «Ne vous répétez pas» (sec) à réduire la redondance dans la base de code.

Comment les combinaisons de fonctions sont-elles liées au concept de fonctions d'ordre supérieur?

Les fonctions d'ordre élevé sont un élément clé des combinaisons de fonctions en JavaScript. Une fonction d'ordre supérieur est une fonction qui peut prendre une ou plusieurs fonctions comme paramètres, renvoie une fonction en conséquence ou effectuer les deux opérations en même temps. Dans les combinaisons de fonctions, nous utilisons souvent des fonctions d'ordre supérieur pour créer de nouvelles fonctions en combinant des fonctions existantes.

Pouvez-vous fournir un exemple pratique de combinaisons de fonctions en JavaScript?

Bien sûr, considérons un exemple simple. Supposons que nous ayons deux fonctions, double et incrément. Double prend un nombre et le multiplie par 2, et l'incrément ajoute 1 à son entrée. Nous pouvons combiner ces deux fonctions pour créer une nouvelle fonction qui double un nombre et incréments le résultat.

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Quelle est la différence entre la combinaison de fonctions et la chaîne de fonctions en JavaScript?

La combinaison de fonctions et la chaîne de fonctions sont deux façons différentes de combiner les fonctions en JavaScript. Les combinaisons de fonctions impliquent le passage de la sortie d'une fonction en entrée à une autre. D'un autre côté, une chaîne de fonctions implique d'appeler plusieurs fonctions dans l'ordre, où chaque fonction appelle le résultat de la fonction précédente. Bien que les deux techniques puissent obtenir des résultats similaires, les combinaisons de fonctions sont plus conformes aux principes de la programmation fonctionnelle.

Comment la combinaison de fonctions aide-t-elle aux tests de code et au débogage?

Les combinaisons de fonctions facilitent la création de petites fonctions pures qui ne font qu'une seule chose et font bien. Ces fonctions sont plus faciles à tester et à déboguer que les grandes fonctions monolithiques. Étant donné que chaque fonction est indépendante, vous pouvez la tester individuellement sans vous soucier du reste du code. Cela facilite la recherche et la correction des bogues dans le code.

Les combinaisons de fonction sont-elles possibles avec les fonctions asynchrones en JavaScript?

Oui, les combinaisons de fonctions peuvent être utilisées avec des fonctions asynchrones en JavaScript. Cependant, cela nécessite plus d'attention, car vous devez vous assurer que la sortie d'une fonction asynchrone est correctement transmise à la fonction suivante en entrée. Cela implique généralement l'utilisation de la syntaxe Promise ou Async / Await.

Quels sont les inconvénients potentiels ou les défis de l'utilisation des combinaisons de fonctions en JavaScript?

Bien qu'il existe de nombreux avantages à des combinaisons de fonctions, il peut également introduire la complexité si elle est mal utilisée. Par exemple, les appels de fonction profondément imbriqués peuvent être difficiles à lire et à comprendre. De plus, si les fonctions combinées ne sont pas des fonctions pures (c'est-à-dire qu'elles ont des effets secondaires), cela peut conduire à des résultats inattendus. Par conséquent, il est important d'utiliser des combinaisons de fonctions avec prudence et de les combiner avec de bonnes pratiques de codage.

Comment les combinaisons de fonctions sont-elles liées au concept de curry en JavaScript?

Curriisation est une technique en JavaScript où une fonction avec plusieurs paramètres est convertie en une série de fonctions, chaque fonction n'a qu'un seul paramètre. Le curry peut être utilisé avec des combinaisons de fonctions pour créer des fonctions plus flexibles et réutilisables. En fait, certaines bibliothèques de services publics telles que Lodash et Ramda offrent à la fois des fonctions de curry et de combinatoire.

Les combinaisons de fonctions sont-elles utiles avec les cadres JavaScript tels que React ou Vue?

Oui, les combinaisons de fonctions peuvent être utilisées avec des frameworks JavaScript tels que React ou Vue. En fait, dans React, la combinaison de composants pour créer des interfaces utilisateur complexes est un modèle commun. De même, le système de mixin de Vue peut être considéré comme une forme de combinaisons de fonctions.

Quelles bibliothèques ou outils y a-t-il pour aider les combinaisons de fonctions en JavaScript?

Oui, il existe plusieurs bibliothèques qui fournissent des utilitaires pour les combinaisons de fonctions en JavaScript. Certaines bibliothèques populaires incluent Lodash, Ramda et Redux (pour la gestion de l'État). Ces bibliothèques fournissent des fonctions telles que la composition ou le tuyau, ce qui rend les fonctions de combinaison plus faciles et plus efficaces.

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!