Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Array : méthode statique from()
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.
La méthode statiqueArray.from() crée une nouvelle instance d'Array (copie superficielle) à partir d'unobjet itérable ou d'unobjet semblable à un tableau.
Exemple interactif
console.log(Array.from("toto"));// Sortie attendue : Array ["f", "o", "o"]console.log(Array.from([1, 2, 3], (x) => x + x));// Sortie attendue : Array [2, 4, 6]Syntaxe
Array.from(items)Array.from(items, mapFn)Array.from(items, mapFn, thisArg)Paramètres
itemsUn objet itérable ou un objet semblable à un tableau à convertir en un tableau.
mapFnFacultatifUne fonction appelée sur chaque élément du tableau. Si elle est fournie, chaque valeur à ajouter au tableau est d'abord transmise à cette fonction, et la valeur de retour de
mapFnest ajoutée au tableau à la place. La fonction est appelée avec les arguments suivants :thisArgFacultatifLa valeur à utiliser comme
thislors de l'exécution de la fonctionmapFn.
Valeur de retour
Une nouvelle instance deArray.
Description
Array.from() permet de créer des tableaux à partir :
- d'objets itérables (des objets comme
MapetSet) ; ou, si l'objet n'est pas itérable, - d'objets semblables à des tableaux (objets avec une propriété
lengthet des éléments indexés).
Pour convertir un objet ordinaire qui n'est ni itérable ni semblable à un tableau en un tableau (en énumérant ses clés, valeurs ou les deux), utilisezObject.keys(),Object.values() ouObject.entries(). Pour convertir unobjet itérable asynchrone en un tableau, utilisezArray.fromAsync().
Array.from() ne crée jamais de tableau creux. Si l'objetitems n'a pas certaines propriétés d'index, elles deviennentundefined dans le nouveau tableau.
Array.from() possède un paramètre optionnelmapFn, qui permet d'exécuter une fonction sur chaque élément du tableau en cours de création, de façon similaire àmap(). Plus précisément,Array.from(obj, mapFn, thisArg) a le même résultat queArray.from(obj).map(mapFn, thisArg), sauf qu'il ne crée pas de tableau intermédiaire, etmapFn ne reçoit que deux arguments (element,index) sans le tableau complet, car celui-ci est encore en construction.
Note :Ce comportement est particulièrement important pour lestableaux typés, car le tableau intermédiaire aurait nécessairement des valeurs tronquées pour correspondre au type approprié.Array.from() est implémenté pour avoir la même signature queTypedArray.from().
La méthodeArray.from() est une méthode de fabrique générique. Par exemple, si une sous-classe d'Array hérite de la méthodefrom(), la méthode héritée retournera de nouvelles instances de la sous-classe au lieu d'instances d'Array. En fait, la valeur dethis peut être n'importe quelle fonction constructeur qui accepte un seul argument représentant la longueur du nouveau tableau. Lorsqu'un objet itérable est passé commeitems, le constructeur est appelé sans argument ; lorsqu'un objet semblable à un tableau est passé, le constructeur est appelé avec lalongueur normalisée de l'objet. La longueur finale sera à nouveau définie à la fin de l'itération. Si la valeur dethis n'est pas une fonction constructeur, le constructeur natifArray est utilisé à la place.
Exemples
Tableau à partir d'une chaîne de caractères
Array.from("toto");// [ "t", "o", "t", "o" ]Tableau à partir d'un ensemble
const collection = new Set(["toto", "tata", "tati", "toto"]);Array.from(collection);// [ "toto", "tata", "tati" ]Tableau à partir d'une table de correspondance
const map = new Map([ [1, 2], [2, 4], [4, 8],]);Array.from(map);// [[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'];Tableau à partir d'uneNodeList
// Créer un tableau à partir d'une propriété des éléments du DOMconst images = document.querySelectorAll("img");const sources = Array.from(images, (image) => image.src);const insecureSources = sources.filter((link) => link.startsWith("http://"));Tableau à partir d'un objet semblable à un tableau (arguments)
function f() { return Array.from(arguments);}f(1, 2, 3);// [ 1, 2, 3 ]Utiliser des fonctions fléchées etArray.from()
// Utiliser une fonction fléchée comme fonction de transformation pour// manipuler les élémentsArray.from([1, 2, 3], (x) => x + x);// [2, 4, 6]// Générer une séquence de nombres// Comme le tableau est initialisé avec `undefined` à chaque position,// la valeur de `v` ci-dessous sera `undefined`Array.from({ length: 5 }, (v, i) => i);// [0, 1, 2, 3, 4]Générateur de séquence (intervalle)
// Fonction génératrice de séquence (souvent appelée « intervalle », cf. Python, Clojure, etc.)const range = (start, stop, step) => Array.from( { length: Math.ceil((stop - start) / step) }, (_, i) => start + i * step, );// Générer une séquence de nombres de 0 (inclus) à 5 (exclus), en incrémentant de 1range(0, 5, 1);// [0, 1, 2, 3, 4]// Générer une séquence de nombres de 1 (inclus) à 10 (exclus), en incrémentant de 2range(1, 10, 2);// [1, 3, 5, 7, 9]// Générer l'alphabet latin en profitant du fait qu'il soit ordonné comme une séquencerange("A".charCodeAt(0), "Z".charCodeAt(0) + 1, 1).map((x) => String.fromCharCode(x),);// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]Utiliserfrom() avec d'autres fonctions constructrices que la fonction constructeur de tableau
La méthodefrom() peut être appelée sur n'importe quelle fonction constructeur qui accepte un seul argument représentant la longueur du nouveau tableau.
function NotArray(len) { console.log("NotArray appelé avec la longueur", len);}// Objet itérableconsole.log(Array.from.call(NotArray, new Set(["toto", "tata", "tati"])));// NotArray appelé avec la longueur undefined// NotArray { '0': 'toto', '1': 'tata', '2': 'tati', length: 3 }// Objet semblable à un tableauconsole.log(Array.from.call(NotArray, { length: 1, 0: "toto" }));// NotArray appelé avec la longueur 1// NotArray { '0': 'toto', length: 1 }Lorsque la valeur dethis n'est pas un constructeur, un objetArray ordinaire est retourné.
console.log(Array.from.call({}, { length: 1, 0: "toto" })); // [ 'toto' ]Spécifications
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-array.from |
Compatibilité des navigateurs
Voir aussi
- Guide des collections indexées
- L'objet global
Array - La méthode
Array() - La méthode
Array.of() - La méthode
Array.fromAsync() - La méthode
Array.prototype.map() - La méthode
TypedArray.from() - Prothèse d'émulation de
Array.fromdanscore-js(angl.) - Prothèse d'émulation es-shims de
Array.from(angl.)