files/fr/web/javascript/reference/global_objects/array/flatmap/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

---
title: Array.prototype.flatMap()
slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
tags:
  - Array
  - JavaScript
  - Méthode
  - Prototype
  - Reference
translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
original_slug: Web/JavaScript/Reference/Objets_globaux/Array/flatMap
---
<div>{{JSRef}}</div>

<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>

<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>

<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>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
    // return element for new_array
}</var>[, <var>thisArg</var>])</pre>

<h3 id="Paramètres">Paramètres</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>La fonction qui produit un élément du nouveau tableau et qui prend trois arguments :
 <dl>
  <dt></dt>
  <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>

<h3 id="Valeur_de_retour">Valeur de retour</h3>

<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>

<h2 id="Description">Description</h2>

<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>

<h2 id="Exemples">Exemples</h2>

<h3 id="map_et_flatMap"><code>map()</code> et <code>flatMap()</code></h3>

<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];

arr1.map(</span></span></span></span></span>x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
// [[2], [4], [6], [8]]

arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
// [2, 4, 6, 8]</span></span></span></span></span>

// seul un niveau est aplati
arr1.flatMap(x =&gt; [[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>

<pre class="brush: js">let tableau1 = ["Coucou comment", "", "ça va ?"];

tableau1.map(x =&gt; x.split(" "));
// [["Coucou", "comment"], [""], ["ça", "va", "?"]]

tableau1.flatMap(x =&gt; 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>

<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>

<h2 id="Équivalent">Équivalent</h2>

<h3 id="reduce_et_concat"><code>reduce()</code> et <code>concat()</code></h3>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> arr <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">;</span>

arr<span class="punctuation token">.</span><span class="function token">flatMap</span><span class="punctuation token">(</span>x <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[x, </span>x <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// est équivalent à</span>
arr<span class="punctuation token">.</span><span class="function token">reduce</span><span class="punctuation token">(</span><span class="punctuation token">(</span>acc<span class="punctuation token">,</span> x<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> acc<span class="punctuation token">.</span><span class="function token">concat</span><span class="punctuation token">(</span><span class="punctuation token">[x, </span>x <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// [1, 2, 2, 4, 3, 6, 4, 8]</span></code></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>

<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.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>