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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: Array.prototype.flat()
slug: Web/JavaScript/Reference/Global_Objects/Array/flat
tags:
- Array
- JavaScript
- Méthode
- Prototype
- Reference
translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
original_slug: Web/JavaScript/Reference/Objets_globaux/Array/flat
---
<div>{{JSRef}}</div>
<p>La méthode <code><strong>flat()</strong></code> permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée.</p>
<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.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 nouveauTableau = monTableau</var>.flat([<var>profondeur</var>]);</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>profondeur</code> {{optional_inline}}</dt>
<dd>Le niveau de profondeur en termes d'imbrication de tableau. Autrement dit, jusqu'à quel niveau d'imbrication un tableau imbriqué doit il être aplati. La valeur par défaut est 1.</dd>
</dl>
<h3 id="Valeur_de_retour">Valeur de retour</h3>
<p>Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="Aplatir_des_tableaux_imbriqués">Aplatir des tableaux imbriqués</h3>
<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
</pre>
<h3 id="Aplatir_et_combler_les_trous">Aplatir et combler les trous</h3>
<p>La méthode <code>flat()</code> permet également de retirer les « trous » d'un tableau :</p>
<pre class="brush: js">var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]</pre>
<h2 id="Équivalent">Équivalent</h2>
<h3 id="reduce_et_concat"><code>reduce</code> et <code>concat</code></h3>
<pre class="brush: js">var arr = [1, 2, [3, 4]];
// pour un tableau avec un seul niveau de profondeur
arr.flat();
// est équivalent à
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]
// avec la décomposition et les compositions flechées, on peut écrire :
const flat = arr => [].concat(...arr);
</pre>
<h3 id="reduce_concat_isArray_récursivité"><code>reduce</code> + <code>concat</code> + <code>isArray</code> + récursivité</h3>
<pre class="brush: js">var arr = [1, 2, [3, 4, [5, 6]]];
// Pour gérer plusieurs niveaux, on pourra utiliser
// une méthode récursive avec reduce et concat
function flatDeep(arr) {
return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
};
flatDeep(arr);
// [1, 2, 3, 4, 5, 6]
</pre>
<h3 id="Utiliser_une_pile">Utiliser une pile</h3>
<pre class="brush: js">var arr = [1, 2, [3, 4]];
// Version non récursive utilisant une pile
function flatStack(input) {
const stack = [...input];
const res = [];
while (stack.length) {
// On sort une valeur de la pile
const next = stack.pop();
if (Array.isArray(next)) {
// On place les éléments qui sont des tableaux dans
// la pile sans modifier l'entrée
stack.push(...next);
} else {
res.push(next);
}
}
// On inverse le résultat pour revenir
// à l 'ordre de l'entrée
return res.reverse();
}
flatStack(arr);
// [1, 2, 3, 4]
</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.flat">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.flat")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{jsxref("Array.prototype.flatMap()")}}</li>
<li>{{jsxref("Array.prototype.map()")}}</li>
<li>{{jsxref("Array.prototype.reduce()")}}</li>
<li>{{jsxref("Array.prototype.concat()")}}</li>
</ul>
|
