---
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 =&gt; x + x);
// [2, 4, 6]


// Pour générer une séquence de nombres
Array.from({length: 5}, (v, k) =&gt; 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>