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
|
---
title: Array.prototype.flatMap()
slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
---
<div>{{JSRef}}</div>
<p>Il metodo <code><strong>flatMap()</strong></code> prima mappa ogni elemento eseguendo la funzione passata come parametro, poi appiattisce il risultato in un nuovo array. Il comportamento è identico a una chiamata a {{jsxref("Array.prototype.map","map()")}} seguita da un {{jsxref("Array.prototype.flat","flat()")}} con profondità 1, ma <code>flatMap()</code> in questo caso è la soluzione migliore perché è più efficente delle due chiamate separate.</p>
<p class="hidden">{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
<h2 id="Sintassi">Sintassi</h2>
<pre class="syntaxbox notranslate"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
// restituisci un elemento per il nuovo array
}</var>[, <var>thisArg</var>])</pre>
<h3 id="Parametri">Parametri</h3>
<dl>
<dt><code>callback</code></dt>
<dd>Funzione per produrre un elemento del nuovo Array, prevede a sua volta tre parametri:
<dl>
<dt></dt>
<dt><code>currentValue</code></dt>
<dd>L'elemento che si sta processando.</dd>
<dt><code>index</code>{{optional_inline}}</dt>
<dd>L'indice dell'elemento corrente.</dd>
<dt><code>array</code>{{optional_inline}}</dt>
<dd>L'array che si sta processando con <code>map</code>.</dd>
</dl>
</dd>
<dt><code>thisArg</code>{{optional_inline}}</dt>
<dd>Valore usato come <code>this</code> mentre si esegue la <code>callback</code>.</dd>
</dl>
<h3 id="Risultato">Risultato</h3>
<p>Un nuovo array i cui elementi sono il risultato della chiamata a <code>callback</code>, "appiattiti" ad una profondità di 1</p>
<h2 id="Descrizione">Descrizione</h2>
<p>Guarda {{jsxref("Array.prototype.map()")}} per una descrizione dettagliata della funzione <code>callback</code>. <code>flatMap</code> è identico a una chiamata a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> seguita da una chiamata <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> con una profondità di 1.</p>
<h2 id="Esempi">Esempi</h2>
<h3 id="map_e_flatMap"><code>map()</code> e <code>flatMap()</code></h3>
<pre class="brush: js notranslate">let arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// viene appiattito un solo elemento
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
</pre>
<p>Lo stesso risultato lo si può ottenere anche con la sola chiamata a map, di seguito è riportato un esempio migliore di uso di <code>flatMap</code>.</p>
<p>Viene generata una lista di parole da una lista di frasi.</p>
<pre class="brush: js notranslate">let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]</pre>
<p>Notare che, a differenza di map da solo, la lunghezza dell'output è diversa tra le due chiamate e in particolare il risultato di <code>flatMap</code> non avrà la stessa lunghezza dell'input.</p>
<h3 id="Aggiungere_e_rimuovere_elementi_durante_lesecuzione_di_map">Aggiungere e rimuovere elementi durante l'esecuzione di <code>map()</code></h3>
<p><code>flatMap</code> può essere usato per aggiungere e rimuovere elementi durante l'esecuzione di <code>map</code>. In altre parole, offre la possibilità di mappare <em>molti a molti</em> (processando ogni input separatamente), anziché sempre <em>uno a uno</em>. In questo senso lavora come opposto di <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>. Basta restituire un array con un solo elemento per mantenere l'oggetto invariato, un array con più elementi, invece, aggiungerà questi al risultato, un array vuoto per rimuovere l'elemento corrente.</p>
<pre class="brush: js notranslate">// Per rimuovere i numeri negativi e dividere i numeri dispari in un numero pari e un 1
let a = [5, 4, -3, 20, 17, -33, -4, 18]
// |\ \ x | | \ x x |
// [4,1, 4, 20, 16, 1, 18]
a.flatMap( (n) =>
(n < 0) ? [] :
(n % 2 == 0) ? [n] :
[n-1, 1]
)
// expected output: [4, 1, 4, 20, 16, 1, 18]
</pre>
<h2 id="Alternative">Alternative</h2>
<h3 id="reduce_and_concat"><code>reduce()</code> and <code>concat()</code></h3>
<pre class="brush: js notranslate">var arr = [1, 2, 3, 4];
arr.flatMap(x => [x, x * 2]);
// si ottiene lo stesso risultato con
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]
</pre>
<p>Notare che questa soluzione non è efficente e non dovrebbe essere usata per array di grandi dimensioni: in ogni iterazione viene creato un nuovo array temporaneo che dovrà essere deallocato dal garbae collector, e copia gli elementi dall'array corrente (<code>acc</code>), in un nuovo array ad ogni iterazione invece di aggiungerli ad uno preesistente.</p>
<div class="hidden">
<p>Please do not add polyfills on this article. For reference, please check: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
</div>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specifica</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.prototype.flatmap', 'Array.prototype.flatMap')}}</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilità_browser">Compatibilità browser</h2>
<div>
<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
</div>
<h2 id="Vedi_anche">Vedi anche</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>
|
