En tant que développeur, j'adore coder en particulier en JavaScript. Selon mon expérience, l'utilisation de la fonction de réduction est l'une des tùches les plus difficiles de JS. Permettez-moi d'abord d'élaborer sur le concept de réduction!
Dans Wikipedia, il a plusieurs noms, Ă savoir.
RĂ©duire
Pliez
Accumuler
Agrégat
Compresser
Il s'agit d'une fonction qui replie une liste dans n'importe quel type de données. Il s'agit de décomposer une structure en une seule valeur. C'est comme plier une boßte! Avec réduire, vous pouvez transformer un tableau [1,2,3,4,5] en nombre 15 en les additionnant tous.
Comment cela a-t-il été fait dans le passé?Supposons que vous ayez besoin d'une boucle pour plier une liste en un nombre, vous pouvez faire comme ceci:
const add = (x, y) => x + y; const numbers = [1, 2, 3, 4, 5]; let total = 0; for (let i = 0; i < numbers.length; i++) { total = add(total, numbers[i]); } console.log(total);
Cependant, en utilisant la fonction de réduction, vous avez juste besoin d'une boucle à gérer avec «ajouter une fonction». Le code sera comme:
const add = (x, y) => x + y; const numbers = [1, 2, 3, 4, 5]; numbers.reduce(add);
Vous voyez, c'est ainsi que le codage a été facilité!
Pour l'instant, faites attention à JavaScript qui ne peut pas utiliser de boucles, de récursivité ou de méthodes de tableau telles que forEach, some, find, etc. Ainsi, il ne reste que trois cartes, filtrer et réduire. Cependant, notre travail en tant que programmeurs n'a pas changé. Nous avons encore besoin de trois types de fonctionnalités dans nos applications.
-> Filtrage des listes
-> Transformer les listes
-> Conversion des listes en types de données à savoir. chaßne, booléen, nombre, objet
Le dĂ©fi ci-dessus peut ĂȘtre facilement gĂ©rĂ© avec des outils de filtrage, de cartographie et de rĂ©duction.
Listes des juges d'Array.filterQue se passe-t-il si vous souhaitez supprimer une nouvelle liste avec certains éléments, par exemple lorsque l'utilisateur recherche votre liste de contacts? Par conséquent, créez simplement une fonction qui renvoie vrai ou faux en fonction de son entrée (un prédicat).
const isEven = (x) => x % 2 === 0;
Maintenant, branchez-le dans un filtre pour l'appliquer Ă une liste entiĂšre.
const numbers = [1, 2, 3, 4, 5]; numbers.filter(isEven);
Array.map transforme les listesLa conversion de listes en d'autres listes est un développement frontal en résumé. Par conséquent, la carte couvre une grande partie de votre travail de liste.
Supposons que notre application appelle une API pour la liste des utilisateurs, et nous devons afficher le nom de chaque utilisateur à l'écran. Créez simplement une fonction qui renvoie le nom d'un utilisateur.
const getUserName = (user) => user.name;
Maintenant, branchez-le sur la carte pour l'exécuter sur une liste entiÚre d'utilisateurs.
users.map(getUserName)
Array.reduce peut le faire pour vousArray.reduce utilise deux paramĂštres
1) Une valeur initiale (facultative)
Si vous ne fournissez pas de valeur initiale, réduisez les valeurs par défaut de la fonction au premier élément de la liste.
Pour additionner des nombres simples, vous Ă©crirez:
[1, 2, 3].reduce((total, current) => total + current);/source> In case, you give an initial value of zero, you will use this code: <source lang="markdown"> [{ age: 1 }, { age: 2 }, { age: 3 }] .reduce((total, obj) => total + obj.age, 0);
2) Le réducteur
Lorsque réduire les boucles sur la liste, il alimente en dessous de deux paramÚtres vers le réducteur:
-> Valeur actuelle: La valeur actuelle est explicite, tout comme lorsque vous utilisez la matrice [i] dans une boucle réguliÚre. Cependant, l'accumulateur est un terme informatique qui fait peur et qui est en fait simple.
-> Accumulateur: Lorsque vous parcourez des utilisateurs, comment suivez-vous leur ùge total? Vous avez besoin d'une variable de compteur pour la conserver. Voilà l'accumulateur. C'est la valeur finale qui sera réduite une fois terminée.
A chaque étape du cycle, il alimente le dernier accumulateur et l'élément courant vers son réducteur. Ce que le réducteur retourne devient le prochain accumulateur. Le cycle se termine lorsque la liste se termine et a une seule valeur réduite.
Si vous pensez que les fonctions de carte et de filtre ne suffisent pas, vous pouvez exécuter le jeu avec réduire. Il peut faire tout ce que la carte et le filtre font et toutes les autres choses impliquant une boucle sur un tableau.
Prenons l'aide d'un exemple pour calculer l'Ăąge des utilisateurs. ConsidĂ©rez l'Ăąge des utilisateurs Ă 29,30, 31 et 32 ââans.
const users = [ { name: 'Mariam', age: 29 }, { name: 'Kenstar', age: 30 }, { name: 'Saransh', age: 31 }, { name: 'Geoffie', age: 32 }, ];
En revanche, la carte et le filtre ne peuvent renvoyer que des tableaux, mais nous avons besoin d'un nombre!
users.map(?); users.filter(?);
Si nous avions des boucles, nous ne ferions que passer en revue les utilisateurs et compter leur Ăąge dans un compteur! Cependant, il peut ĂȘtre plus facile de rĂ©duire la fonction.
users.reduce((total, currentUser) => total + currentUser.age, 0);
Maintenant, utiliser console.log Ă chaque Ă©tape peut ĂȘtre la maniĂšre la plus simple de gĂ©rer ci-dessus.
const users = [ { name: 'Mariam', age: 29 }, { name: 'Kenstar', age: 30 }, { name: 'Saransh', age: 31 }, { name: 'Geoffie', age: 32 }, ]; const reducer = (total, currentUser) => { console.log('current total:', total); console.log('currentUser:', currentUser); // just for spacing console.log('\n'); return total + currentUser.age; } users.reduce(reducer, 0);
RĂ©sumant le code entier en 6 Ă©tapes ici:
-> Tout d'abord, définissez la fonction de réduction et ses 3 paramÚtres.
-> En fournissant la valeur initiale, initialisez l'accumulateur. Cela changera chaque boucle.
-> Maintenant, commencez à boucler sur le tableau donné.
-> Capture le CurrentItem du tableau pour ce cycle.
-> Il est temps d'appeler le réducteur avec accumulateur et currentItem et de l'enregistrer en tant que nouvel accumulateur
-> Enfin, l'accumulateur se fait changer lorsque la boucle est terminée et le retourner.