From bf8e099b9c8b3c60d60b3712b4fc97b052c39887 Mon Sep 17 00:00:00 2001 From: julieng Date: Tue, 3 Aug 2021 08:03:23 +0200 Subject: convert content to md --- .../reference/global_objects/array/reduce/index.md | 437 ++++++++++----------- 1 file changed, 214 insertions(+), 223 deletions(-) (limited to 'files/fr/web/javascript/reference/global_objects/array/reduce') diff --git a/files/fr/web/javascript/reference/global_objects/array/reduce/index.md b/files/fr/web/javascript/reference/global_objects/array/reduce/index.md index 6ec6af3488..183efdeb71 100644 --- a/files/fr/web/javascript/reference/global_objects/array/reduce/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/reduce/index.md @@ -11,225 +11,231 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reduce --- -
{{JSRef}}
+{{JSRef}} -

La méthode reduce() applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'une liste (de la gauche vers la droite) afin de la réduire à une seule valeur.

+La méthode **`reduce()`** applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'une liste (de la gauche vers la droite) afin de la réduire à une seule valeur. -
{{EmbedInteractiveExample("pages/js/array-reduce.html")}}
+{{EmbedInteractiveExample("pages/js/array-reduce.html")}} -

Syntaxe

+## Syntaxe -
arr.reduce(callback)
-arr.reduce(callback, valeurInitiale)
+ arr.reduce(callback) + arr.reduce(callback, valeurInitiale) -

Paramètres

+### Paramètres -
-
callback
-
La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune valeurInitiale n'est fournie), elle prend quatre arguments en entrée : -
-
accumulateur
-
La valeur précédemment retournée par le dernier appel du callback, ou valeurInitiale, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels
-
valeurCourante
-
La valeur de l'élément courant actuellement manipulé dans le tableau.
-
index{{optional_inline}}
-
L'index de l'élément courant actuellement manipulé dans le tableau.
-
array{{optional_inline}}
-
Le tableau sur lequel on a appelé la méthode reduce().
-
-
-
valeurInitiale{{optional_inline}}
-
Une valeur utilisée comme premier argument lors du premier appel de la fonction callback. Si aucune valeur initiale n'est fournie, le premier élément du tableau est utilisé (et la boucle de traitement ne le parcourera pas). Si on appelle reduce() sur un tableau vide sans fournir de valeur initiale, on aura une erreur.
-
+- `callback` -

Valeur de retour

+ - : La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune `valeurInitiale` n'est fournie), elle prend quatre arguments en entrée : -

La valeur obtenue grâce à la fonction de réduction.

+ - `accumulateur` + - : La valeur précédemment retournée par le dernier appel du callback, ou `valeurInitiale`, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels + - `valeurCourante` + - : La valeur de l'élément courant actuellement manipulé dans le tableau. + - `index`{{optional_inline}} + - : L'index de l'élément courant actuellement manipulé dans le tableau. + - `array`{{optional_inline}} + - : Le tableau sur lequel on a appelé la méthode `reduce()`. -

Description

+- `valeurInitiale`{{optional_inline}} + - : Une valeur utilisée comme premier argument lors du premier appel de la fonction `callback`. Si aucune valeur initiale n'est fournie, le premier élément du tableau est utilisé (et la boucle de traitement ne le parcourera pas). Si on appelle `reduce()` sur un tableau vide sans fournir de valeur initiale, on aura une erreur. -

reduce() exécute la fonction callback une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction callback utilise quatre arguments :

+### Valeur de retour -
    -
  1. L'accumulateur (la valeur retournée par le précédent appel de la fonction callback), ou la valeur initiale s'il sagit du premier appel ;
    2. -
  2. la valeur de l'élément courant ;
    3. -
  3. l'index de l'élément courant ;
    4. -
  4. le tableau parcouru par la méthode.
    5. -
+La valeur obtenue grâce à la fonction de réduction. -

La première fois que la fonction callback est appelée, valeurInitiale et valeurCourante peuvent correspondre à un ou deux éléments. Si valeurInitiale est fournie dans l'appel de reduce(), alors accumulateur sera égale à valeurInitiale et valeurCourante sera égale à la première valeur de la liste. Si valeurInitiale n'est pas fournie, alors accumulateur sera égale à la première valeur de la liste, et valeurCourante sera alors égale à la seconde.

+## Description -

Autrement dit, si valeurInitiale n'est pas fournie, reduce exécutera la fonction de rappel à partir de l'indice 1 et la première valeur du tableau (d'indice 0) sera utilisée pour valeurInitiale.

+`reduce()` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction `callback` utilise quatre arguments : -

En considérant le code suivant :

+1. L'accumulateur (la valeur retournée par le précédent appel de la fonction `callback`), ou la valeur initiale s'il sagit du premier appel ; +2. la valeur de l'élément courant ; +3. l'index de l'élément courant ; +4. le tableau parcouru par la méthode. -
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+La première fois que la fonction `callback` est appelée, `valeurInitiale` et `valeurCourante` peuvent correspondre à un ou deux éléments. Si `valeurInitiale` est fournie dans l'appel de `reduce()`, alors `accumulateur` sera égale à `valeurInitiale` et `valeurCourante` sera égale à la première valeur de la liste. Si `valeurInitiale` n'est pas fournie, alors `accumulateur` sera égale à la première valeur de la liste, et `valeurCourante` sera alors égale à la seconde.
+
+Autrement dit, si `valeurInitiale` n'est pas fournie, `reduce` exécutera la fonction de rappel à partir de l'indice 1 et la première valeur du tableau (d'indice 0) sera utilisée pour `valeurInitiale`.
+
+En considérant le code suivant :
+
+```js
+[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
   return accumulateur + valeurCourante;
 });
-
+``` -

La fonction callback sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :

+La fonction `callback` sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel011[0,1,2,3,4]1
deuxième appel122[0,1,2,3,4]3
troisième appel333[0,1,2,3,4]6
quatrième appel644[0,1,2,3,4]10
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel011[0,1,2,3,4]1
deuxième appel122[0,1,2,3,4]3
troisième appel333[0,1,2,3,4]6
quatrième appel644[0,1,2,3,4]10
-

La valeur retournée par reduce() sera alors celle du dernier appel de la callback (ici 10).

+La valeur retournée par `reduce()` sera alors celle du dernier appel de la callback (ici `10`). -

Il est aussi possible d'utiliser une {{jsxref("Fonctions/Fonctions_fléchées","fonction fléchée","",1)}} au lieu d'une fonction classique. Le code suivant, par exemple, produit le même résultat que l'exemple précédent :

+Il est aussi possible d'utiliser une {{jsxref("Fonctions/Fonctions_fléchées","fonction fléchée","",1)}} au lieu d'une fonction classique. Le code suivant, par exemple, produit le même résultat que l'exemple précédent : -
[0, 1, 2, 3, 4].reduce(
-  (accumulateur, valeurCourante) => accumulateur + valeurCourante;
-);
+```js +[0, 1, 2, 3, 4].reduce( + (accumulateur, valeurCourante) => accumulateur + valeurCourante; +); +``` -

Si on fournit une valeur initiale comme second argument à l'appel de reduce(), le résultat sera alors le suivant :

+Si on fournit une valeur initiale comme second argument à l'appel de `reduce()`, le résultat sera alors le suivant : -
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+```js
+[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
   return accumulateur + valeurCourante;
 }, 10);
-
+``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel1000[0,1,2,3,4]10
deuxième appel1011[0,1,2,3,4]11
troisième appel1122[0,1,2,3,4]13
quatrième appel1333[0,1,2,3,4]16
cinquième appel1644[0,1,2,3,4]20
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel1000[0,1,2,3,4]10
deuxième appel1011[0,1,2,3,4]11
troisième appel1122[0,1,2,3,4]13
quatrième appel1333[0,1,2,3,4]16
cinquième appel1644[0,1,2,3,4]20
-

Ici, la valeur renvoyée par reduce() serait 20.

+Ici, la valeur renvoyée par `reduce()` serait `20`. -

Exemples

+## Exemples -

Additionner toutes les valeurs d'un tableau

+### Additionner toutes les valeurs d'un tableau -
var total = [0, 1, 2, 3].reduce((a, b)=> a + b,0);
+```js
+var total = [0, 1, 2, 3].reduce((a, b)=> a + b,0);
 // total == 6
-
+``` -

Additionner les valeurs d'une propriétés pour un tableau d'objets

+### Additionner les valeurs d'une propriétés pour un tableau d'objets -

Pour additionner les valeurs d'une propriété donnée des objets d'un tableau, il sera nécessaire de fournir une valeur initiale afin que tous les éléments soient parcourus :

+Pour additionner les valeurs d'une propriété donnée des objets d'un tableau, il sera nécessaire de fournir une valeur initiale afin que tous les éléments soient parcourus : -
var valeurInitiale = 0;
+```js
+var valeurInitiale = 0;
 var somme = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulateur, valeurCourante) {
     return accumulateur + valeurCourante.x;
 }, valeurInitiale);
 
 console.log(somme); // affiche 6 dans la console
-
+``` -

On peut également écrire une version plus concise avec les fonctions fléchées :

+On peut également écrire une version plus concise avec les fonctions fléchées : -
var valeurInitiale = 0;
+```js
+var valeurInitiale = 0;
 var somme = [{x: 1}, {x:2}, {x:3}].reduce(
-    (accumulateur, valeurCourante) => accumulateur + valeurCourante.x
+    (accumulateur, valeurCourante) => accumulateur + valeurCourante.x
     , valeurInitiale
 );
 
-console.log(somme); // affiche 6 dans la console
+console.log(somme); // affiche 6 dans la console +``` -

Aplatir une liste de listes

+### Aplatir une liste de listes -
var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
+```js
+var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
     return a.concat(b);
 });
 // applati vaut [0, 1, 2, 3, 4, 5]
-
+``` -

Utiliser le paramètre valeurInitiale

+### Utiliser le paramètre `valeurInitiale` -
var amis = [
+```js
+var amis = [
   { "nom": "Quentin", "livres": ["City Hall", "Harry Potter"]},
   { "nom": "Alice", "livres": ["L'Avare", "Les Fleurs du Mal"]}
 ]
@@ -239,56 +245,59 @@ var tousLivres = amis.reduce(function(prev, curr) {
 }, ["Perceval"]);
 
 // tousLivres = ["Perceval", "City Hall", "Harry Potter",
-//               "L'Avare", "Les Fleurs du Mal"]
+// "L'Avare", "Les Fleurs du Mal"] +``` -

Exécuter une suite de promesses stockées dans un tableau

+### Exécuter une suite de promesses stockées dans un tableau -
/**
+```js
+/**
  * Exécuter un enchaînement de promesses à partir d'un tableau
  *
  * @param {array} arr - un tableau de promesses
  * @return {Object} un objet Promise
  */
 function runPromiseInSequense(arr) {
-  return arr.reduce((promiseChain, currentPromise) => {
-    return promiseChain.then((chainedResult) => {
+  return arr.reduce((promiseChain, currentPromise) => {
+    return promiseChain.then((chainedResult) => {
       return currentPromise(chainedResult)
-        .then((res) => res)
+        .then((res) => res)
     })
   }, Promise.resolve());
 }
 
 // promise function 1
 function p1() {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
     resolve(5);
   });
 }
 
 // promise function 2
 function p2(a) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
     resolve(a * 2);
   });
 }
 
 // promise function 3
 function p3(a) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
     resolve(a * 3);
   });
 }
 
 const promiseArr = [p1, p2, p3];
 runPromiseInSequense(promiseArr)
-  .then((res) => {
+  .then((res) => {
     console.log(res);   // 30
   });
-
+``` -

Regrouper des objets selon une propriété

+### Regrouper des objets selon une propriété -
var personnes = [
+```js
+var personnes = [
   { nom: "Alice", age: 21 },
   { nom: "Bob", age: 20 },
   { nom: "Charlie", age: 20 }
@@ -314,18 +323,19 @@ var personnesParAge = groupBy(personnes, "age");
 //    ],
 //    21: [{ nom: "Alice", age: 21 }]
 // }
-
+``` -

Composition de fonctions

+### Composition de fonctions -
// Les briques de base que nous allons composer
-const double = x => x + x;
-const triple = x => 3 * x;
-const quadruple = x => 4 * x;
+```js
+// Les briques de base que nous allons composer
+const double = x => x + x;
+const triple = x => 3 * x;
+const quadruple = x => 4 * x;
 
 // Une fonction qui permet d'appliquer une composition
-const pipe = (...functions) => input => functions.reduce(
-    (acc, fn) => fn(acc),
+const pipe = (...functions) => input => functions.reduce(
+    (acc, fn) => fn(acc),
     input
 );
 
@@ -340,19 +350,22 @@ multiply6(6); // 36
 multiply9(9); // 81
 multiply16(16); // 256
 multiply24(10); // 240
-
+``` -

Retirer les doublons d'un tableau

+### Retirer les doublons d'un tableau -

Avec ECMAScript 2015 (ES6)

+#### Avec ECMAScript 2015 (ES6) -
let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+```js
+let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
 let tableauSansDoublon = Array.from(new Set(tableauAvecDoublons));
-console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
+console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6] +``` -

Avec reduce()

+#### Avec `reduce()` -
var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+```js
+var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
 var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) {
   if(acc.indexOf(valCourante) === -1) {
     acc.push(valCourante);
@@ -361,42 +374,20 @@ var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) {
 }, []);
 
 console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
-
+``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}{{Spec2('ES5.1')}}Définition initiale.
- Implémenté dans JavaScript 1.8
{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ESDraft')}}
+| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | --------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémenté dans JavaScript 1.8 | +| {{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}} | {{Spec2('ESDraft')}} | | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("javascript.builtins.Array.reduce")}}

+{{Compat("javascript.builtins.Array.reduce")}} -

Voir aussi

+## Voir aussi - +- {{jsxref("Array.prototype.reduceRight()")}} -- cgit v1.2.3-54-g00ecf