unslug fr: move

1 files changed, 407 insertions, 0 deletions

diff --git a/files/fr/web/javascript/reference/global_objects/array/reduce/index.html b/files/fr/web/javascript/reference/global_objects/array/reduce/index.html
new file mode 100644
index 0000000000..17b90678b9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/reduce/index.html
@@ -0,0 +1,407 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/reduce
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>reduce()</strong></code> 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.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback</var>)
+<var>arr</var>.reduce(<var>callback</var>, valeurInitiale)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune <code>valeurInitiale</code> n'est fournie), elle prend quatre arguments en entrée :
+ <dl>
+  <dt><code>accumulateur</code></dt>
+  <dd>La valeur précédemment retournée par le dernier appel du callback, ou <code>valeurInitiale</code>, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels</dd>
+  <dt><code>valeurCourante</code></dt>
+  <dd>La valeur de l'élément courant actuellement manipulé dans le tableau.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>L'index de l'élément courant actuellement manipulé dans le tableau.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Le tableau sur lequel on a appelé la méthode <code>reduce()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>valeurInitiale</code>{{optional_inline}}</dt>
+ <dd>Une valeur utilisée comme premier argument lors du premier appel de la fonction <code>callback</code>. 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 <code>reduce()</code> sur un tableau vide sans fournir de valeur initiale, on aura une erreur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur obtenue grâce à la fonction de réduction.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>reduce()</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction <code>callback</code> utilise quatre arguments :</p>
+
+<ol>
+ <li>L'accumulateur (la valeur retournée par le précédent appel de la fonction <code>callback</code>), ou la valeur initiale s'il sagit du premier appel ;</li>
+ <li>la valeur de l'élément courant ;</li>
+ <li>l'index de l'élément courant ;</li>
+ <li>le tableau parcouru par la méthode.</li>
+</ol>
+
+<p>La première fois que la fonction <code>callback</code> est appelée, <code>valeurInitiale</code> et <code>valeurCourante</code> peuvent correspondre à un ou deux éléments. Si <code>valeurInitiale</code> est fournie dans l'appel de <code>reduce()</code>, alors <code>accumulateur</code> sera égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la première valeur de la liste. Si <code>valeurInitiale</code> n'est pas fournie, alors <code>accumulateur</code> sera égale à la première valeur de la liste, et <code>valeurCourante</code> sera alors égale à la seconde.</p>
+
+<p>Autrement dit, si <code>valeurInitiale</code> n'est pas fournie, <code>reduce</code> 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 <code>valeurInitiale</code>.</p>
+
+<p>En considérant le code suivant :</p>
+
+<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+});
+</pre>
+
+<p>La fonction <code>callback</code> sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col"><code>accumulateur</code></th>
+   <th scope="col"><code>valeurCourante</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">valeur retournée</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">premier appel</th>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">deuxième appel</th>
+   <td><code>1</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <th scope="row">troisième appel</th>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <th scope="row">quatrième appel</th>
+   <td><code>6</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La valeur retournée par <code>reduce()</code> sera alors celle du dernier appel de la callback (ici <code>10</code>).</p>
+
+<p>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 :</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce(
+  (accumulateur, valeurCourante) =&gt; accumulateur + valeurCourante;
+);</pre>
+
+<p>Si on fournit une valeur initiale comme second argument à l'appel de <code>reduce()</code>, le résultat sera alors le suivant :</p>
+
+<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+}, 10);
+</pre>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col"><code>accumulateur</code></th>
+   <th scope="col"><code>valeurCourante</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">valeur retournée</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">premier appel</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">deuxième appel</th>
+   <td><code>10</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <th scope="row">troisième appel</th>
+   <td><code>11</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>13</code></td>
+  </tr>
+  <tr>
+   <th scope="row">quatrième appel</th>
+   <td><code>13</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <th scope="row">cinquième appel</th>
+   <td><code>16</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ici, la valeur renvoyée par <code>reduce()</code> serait <code>20</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Additionner_toutes_les_valeurs_dun_tableau">Additionner toutes les valeurs d'un tableau</h3>
+
+<pre class="brush:js">var total = [0, 1, 2, 3].reduce((a, b)=&gt; a + b,0);
+// total == 6
+</pre>
+
+<h3 id="Additionner_les_valeurs_dune_propriétés_pour_un_tableau_dobjets">Additionner les valeurs d'une propriétés pour un tableau d'objets</h3>
+
+<p>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 :</p>
+
+<pre class="brush: 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
+</pre>
+
+<p>On peut également écrire une version plus concise avec les fonctions fléchées :</p>
+
+<pre class="brush: js">var valeurInitiale = 0;
+var somme = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulateur, valeurCourante) =&gt; accumulateur + valeurCourante.x
+    , valeurInitiale
+);
+
+console.log(somme); // affiche 6 dans la console</pre>
+
+<h3 id="Aplatir_une_liste_de_listes">Aplatir une liste de listes</h3>
+
+<pre class="brush: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]
+</pre>
+
+<h3 id="Utiliser_le_paramètre_valeurInitiale">Utiliser le paramètre <code>valeurInitiale</code></h3>
+
+<pre class="brush: js">var amis = [
+  { "nom": "Quentin", "livres": ["City Hall", "Harry Potter"]},
+  { "nom": "Alice", "livres": ["L'Avare", "Les Fleurs du Mal"]}
+]
+
+var tousLivres = amis.reduce(function(prev, curr) {
+  return [...prev, ...curr.livres];
+}, ["Perceval"]);
+
+// tousLivres = ["Perceval", "City Hall", "Harry Potter",
+//               "L'Avare", "Les Fleurs du Mal"]</pre>
+
+<h3 id="Exécuter_une_suite_de_promesses_stockées_dans_un_tableau">Exécuter une suite de promesses stockées dans un tableau</h3>
+
+<pre class="brush: 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) =&gt; {
+    return promiseChain.then((chainedResult) =&gt; {
+      return currentPromise(chainedResult)
+        .then((res) =&gt; res)
+    })
+  }, Promise.resolve());
+}
+
+// promise function 1
+function p1() {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 2);
+  });
+}
+
+// promise function 3
+function p3(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 3);
+  });
+}
+
+const promiseArr = [p1, p2, p3];
+runPromiseInSequense(promiseArr)
+  .then((res) =&gt; {
+    console.log(res);   // 30
+  });
+</pre>
+
+<h3 id="Regrouper_des_objets_selon_une_propriété">Regrouper des objets selon une propriété</h3>
+
+<pre class="brush: js">var personnes = [
+  { nom: "Alice", age: 21 },
+  { nom: "Bob", age: 20 },
+  { nom: "Charlie", age: 20 }
+];
+
+function groupBy(tableauObjets, propriete){
+  return tableauObjets.reduce(function (acc, obj) {
+    var cle = obj[propriete];
+    if(!acc[cle]){
+      acc[cle] = [];
+    }
+    acc[cle].push(obj);
+    return acc;
+  }, {});
+}
+
+var personnesParAge = groupBy(personnes, "age");
+// personnesParAge aura la valeur :
+// {
+//    20: [
+//       { nom: "Bob", age: 20 },
+//       { nom: "Charlie", age: 20 }
+//    ],
+//    21: [{ nom: "Alice", age: 21 }]
+// }
+</pre>
+
+<h3 id="Composition_de_fonctions">Composition de fonctions</h3>
+
+<pre class="brush: js">// Les briques de base que nous allons composer
+const double = x =&gt; x + x;
+const triple = x =&gt; 3 * x;
+const quadruple = x =&gt; 4 * x;
+
+// Une fonction qui permet d'appliquer une composition
+const pipe = (...functions) =&gt; input =&gt; functions.reduce(
+    (acc, fn) =&gt; fn(acc),
+    input
+);
+
+// On crée des fonctions pour multiplier par un facteur donné
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Utilisation
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+</pre>
+
+<h3 id="Retirer_les_doublons_dun_tableau">Retirer les doublons d'un tableau</h3>
+
+<h4 id="Avec_ECMAScript_2015_ES6">Avec ECMAScript 2015 (ES6)</h4>
+
+<pre class="brush: 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]</pre>
+
+<h4 id="Avec_reduce">Avec <code>reduce()</code></h4>
+
+<pre class="brush: 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);
+  }
+  return acc
+}, []);
+
+console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.<br>
+    Implémenté dans JavaScript 1.8</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>