diff options
Diffstat (limited to 'files/fr/web/javascript/reference/global_objects/array/flatmap')
| -rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/flatmap/index.md | 141 |
1 files changed, 65 insertions, 76 deletions
diff --git a/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md index 4117829f18..1c95114d1d 100644 --- a/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md @@ -10,111 +10,100 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap original_slug: Web/JavaScript/Reference/Objets_globaux/Array/flatMap --- -<div>{{JSRef}}</div> +{{JSRef}} -<p>La méthode <code><strong>flatMap()</strong></code> permet d'appliquer une fonction à chaque élément du tableau puis d'aplatir le résultat en un tableau. Cela correspond à l'enchaînement de {{jsxref("Array.prototype.map()")}} suivi de {{jsxref("Array.prototype.flat()")}} de profondeur 1. <code>flatMap</code> est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement.</p> +La méthode **`flatMap()`** permet d'appliquer une fonction à chaque élément du tableau puis d'aplatir le résultat en un tableau. Cela correspond à l'enchaînement de {{jsxref("Array.prototype.map()")}} suivi de {{jsxref("Array.prototype.flat()")}} de profondeur 1. `flatMap` est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { - // return element for new_array -}</var>[, <var>thisArg</var>])</pre> + var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { + // return element for new_array + }[, thisArg]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>callback</code></dt> - <dd>La fonction qui produit un élément du nouveau tableau et qui prend trois arguments : - <dl> - <dt><code>currentValue</code></dt> - <dd>La valeur du tableau qui est traitée.</dd> - <dt><code>index</code>{{optional_inline}}</dt> - <dd>L'indice de l'élément du tableau qui est traitée.</dd> - <dt><code>array</code>{{optional_inline}}</dt> - <dd>Le tableau sur lequel <code>flatMap</code> a été appelée.</dd> - </dl> - </dd> - <dt><code>thisArg</code>{{optional_inline}}</dt> - <dd>La valeur à utiliser comme contexte <code>this</code> lors de l'exécution de <code>callback</code>.</dd> -</dl> +- `callback` -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : La fonction qui produit un élément du nouveau tableau et qui prend trois arguments : -<p>Un nouveau tableau composé d'éléments résultants de la fonction de rappel (<em>callback</em>) et aplati d'un niveau de profondeur.</p> + - `currentValue` + - : La valeur du tableau qui est traitée. + - `index`{{optional_inline}} + - : L'indice de l'élément du tableau qui est traitée. + - `array`{{optional_inline}} + - : Le tableau sur lequel `flatMap` a été appelée. -<h2 id="Description">Description</h2> +- `thisArg`{{optional_inline}} + - : La valeur à utiliser comme contexte `this` lors de l'exécution de `callback`. -<p>Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode <code>flatMap()</code> est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1.</p> +### Valeur de retour -<h2 id="Exemples">Exemples</h2> +Un nouveau tableau composé d'éléments résultants de la fonction de rappel (_callback_) et aplati d'un niveau de profondeur. -<h3 id="map_et_flatMap"><code>map()</code> et <code>flatMap()</code></h3> +## Description -<pre class="brush: js">var arr1 = [1, 2, 3, 4]; +Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode `flatMap()` est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1. -arr1.map(x => [x * 2]); +## Exemples + +### `map()` et `flatMap()` + +```js +var arr1 = [1, 2, 3, 4]; + +arr1.map(x => [x * 2]); // [[2], [4], [6], [8]] -arr1.flatMap(x => [x * 2]); +arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8] // seul un niveau est aplati -arr1.flatMap(x => [[x * 2]]); +arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]] -</pre> +``` -<p>On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases :</p> +On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases : -<pre class="brush: js">let tableau1 = ["Coucou comment", "", "ça va ?"]; +```js +let tableau1 = ["Coucou comment", "", "ça va ?"]; -tableau1.map(x => x.split(" ")); +tableau1.map(x => x.split(" ")); // [["Coucou", "comment"], [""], ["ça", "va", "?"]] -tableau1.flatMap(x => x.split(" ")); +tableau1.flatMap(x => x.split(" ")); // ["Coucou", "comment", "", "ça", "va", "?"] -</pre> +``` -<p>On notera que la longueur de la liste obtenue avec <code>flatMap</code> est différente de la longueur de la liste originale.</p> +On notera que la longueur de la liste obtenue avec `flatMap` est différente de la longueur de la liste originale. -<pre>//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre> + //=> [1, 2, 3, 4, 5, 6, 7, 8, 9] -<h2 id="Équivalent">Équivalent</h2> +## Équivalent -<h3 id="reduce_et_concat"><code>reduce()</code> et <code>concat()</code></h3> +### `reduce()` et `concat()` -<pre class="brush: js">var arr = [1, 2, 3, 4]; +```js +var arr = [1, 2, 3, 4]; -arr.flatMap(x => [x, x * 2]); +arr.flatMap(x => [x, x * 2]); // est équivalent à -arr.reduce((acc, x) => acc.concat([x, x * 2]), []); -// [1, 2, 2, 4, 3, 6, 4, 8]</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><a href="https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flatmap">ECMAScript 2019</a></td> - <td>Finalisé</td> - <td>Proposition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array.prototype.flat()")}}</li> - <li>{{jsxref("Array.prototype.map()")}}</li> - <li>{{jsxref("Array.prototype.reduce()")}}</li> - <li>{{jsxref("Array.prototype.concat()")}}</li> -</ul> +arr.reduce((acc, x) => acc.concat([x, x * 2]), []); +// [1, 2, 2, 4, 3, 6, 4, 8] +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------- | -------- | -------------------- | +| [ECMAScript 2019](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flatmap) | Finalisé | Proposition initiale | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.flatMap")}} + +## Voir aussi + +- {{jsxref("Array.prototype.flat()")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("Array.prototype.reduce()")}} +- {{jsxref("Array.prototype.concat()")}} |