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
|
---
title: Array.from()
slug: Web/JavaScript/Reference/Global_Objects/Array/from
tags:
- Array
- ECMAScript 2015
- JavaScript
- Méthode
- Reference
- polyfill
translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
original_slug: Web/JavaScript/Reference/Objets_globaux/Array/from
---
<div>{{JSRef}}</div>
<p>La méthode <code><strong>Array.from()</strong></code> permet de créer une nouvelle instance d'<code>Array</code> (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.</p>
<div>{{EmbedInteractiveExample("pages/js/array-from.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">Array.from(arrayLike [, fonctionMap[, thisArg]])</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>arrayLike</code></dt>
<dd>Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'<code>Array</code>.</dd>
<dt><code>fonctionMap</code> {{optional_inline}}</dt>
<dd>Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.</dd>
<dt><code>thisArg</code> {{optional_inline}}</dt>
<dd>Argument optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>fonctionMap</code>.</dd>
</dl>
<h3 id="Valeur_de_retour">Valeur de retour</h3>
<p>Une nouvelle instance de {{jsxref("Array")}}.</p>
<h2 id="Description">Description</h2>
<p><code>Array.from()</code> permet de créer des instances d'<code>Array</code> à partir :</p>
<ul>
<li>d'objets semblables à des tableaux (qui disposent d'une propriété <code>length</code> et d'éléments indexés) ou</li>
<li><a href="/fr/docs/Web/JavaScript/Guide/iterable">d'objets itérables</a> (des objets dont on peut avoir les éléments comme {{jsxref("Map")}} et {{jsxref("Set")}}).</li>
</ul>
<p><code>Array.from()</code> possède un paramètre optionnel <code>fonctionMap</code>, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit<code> Array.from(obj, mapFn, thisArg)</code> correspond exactement à <code>Array.from(obj).map(mapFn, thisArg)</code>, sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les <a href="/fr/docs/JavaScript/Tableaux_typ%C3%A9s">tableaux typés</a> (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).</p>
<p>La propriété <code>length</code> de la méthode <code>from()</code> est 1.</p>
<p>Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme <code>Array.from()</code> sont héritées par les sous-classes d'<code>Array</code> et créent de nouvelles instances de la sous-classe d'<code>Array</code>.</p>
<h2 id="Exemples">Exemples</h2>
<pre class="brush: js">// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau
function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]
// Ça fonctionne avec tous les objets itérables...
// Set
const s = new Set(["toto", "truc", "truc", "bidule"]);
Array.from(s);
// ["toto", "truc", "bidule"]
// Map
const m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
const mapper = new Map([["1", "a"], ["2", "b"]]);
Array.from(mapper.values());
// ["a", "b"]
Array.from(mapper.keys());
// ["1", "2"]
// String
Array.from("toto");
// ["t", "o", "t", "o"]
// En utilisant une fonction fléchée pour remplacer map
// et manipuler des éléments
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
// Pour générer une séquence de nombres
Array.from({length: 5}, (v, k) => k);
// [0, 1, 2, 3, 4]
</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Définition initiale.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("javascript.builtins.Array.from")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{jsxref("Array")}}</li>
<li>{{jsxref("Array.prototype.map()")}}</li>
<li>{{jsxref("TypedArray.from()")}}</li>
</ul>
|
