Filtrage et chaînage en JavaScript fonctionnel

Vocabulaire de JavaScript: programmation orientée objet, impérative et fonctionnelle

La puissance de JavaScript est sa polyvalence, qui prend en charge la programmation orientée objet, la programmation impérative et la programmation fonctionnelle. Les développeurs peuvent changer de manière flexible les paradigmes de programmation en fonction des besoins du projet et des préférences d'équipe.

ES5 introduit des méthodes de tableau natives telles que map, reduce et filter, ce qui facilite considérablement la programmation fonctionnelle. Parmi eux, la méthode filter peut itérer à travers chaque élément du tableau et déterminer s'il faut l'ajouter au nouveau tableau en fonction des conditions de test spécifiées.

Simplifiez le code en utilisant filter Méthode

filter La méthode rend le code plus concis et plus clair. Il itère sur chaque élément du tableau et applique la fonction de test. Si la fonction de test renvoie true, l'élément sera inclus dans le nouveau tableau renvoyé par la méthode filter.

La méthode

filter fonctionne en conjonction avec les deux autres méthodes de tableau fonctionnel de ES5, map et reduce, et peut être utilisée en combinaison pour créer du code concis et efficace tout en gardant le tableau d'origine inchangé.

Bien que la méthode filter puisse être légèrement plus lente que la boucle for, ses avantages de simplicité de code et de maintenabilité en font une pratique recommandée. Avec l'optimisation du moteur JavaScript, ses performances devraient être encore améliorées.

Cet article a été examiné par Dan Prince, Vildan Softic et Joan Yinn. Merci à tous les pair de sitepoint pour avoir obtenu le contenu de sitepoint à son meilleur!

L'une des raisons pour lesquelles j'aime JavaScript est sa flexibilité. Il vous permet d'utiliser une programmation orientée objet, une programmation impérative et même une programmation fonctionnelle, et peut basculer entre eux en fonction de vos besoins actuels et de vos préférences et attentes d'équipe.

Bien que JavaScript prend en charge la technologie fonctionnelle, il n'est pas optimisé pour la programmation fonctionnelle pure comme Haskell ou Scala. Bien que je ne construise généralement pas mes programmes JavaScript en 100% fonctionnels, j'aime utiliser le concept de programmation fonctionnelle pour m'aider à garder mon code simplicité et à me concentrer sur la conception du code facile à réutiliser et à tester.

Ensemble de données de filtre à l'aide de filter Méthode

L'émergence d'ES5 rend les tableaux JavaScript hériter certaines méthodes qui rendent la programmation fonctionnelle plus pratique. Les tableaux JavaScript peuvent désormais être mappés, réglementés et filtrés nativement. Chaque méthode traverse chaque élément du tableau, effectue une analyse sans bouclage ou modifie les modifications de l'état local, les résultats de retour qui peuvent être utilisés immédiatement ou fonctionner plus loin. Dans cet article, je veux vous présenter le filtrage. Le filtrage vous permet d'évaluer chaque élément du tableau et de déterminer s'il faut renvoyer un nouveau tableau contenant l'élément en fonction des conditions de test dans lesquelles vous avez réussi. Lorsque vous utilisez la méthode de filtre de l'arraie, vous obtiendrez un autre tableau qui a la même longueur que le tableau d'origine ou plus court, contenant des éléments de sous-ensemble dans le tableau d'origine qui correspond aux conditions que vous définissez.

Filtre en utilisant la démonstration de boucle

Un exemple de problème simple qui peut bénéficier du filtrage consiste à limiter les tableaux de chaînes aux chaînes avec seulement trois caractères. Ce n'est pas un problème compliqué, nous pouvons facilement le résoudre en utilisant JavaScript normal pour les boucles et sans utiliser de méthodes de filtre. Cela pourrait ressembler à ceci:

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

Ce que nous faisons ici, c'est définir un tableau contenant trois chaînes et créer un tableau vide où nous ne pouvons stocker que trois caractères de chaîne. Nous définissons une variable de comptage qui est utilisée dans une boucle pour itérer dans le tableau. Chaque fois que nous rencontrons une chaîne qui a trois caractères, nous la poussons dans notre nouveau tableau vide. Une fois terminé, nous avons juste besoin d'enregistrer les résultats. Rien ne nous empêche de modifier le tableau d'origine dans une boucle, mais cela perdra définitivement la valeur d'origine. Il est beaucoup plus propre de créer un nouveau tableau et de garder le tableau d'origine inchangé.

Utilisation de la méthode filter Méthode

Nous n'avions pas eu d'erreurs techniques à faire, mais la disponibilité de la méthode de filtre sur le tableau nous permet de rendre notre code plus concis et direct. Voici un exemple de la façon de faire exactement la même chose en utilisant la méthode du filtre:

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

Comme auparavant, nous commençons par les variables contenant le tableau d'origine, et nous définissons une nouvelle variable pour un tableau qui ne contiendra que des chaînes avec trois caractères. Mais dans ce cas, lorsque nous définissons le deuxième tableau, nous l'avons attribué directement au résultat de l'application de la méthode de filtre au tableau des animaux d'origine. Nous passons une fonction en ligne anonyme pour filtrer qui renvoie vrai uniquement si la longueur de valeur de son fonctionnement est 3. La méthode du filtre fonctionne en itérant sur chaque élément du tableau et en appliquant la fonction de test à cet élément. Si la fonction de test renvoie vrai pour l'élément, le tableau renvoyé par la méthode du filtre contiendra l'élément. D'autres éléments seront ignorés. Vous pouvez voir à quel point le code est concis. Même si vous ne comprenez pas le rôle de filtre à l'avance, vous pouvez vérifier ce code et déterminer son intention. Un avantage de la programmation fonctionnelle est qu'il réduit le nombre d'états locaux à suivre et limite la modification des variables externes à partir de la fonction, améliorant ainsi la simplicité du code. Dans ce cas, les variables de comptage et les différents états que nous prenons lorsque nous traversons le tableau d'origine ne sont que plus d'états qui doivent être suivis. À l'aide du filtre, nous avons réussi à éliminer les boucles ainsi que les variables de comptage. Nous ne modifions pas la valeur d'un nouveau tableau autant de fois qu'auparavant. Nous ne le définissons qu'une seule fois et lui attribuons la valeur obtenue en appliquant notre condition de filtre au tableau d'origine.

d'autres façons de formater les filtres

Si nous utilisons des déclarations const et des fonctions de flèche en ligne anonymes, notre code peut être plus concis. Ce sont des fonctionnalités ECMAScript 6 (ES6) qui sont soutenues nativement par la plupart des navigateurs et des moteurs JavaScript maintenant.

var animals = ["cat","dog","fish"];
var threeLetterAnimals = animals.filter(function(animal) {
  return animal.length === 3;
});
console.log(threeLetterAnimals); // ["cat", "dog"]

Bien qu'il soit préférable d'aller au-delà de l'ancienne syntaxe dans la plupart des cas, sauf si vous devez faire correspondre votre code à une base de code existante, il est important de le choisir. À mesure que nous devenons plus concis, chaque ligne de notre code devient plus complexe. Une partie de ce qui rend JavaScript si intéressant est que vous pouvez essayer de concevoir le même code en utilisant de nombreuses façons d'optimiser la taille, l'efficacité, la clarté ou la maintenabilité pour répondre aux préférences de votre équipe. Mais cela exerce également un plus grand fardeau à l'équipe, nécessitant de créer des guides de style partagé et de discuter des avantages et des inconvénients de chaque choix. Dans ce cas, pour rendre notre code plus lisible et polyvalent, nous pourrions vouloir prendre la fonction de flèche en ligne anonyme ci-dessus et la convertir en une fonction nommée traditionnelle, puis passer cette fonction nommée directement au filtre dans la méthode. Le code peut ressembler à ceci:

const animals = ["cat","dog","fish"];
const threeLetterAnimals = animals.filter(item => item.length === 3);
console.log(threeLetterAnimals); // ["cat", "dog"]

Tout ce que nous faisons ici est d'extraire la fonction de flèche en ligne anonyme définie ci-dessus et de la convertir en une fonction nommée distincte. Comme nous pouvons le voir, nous avons défini une fonction pure qui prend le type de valeur approprié de l'élément de tableau et renvoie le même type. Nous pouvons passer directement le nom de la fonction en tant que condition à la méthode du filtre.

(Contenu de l'enquête, concernant map, reduce et les appels de chaîne, veuillez l'ajouter en fonction du texte d'origine en raison des limitations de l'espace.) Maintenez les images et le format du texte d'origine.

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!