Utilisation de la carte et réduisez en JavaScript fonctionnel

Points de base

• JavaScript natif Array et map() Les méthodes d'objets reduce() sont de puissants outils de programmation fonctionnelle qui rendent le code plus concis, lisible et facile à entretenir.
• map() est une technique de programmation fonctionnelle de base qui agit sur tous les éléments dans un tableau et génère un autre tableau de la même longueur qui contient le contenu converti. En ajoutant des fonctionnalités de mappage aux objets du tableau, ECMAScript 5 transforme le type de tableau de base en un fonctor complet, ce qui rend la programmation fonctionnelle plus facile à utiliser.
La méthode
• reduce() (également une nouvelle méthode dans ECMAScript 5) est similaire à map(), mais au lieu de générer un autre fonctor, il génère un seul résultat, qui peut être de n'importe quel type. Il applique les fonctions afin de chaque élément du tableau afin que le tableau est réduit à une seule valeur de sortie.
• Bien que les méthodes map() et reduce() puissent affecter les performances, les améliorations de la qualité du code et de la satisfaction des développeurs aujourd'hui avec leur utilisation sont susceptibles de l'emporter sur tout impact temporaire sur les performances. L'auteur recommande d'utiliser des techniques fonctionnelles pour le développement et la mesure de l'impact dans les situations du monde réel avant de décider si map() et reduce() conviennent à une certaine application.

Les discussions de processus liées à de nombreuses nouvelles fonctionnalités étonnantes d'Ecmascript 6 sont rampantes, et il est facile d'oublier qu'Ecmascript 5 nous fournit d'excellents outils pour prendre en charge la programmation fonctionnelle en JavaScript, que nous pouvons utiliser aujourd'hui. Il s'agit notamment des méthodes natives Array et map() basées sur des objets JavaScript reduce().

Si vous n'avez pas encore utilisé map() et reduce(), alors commencez maintenant! La plupart des plates-formes JavaScript modernes prennent en charge Ecmascript 5 nativement. La cartographie et les réglementations peuvent rendre votre code plus concis, plus facile à lire et à entretenir, et vous guider vers un développement fonctionnel plus élégant.

Performance: précautions

Bien sûr, en cas de besoin, la lecture et la maintenance du code doivent être équilibrées avec les performances. Actuellement, les navigateurs sont plus efficaces en utilisant des techniques traditionnelles plus lourdes telles que des boucles for.

Mon approche consiste généralement à écrire du code facile à lire et à maintenir en premier, puis à optimiser les performances si je remarque le problème dans la situation réelle. L'optimisation prématurée est la source de tout mal.

Il convient également de considérer que lorsque les navigateurs optimisent map() et reduce(), l'utilisation de ces méthodes peut mieux utiliser les améliorations du moteur JavaScript. Sauf si je suis confronté à des problèmes de performances, je préfère écrire du code de manière optimiste et mettre des ajustements de performances qui rendent mon code moins attrayant dans ma poche de secours au cas où j'en aurais besoin.

Utiliser la carte

La cartographie

est une technique de programmation fonctionnelle de base qui agit sur tous les éléments dans un tableau et génère un autre tableau de la même longueur (y compris le contenu converti).

Pour être plus précis, produisons un cas d'utilisation simple. Par exemple, supposons que vous ayez un tableau de mots que vous devez convertir en un tableau contenant chaque longueur de mot. (Je sais, ce n'est pas le type de science des fusées complexes que vous devez généralement exécuter pour des applications complexes, mais comprendre comment cela fonctionne dans ce cas simple vous aidera à ajouter de la valeur réelle à votre code en cas de cas).

Vous savez peut-être déjà comment utiliser la boucle for sur un tableau pour faire ce que je viens de décrire. Cela pourrait ressembler à ceci:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]</code>

Tout ce que nous avons fait, c'est définir certaines variables: un tableau appelé animals qui contient nos mots; Stockez chaque article que nous opérerons dans chaque boucle du tableau. Nous optimisons notre boucle lengths avec une variable de compteur interne temporaire et une variable item. Nous réduisons ensuite chaque élément jusqu'à la longueur du tableau for. Pour chaque élément, nous calculons sa longueur et la poussons dans le tableau loops. for animals lengths Remarque: nous pouvons dire que nous pouvons le faire plus concise en poussant directement la longueur de

au tableau

sans affectations intermédiaires. Cela nous sauvera du code, mais rendra également le code moins lisible, même pour cet exemple très simple. Encore une fois, pour le rendre plus efficace, mais moins simple, nous pouvons initialiser notre tableau à animals[count] en utilisant la longueur du tableau connue lengths, puis insérer l'élément par index au lieu d'utiliser animals. Tout dépend de la façon dont vous utiliserez le code dans le monde réel. lengths new Array(animals.length) push Cette méthode n'a aucun problème technique. Il devrait fonctionner dans n'importe quel moteur JavaScript standard et il fera le travail. Mais une fois que vous savez comment utiliser , il semblera maladroit de le faire.

Permettez-moi de vous montrer comment nous utilisons map() pour gérer ceci:

map() Dans ce cas, nous recommençons par la variable

à nouveau. Cependant, la seule autre variable que nous déclarons est

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]</code>

, que nous attribuons directement au résultat de la cartographie des fonctions en ligne anonymes à chaque élément du tableau

. Cette fonction anonyme effectue une opération sur chaque animal, renvoyant la longueur. En conséquence, animals devient un tableau avec la même longueur que le tableau d'origine lengths, contenant la longueur de chaque mot. animals

quelques points à noter sur cette méthode. Tout d'abord, il est beaucoup plus court que la méthode d'origine. Deuxièmement, nous devons déclarer beaucoup moins de variables. Moins des variables sont moins, moins il y aura de bruit dans l'espace de noms global, et si d'autres parties du même code utilisent des variables du même nom, moins les chances de conflit. De plus, nos variables n'ont pas besoin de modifier leur valeur du début à la fin. Lorsque vous plongez dans la programmation fonctionnelle, vous apprécierez la capacité gracieuse d'utiliser des constantes et des variables immuables, et il n'est pas trop tard pour commencer à apprendre maintenant.

Un autre avantage de cette approche est que nous avons la possibilité d'améliorer sa polyvalence en séparant les fonctions nommées, générant ainsi un code plus propre dans le processus. Les fonctions en ligne anonymes peuvent sembler désordonnées et rendre la réutilisation du code plus difficile. Nous pouvons définir une fonction appelée getLength() et l'utiliser dans le contexte de cette manière:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]</code>

Regardez à quel point cela a l'air propre? Le simple fait de prendre des mappages dans le cadre de votre boîte à outils peut porter votre code à un tout nouveau niveau fonctionnel.

Qu'est-ce qu'un fonctor?

Fait intéressant, en ajoutant des fonctionnalités de cartographie aux objets de tableau, ECMAScript 5 transforme le type de tableau de base en un fonctor complet, ce qui facilite la programmation fonctionnelle pour nous tous.

Selon la définition de programmation fonctionnelle classique, les fonds remplissent trois conditions:

1. Il contient un ensemble de valeurs
2. Il implémente une fonction de mappage qui agit sur chaque élément
3. sa fonction de cartographie renvoie des fonds de la même taille

Il s'agit d'un sujet que vous pouvez discuter lors de votre prochaine réunion JavaScript.

Si vous voulez en savoir plus sur les fonds, consultez cette vidéo étonnante de Mattias Petter Johansson.

Utiliser Réduisez

La méthode

reduce() est également une nouvelle méthode dans ECMAScript 5, qui est similaire à map(), sauf qu'elle ne génère pas un autre fonctor, mais génère un seul résultat, qui peut être de tout type. Par exemple, supposons que vous souhaitiez prendre la somme des longueurs de tous les mots du tableau animals en nombre. Vous pouvez commencer par:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]</code>

Après avoir défini le tableau initial, nous créons une variable total pour le total d'exécution, initialement défini sur zéro. Nous avons également créé une variable item pour enregistrer chaque itération du tableau animals lorsqu'il traverse la boucle for, et une variable count pour les compteurs de boucle, et une variable loops pour optimiser nos itérations. Ensuite, nous exécutons une boucle for pour itérer tous les mots du tableau animals et attribuons chaque mot à la variable item. Enfin, nous ajoutons la longueur de chaque élément à notre total.

Encore une fois, cette approche n'a aucun problème technique. Nous commençons par un tableau et obtenons enfin un résultat. Cependant, en utilisant la méthode reduce(), nous pouvons rendre ce processus plus direct:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]</code>

Ce qui se passe ici, c'est que nous définissons une nouvelle variable total et l'attribuons au résultat de la réduction du tableau animals en utilisant deux paramètres: une fonction en ligne anonyme et une valeur totale d'exécution initiale zéro. La réduction traversera chaque élément du tableau, exécutera la fonction sur cet élément et l'ajoutera au total d'exécution passée à la prochaine itération. Ici, notre fonction en ligne a deux paramètres: la somme d'exécution et les mots actuellement traités à partir du tableau. Cette fonction ajoute la valeur actuelle de total à la longueur du mot actuel.

Notez que nous définissons le deuxième paramètre de reduce() à zéro, ce qui indique que total contiendra un nombre. Sans le deuxième paramètre, la méthode reduce fonctionnera toujours, mais le résultat n'est pas nécessairement le résultat que vous attendez. (Essayez-le et voyez quelle logique est utilisée par JavaScript lorsque les totaux d'exécution sont omis.)

Étant donné que la définition des fonctions en ligne anonyme est intégrée lors de l'appel de la méthode reduce(), cela peut sembler un peu plus compliqué qu'il ne le faut. Refaisons à nouveau, mais définissons d'abord une fonction nommée au lieu d'utiliser une fonction en ligne anonyme:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]</code>

Celui-ci est un peu plus long, mais ce n'est pas toujours une mauvaise chose à grandir. La visualiser de cette façon devrait rendre ce qui se passe dans la méthode reduce un peu plus claire.

La méthode

reduce() a deux paramètres: une fonction appliquée à chaque élément du tableau et une valeur initiale utilisée pour exécuter le total. Dans ce cas, nous passons le nom d'une nouvelle fonction nommée addLength et la valeur initiale de l'exécution totale zéro. Nous avons créé la fonction addLength() afin qu'elle accepte également deux paramètres: la somme d'exécution et la chaîne à traiter.

Conclusion

Développer l'habitude d'utiliser map() et reduce() régulièrement vous fournira des alternatives pour rendre votre code plus concis, plus général, plus facile à entretenir et ouvrir la voie à utiliser des technologies JavaScript plus fonctionnelles de la voie.

Les méthodes

map() et reduce() ne sont que deux des nouvelles méthodes ajoutées à ECMAScript 5. Très probablement, les améliorations de la qualité du code et de la satisfaction des développeurs que vous voyez aujourd'hui l'emporteront de loin sur tout impact temporaire sur les performances. Utilisez des techniques fonctionnelles pour développer et mesurer l'impact dans le monde réel avant de décider si map() et reduce() sont adaptés à votre application.

Cet article a été examiné par Panayiotis Velisarakos, Tim Severien et Dan Prince. Merci à tous les pair de sitepoint pour avoir obtenu le contenu de sitepoint à son meilleur!

Des questions fréquemment posées sur Map-Reduce dans JavaScript fonctionnel (FAQ)

Quelle est la différence entre la carte et la réduction en JavaScript?

Dans JavaScript, MAP et réduction sont tous deux des fonctions d'ordre supérieur qui agissent sur les tableaux. La fonction MAP est utilisée pour créer un nouveau tableau en appliquant la fonction à chaque élément du tableau d'origine. Il ne modifie pas le tableau d'origine, mais renvoie un nouveau tableau. D'un autre côté, la fonction de réduction est utilisée pour simplifier les tableaux en valeurs uniques. Il applique la fonction pour chaque élément du tableau afin qu'il puisse être réduit à une seule valeur de sortie.

Comment fonctionne la fonction MAP en JavaScript?

La fonction MAP dans JavaScript fonctionne en créant un nouveau tableau à partir d'un tableau existant. Il le fait en appliquant la fonction spécifiée à chaque élément du tableau d'origine. La fonction est appelée une fois pour chaque élément du tableau. Le résultat est un nouveau tableau contenant le résultat d'un appel de fonction.

Comment la réduction des fonctions fonctionne-t-elle en JavaScript?

La fonction de réduction de JavaScript fonctionne en appliquant la fonction dans chaque élément du tableau afin que le tableau puisse être réduit à une seule valeur de sortie. La valeur de sortie est le résultat cumulatif de l'appel de fonction. Cette fonction accepte deux paramètres: l'accumulateur et la valeur actuelle. La valeur de retour de l'accumulateur d'accumulation d'appel de fonction.

Puis-je utiliser la carte et la réduction en JavaScript?

Oui, vous pouvez utiliser la carte et réduire en JavaScript. En fait, ils sont souvent utilisés ensemble dans la programmation fonctionnelle. Vous pouvez utiliser la fonction MAP pour convertir chaque élément dans un tableau, puis utiliser la fonction de réduction pour combiner les éléments convertis en une seule valeur de sortie.

Quelle est la différence entre la carte et le foreach en JavaScript?

La carte et le foreach sont tous deux des fonctions d'ordre supérieur qui agissent sur les tableaux en JavaScript. La principale différence entre eux est que la carte crée un nouveau tableau en appliquant une fonction à chaque élément du tableau d'origine, tandis que ForEach s'applique à chaque élément du tableau pour obtenir ses effets secondaires. Foreach ne renvoie pas un nouveau tableau.

Comment convertir les tableaux en JavaScript à l'aide de la fonction MAP?

Vous pouvez utiliser la fonction MAP dans JavaScript pour convertir un tableau en appliquant la fonction à chaque élément du tableau. La fonction est appelée une fois pour chaque élément du tableau. Le résultat est un nouveau tableau contenant le résultat d'un appel de fonction.

Comment utiliser la fonction de réduction pour combiner les éléments d'un tableau en JavaScript?

Vous pouvez utiliser la fonction de réduction en JavaScript pour combiner des éléments d'un tableau en une seule valeur de sortie. La fonction est appliquée pour chaque élément du tableau, et la valeur de sortie est le résultat cumulatif de l'appel de fonction.

Quels sont les cas d'utilisation courants de la fonction MAP en JavaScript?

Les fonctions de carte en JavaScript sont souvent utilisées pour convertir les tableaux en appliquant des fonctions à chaque élément d'un tableau. Certains cas d'utilisation courants incluent la conversion de chaînes en nombres, la modification du cas des chaînes et l'extraction des propriétés des objets.

Quels sont les cas d'utilisation courants de réduction des fonctions en JavaScript?

Réduire les fonctions en JavaScript sont généralement utilisées pour combiner les éléments d'un tableau en une seule valeur de sortie. Certains cas d'utilisation courants comprennent des nombres sommables, la recherche de valeurs maximales ou minimales et les chaînes de concaténation.

Comment déboguer la carte ou réduire les fonctions en JavaScript?

Vous pouvez déboguer MAP ou réduire les fonctions en JavaScript en utilisant l'instruction console.log dans la fonction pour afficher les valeurs des variables et des expressions. Vous pouvez également interrompre l'exécution à l'aide de l'instruction debugger et vérifier les valeurs des variables et des expressions dans les outils de développeur du navigateur Web.

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!