Apprenez 5 façons d'utiliser la méthode JS réduire() à travers des exemples

La méthode réduire() exécute une fonction de réduction (fournie par vous) sur chaque élément du tableau, ce qui donne une valeur de sortie unique. La méthode

reduce() renvoie tous les éléments d'un tableau à une seule valeur de sortie, qui peut être un nombre, un objet ou une chaîne. La méthode reduce() a deux paramètres, le premier est la fonction de rappel et le second est la valeur initiale .

Fonction de rappel

La fonction de rappel est exécutée sur chaque élément du tableau. La valeur de retour de la fonction de rappel est le résultat accumulé et est fournie comme paramètre pour le prochain appel à la fonction de rappel. La fonction de rappel prend quatre paramètres.

• Accumulateur (accumulateur) - La valeur de retour de la fonction de rappel d'accumulation de l'accumulateur.
• Valeur actuelle (valeur actuelle) – gère l'élément actuel du tableau.
• Index actuel (index actuel) - gère l'index de l'élément actuel du tableau.
• Source Array (tableau source)

Current Index et Source Array sont facultatifs.

Valeur initiale

Si une valeur initiale est spécifiée, définit l'accumulateur sur initialValue comme élément initial. Sinon, définissez l'accumulateur sur le premier élément du tableau comme élément initial.

arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])

Dans l'extrait de code ci-dessous, le premier accumulateur (accumulator) se voit attribuer une valeur initiale de 0. currentValue est l'élément du tableau numbersArr en cours de traitement. Ici, currentValue est ajouté à l'accumulateur et la prochaine fois que la fonction de rappel est appelée, la valeur de retour est fournie en paramètre.

const numbersArr = [67, 90, 100, 37, 60];
 
const total = numbersArr.reduce(function(accumulator, currentValue){
    console.log("accumulator is " + accumulator + " current value is " + currentValue);
    return accumulator + currentValue;
}, 0);
 
console.log("total : "+ total);

Sortie

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

JavaScript réduit le cas d'utilisation

1. Sommez toutes les valeurs du tableau

Dans le code ci-dessous, le studentResult le tableau a 5 nombres. À l'aide de la méthode reduce(), réduisez le tableau à une valeur unique qui attribue toutes les valeurs et résultats du tableau studentResult à total.

const studentResult = [67, 90, 100, 37, 60];
 
const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0);
 
console.log(total); // 354

2. Somme des valeurs dans le tableau d'objets

Habituellement, nous obtenons les données du backend sous forme de tableau d'objets, par conséquent, la méthode reduce() aide à gérer notre logique frontale. Dans le code ci-dessous, le tableau d'objets studentResult a trois sujets, ici, currentValue.marks prend le score de chaque sujet dans le tableau d'objets studentResult.

const studentResult = [
  { subject: '数学', marks: 78 },
  { subject: '物理', marks: 80 },
  { subject: '化学', marks: 93 }
];
 
const total = studentResult.reduce((accumulator, currentValue) => accumulator + currentValue.marks, 0);
 
console.log(total); // 251

3. Aplatir le tableau

"Aplatir le tableau" fait référence à la conversion d'un tableau multidimensionnel en une seule dimension. Dans le code ci-dessous, le tableau twoDArr 2D est converti en un tableau oneDArr 1D. Ici, le premier [1,2] tableau est affecté à l'accumulateur accumulator puis chaque élément restant du twoDArr tableau est connecté à l'accumulateur.

const twoDArr = [ [1,2], [3,4], [5,6], [7,8] , [9,10] ];
 
const oneDArr = twoDArr.reduce((accumulator, currentValue) => accumulator.concat(currentValue));
 
console.log(oneDArr);
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

4. Regrouper les objets par attributs

Selon les attributs de l'objet, on peut utiliser la méthode reduce() pour diviser le tableau d'objets en plusieurs groupes. Avec l'extrait de code suivant, vous pouvez clairement comprendre ce concept. Ici, le tableau d'objets result comporte cinq objets, chacun possédant les propriétés subject et marks. Si le score est supérieur ou égal à 50, le sujet est réussi, sinon, le sujet échoue.

reduce() est utilisé pour regrouper les résultats en réussite et en échec. Tout d'abord, initialValue est attribué à l'accumulateur, puis la méthode push() ajoute l'objet actuel aux propriétés pass et fail sous forme de tableau d'objets après avoir vérifié la condition.

const result = [
  {subject: '物理', marks: 41},
  {subject: '化学', marks: 59},
  {subject: '高等数学', marks: 36},
  {subject: '应用数学', marks: 90},
  {subject: '英语', marks: 64},
];
 
let initialValue = {
  pass: [], 
  fail: []
}
 
const groupedResult = result.reduce((accumulator, current) => {
  (current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current);
  return accumulator;
}, initialValue);
 
console.log(groupedResult);

Output

{
 pass: [
  { subject: ‘化学’, marks: 59 },
  { subject: ‘应用数学’, marks: 90 },
  { subject: ‘英语’, marks: 64 }
 ],
 fail: [
  { subject: ‘物理’, marks: 41 },
  { subject: ‘高等数学’, marks: 36 }
 ]
}

5. Supprimer les doublons dans le tableau

Dans l'extrait de code ci-dessous, les doublons dans le tableau plicatedArr sont supprimés. Tout d’abord, un tableau vide est attribué à l’accumulateur comme valeur initiale. accumulator.includes() Vérifie si chaque élément du tableau duplicatedArr est déjà disponible dans l'accumulateur. Si currentValue n'est pas disponible dans l'accumulateur, utilisez push() pour l'ajouter.

const duplicatedsArr = [1, 5, 6, 5, 7, 1, 6, 8, 9, 7];
 
const removeDuplicatedArr = duplicatedsArr.reduce((accumulator, currentValue) => {
  if(!accumulator.includes(currentValue)){
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
 
console.log(removeDuplicatedArr);
// [ 1, 5, 6, 7, 8, 9 ]

Résumé

Dans cet article, nous avons discuté de la méthode array reduce(). La méthode reduce() est présentée en premier, puis son comportement est discuté à l'aide d'un exemple simple. Enfin, les cinq cas d'utilisation les plus courants de la méthode reduce() sont abordés avec des exemples. Si vous débutez en JavaScript, cet article vous aidera.

Adresse originale en anglais : https://medium.com/javascript-in-plain-english/5-use-cases-for-reduce-in-javascript-61ed243b8fef

Auteur : wathsala danthasinghe

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

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!