Quand j'ai compris comment utiliser les méthodes du tableau JS
.map() ,
.filter() et
.reduce() , tout ce que j'ai lu, regardé et écouté semblait très compliqué. Ces concepts ont été considérés comme des mécanismes indépendants qui n'ont rien à voir avec autre chose. Il était difficile pour moi de saisir leur essence et de les comprendre.
J'ai entendu dire que ce sont des choses fondamentales, dont la compréhension est quelque chose comme la frontière entre les "initiés" et les "non initiés". J'aimerais alors qu'on leur dise la vérité. Elle consiste dans le fait que ces trois méthodes symbolisent le fait que les raisons de trier certains objets itérables s'inscrivent souvent dans l'une des trois catégories fonctionnelles.
En parcourant le code que j'ai écrit plus tôt, j'ai réalisé que dans 95% des cas, lorsque je répétais les éléments de chaînes ou de tableaux, j'ai fait l'une des actions suivantes:
- Appliquer une certaine séquence d'instructions à chaque valeur (analogue à la méthode
.map() ). - Filtrage des valeurs qui correspondent à un critère donné (comme pour
.filter() ). - Réduction d'un ensemble de données à une seule valeur agrégée (analogue de
.reduce() ).
Ce fut un moment de vérité. C'est alors que j'ai compris l'essence de ces méthodes et j'ai vu leur lien avec ce que je connais depuis longtemps.
Afin de m'entraîner, j'ai pris mon ancien code et l'ai refactorisé en utilisant ces méthodes. Cela s'est avéré très utile.
Et maintenant, sans plus tarder, parlons de ces méthodes et, en particulier, examinons comment les utiliser au lieu des schémas répandus d'utilisation des boucles.
Méthode .Map ()
La méthode
.map() est utilisée si vous devez effectuer les opérations suivantes:
- Il est nécessaire d'effectuer une certaine séquence d'actions sur chaque élément de l'objet itérable.
- Il est nécessaire de renvoyer la valeur qui, vraisemblablement, a été modifiée.
Prenons un exemple simple dans lequel pour chaque élément d'un tableau contenant des prix, vous devez trouver de nouveaux montants, y compris les prix d'origine et la taxe de vente:
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = []; for(let i=0; i < prices.length; i++) { new_prices.push(prices[i] * 1.06); }
Voici comment faire de même avec
.map() :
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map(price => price * 1.06);
Il utilise des constructions syntaxiques assez concises. Regardons donc cet exemple. La méthode
.map() accepte un rappel. Il s'agit de la fonction qui sera appliquée aux éléments du tableau. Dans ce cas, il s'agit d'une fonction flèche, qui est déclarée directement entre parenthèses après la déclaration de la méthode.
Le nom du paramètre de
price est le nom qui sera utilisé lors de l'utilisation des éléments du tableau. Comme notre fonction flèche n'a qu'un seul paramètre, nous pouvons nous passer de parenthèses lors de sa déclaration.
L'expression après la flèche (
=> ) est le corps du rappel. Puisqu'il n'y a qu'une seule expression dans le corps de la fonction, nous pouvons nous passer des accolades et du mot-clé
return .
Si vous trouvez cette entrée incompréhensible, voici une version légèrement étendue de cet exemple:
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map((price) => { return price * 1.06 });
Méthode .Filter ()
La méthode
.filter() est utilisée dans les cas où certains éléments doivent être sélectionnés dans l'objet itérable. Lorsque vous utilisez cette méthode, vous devez vous rappeler que les valeurs correspondant au filtre sont incluses dans le résultat final et non exclues de celui-ci. C'est-à-dire que tout pour lequel la fonction a passé
.filter() retournera
true , sera laissé.
Prenons un exemple dans lequel seuls les éléments impairs doivent être sélectionnés dans un tableau d'entiers. Ici, nous utilisons l'opérateur pour prendre le reste de la division et savoir s'il y a un reste en divisant chaque élément du tableau par 2. Si le reste est 1, cela nous indique que le nombre correspondant est impair. Tout d'abord, examinons un moyen de résoudre ce problème en utilisant une boucle régulière:
const numbers = [1,2,3,4,5,6,7,8]; let odds = []; for(let i=0; i < numbers.length; i++) { if(numbers[i] % 2 == 1) { odds.push(numbers[i]); } }
La méthode
.filter() , comme
.map() , accepte un rappel, auquel les éléments de l'objet itéré seront transmis à leur tour:
const numbers = [1,2,3,4,5,6,7,8]; let odds = numbers.filter(num => num % 2);
Ici, le travail est organisé de la même manière que dans l'exemple avec
.map() . La fonction flèche passée à
.filter() n'utilise qu'un seul paramètre, nous le faisons donc sans parenthèses. Son corps ne contient qu'une seule expression, il peut donc être omis entre crochets et il est acceptable de le faire sans
return .
Méthode .Reduce ()
Et maintenant, nous sommes finalement arrivés à la méthode
.reduce() . Il est, je crois, la plus incompréhensible des trois méthodes envisagées aujourd'hui. Le nom de cette méthode indique qu'elle est utilisée pour réduire plusieurs valeurs à une. Cependant, il me semble qu'il est plus facile de la considérer comme une méthode qui vous permet de collecter certaines valeurs à partir de pièces, et non comme une méthode qui vous permet de «réduire» ou de «réduire» quelque chose.
Lors de la construction du code dans lequel cette méthode est appelée, une certaine valeur initiale est d'abord définie. À mesure que la méthode parcourt les valeurs du tableau, cette valeur initiale est modifiée et, sous une forme modifiée, est passée à l'itération suivante.
Voici un problème classique, à résoudre, dont vous avez besoin pour calculer la somme des éléments du tableau. Dans notre cas, cela consiste à trouver le montant des dons pour un certain projet caritatif:
const donations = [5, 20, 100, 80, 75]; let total = 0; for(let i=0; i < donations.length; i++) { total += donations[i]; }
Contrairement aux
.map() et
.filter() , la méthode
.reduce() besoin d'un rappel qui prend deux paramètres. Il s'agit de la batterie et de la valeur actuelle. La batterie est le premier paramètre. C'est lui qui est modifié à chaque itération et passé au suivant:
const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => { return total + donation; });
.reduce() pouvez également passer un deuxième argument à la
.reduce() . C'est ce qui va jouer le rôle de la valeur initiale de la batterie. Supposons que nous voulons connaître le montant total des dons en deux jours, étant donné qu'hier ce montant était de 450 $ et que les informations sur les dons d'aujourd'hui sont stockées dans un tableau:
const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => { return total + donation; }, 450);
Résumé
J'espère que vous avez maintenant compris les méthodes du tableau
.map() ,
.filter() et
.reduce() . Considérez-les comme des mécanismes qui améliorent la lisibilité de votre code. Ils vous permettent d'écrire des programmes plus compacts que ceux obtenus en utilisant des boucles conventionnelles. Mais leur principale force est qu'ils vous permettent d'exprimer clairement l'intention qui sous-tend le code.
Grâce à ces méthodes, le code écrit depuis un certain temps sera plus facile à lire. Au lieu de plonger dans les constructions placées à l'intérieur des boucles
for , en ne faisant cela que pour comprendre leur objectif ultime, vous n'avez vu que le nom d'une de ces méthodes peut déjà vous faire une idée générale des raisons de l'existence d'un morceau de code particulier.
Chers lecteurs! Utilisez-vous les méthodes de tableau JS .map (), .filter () et .reduce ()?
