tab.reduce

1
tab.reduce(function([result, value, index, array]){...}, init)

Cette fonction retourne une valeur calculée à partir de toutes les valeurs du tableau.

la valeur retournée par la fonction correspond à la valeur stocké dans result.

result : valeur d'accumulation retournée par la méthode.

init : valeur d'initialisation de result.

value : représente un élément du tableau à chaque tour de boucle

index : représente l'index de l'élément du tableau à chaque tour de boucle (facultatif)

array :: représente le tableau lui-même (facultatif)

ExempleSomme des nombres du tableau

See the Pen cours-js-array-reduce-1 by BCMM-W2D (@bcmm-w2d) on CodePen.

Array : reduce

Équivalent avec fonction fléchée

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const somme = listeNombres.reduce((somme, nombre) => somme + nombre, 0);

Équivalent avec forEach

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const tab = [];
4
let somme = 0;
5
listeNombres.forEach(function (nombre) {
6
  somme += nombre;
7
});

Équivalent avec for of

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
let somme = 0;
4
for (let nombre of listeNombres) {
5
  somme += nombre;
6
}

Équivalent avec for

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
let somme = 0;
4
for (let i = 0; i < listeNombres.length; i++) {
5
  somme += listeNombres[i];
6
}

ExempleSomme des nombres impairs

See the Pen cours-js-array-reduce-2 by BCMM-W2D (@bcmm-w2d) on CodePen.

Array : reduce

Équivalent avec fonction fléchée

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const somme = listeNombres.reduce((somme, nombre) => nombre % 2 ? somme + nombre : somme, 0);

Équivalent avec forEach

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
let somme = 0;
4
listeNombres.forEach(function (nombre) {
5
  somme += (nombre % 2) ? nombre : 0;
6
});

Équivalent avec for of

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
let somme =0;
4
for (let nombre of listeNombres) {
5
  somme += (nombre % 2) ? nombre : 0;
6
}

Équivalent avec for

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
let somme = 0;
4
for (let i = 0; i < listeNombres.length; i++) {
5
  somme += (listeNombres[i] % 2) ? listeNombres[i] : 0;
6
}

ExempleCombien des nombres impairs

See the Pen cours-js-array-reduce-3 by BCMM-W2D (@bcmm-w2d) on CodePen.

Array : reduce

Équivalent avec fonction fléchée

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const cpt = listeNombres.reduce((cpt, nombre) => cpt + (nombre % 2), 0);

Équivalent avec forEach

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
let cpt = 0;
4
listeNombres.forEach(function (nombre) {
5
  cpt += nombre % 2;
6
});

Équivalent avec for of

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
let cpt = 0;
4
for (let nombre of listeNombres) {
5
  cpt += nombre % 2;
6
}

Équivalent avec for

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
let cpt = 0;
4
for (let i = 0; i < listeNombres.length; i++) {
5
  cpt += listeNombres[i] % 2;
6
}

ExempleSomme des longueurs des mots

See the Pen cours-js-array-reduce-4 by BCMM-W2D (@bcmm-w2d) on CodePen.

Array : reduce

Équivalent avec fonction fléchée

1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
const somme = listeMots.reduce((somme, mot) => somme + mot.length, 0);

Équivalent avec forEach

1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
let somme = 0;
4
listeMots.forEach(function (mot) {
5
  somme += mot.length;
6
});

Équivalent avec for of

1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
let somme = 0;
4
for (let mot of listeMots) {
5
  somme += mot.length;
6
}

Équivalent avec for

1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
let somme = 0;
4
for (let i = 0; i < listeMots.length; i++) {
5
  somme += listeMots[i].length;
6
}

ExempleCombien de majeurs d'une liste de tableaux associatifs (objet)

See the Pen cours-js-array-reduce-5 by BCMM-W2D (@bcmm-w2d) on CodePen.

Array : reduce

Équivalent avec fonction fléchée

1
const listePersonnes = [
2
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
3
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
4
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
5
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
6
];
7
8
const cpt = listePersonnes.reduce((cpt, personne) => personne.age >= 18 ? ++cpt : cpt, 0);

++cpt : attention, il faut pré-incrémenter sinon cpt est augmenté de 1 qu'après avoir été retourné.

Équivalent avec forEach

1
const listePersonnes = [
2
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
3
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
4
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
5
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
6
];
7
8
let cpt = 0;
9
listePersonnes.forEach(function (personne) {
10
  if(personne.age >= 18) cpt++;
11
});

cpt++ : ici la post-incrémentation peut fonctionner.

Équivalent avec for of

1
const listePersonnes = [
2
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
3
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
4
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
5
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
6
];
7
8
let cpt = 0;
9
for (let personne of listePersonnes) {
10
  if(personne.age >= 18) cpt++;
11
}

Équivalent avec for

1
const listePersonnes = [
2
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
3
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
4
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
5
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
6
];
7
let cpt = 0;
8
for (let i = 0; i < listePersonnes.length; i++) {
9
  if(listePersonnes[i].age >= 18) cpt++;
10
}

AttentionValeur initiale

Si vous ne mettez pas de valeur initiale, c'est la première valeur du tableau qui est utilisée. La boucle de la méthode commencera donc sur la deuxième valeur.

See the Pen cours-js-array-reduce-6 by BCMM-W2D (@bcmm-w2d) on CodePen.

Array : reduce

Cette fonction retourne 10 : 5 + 0 + 1 + 1 + 1 + 1 + 0 + 0 + 1 + 0 = 10