La méthode Array.from() permet de créer une nouvelle instance d'Array (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.

Syntaxe

Array.from(arrayLike [, fonctionMap[, thisArg]])

Paramètres

arrayLike
Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'Array.
fonctionMap Facultatif
Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.
thisArg Facultatif
Argument optionnel. La valeur à utiliser pour this lors de l'exécution de la fonction fonctionMap.

Valeur de retour

Une nouvelle instance de Array.

Description

Array.from() permet de créer des instances d'Array à partir :

  • d'objets semblables à des tableaux (qui disposent d'une propriété length et d'éléments indexés) ou
  • d'objets itérables (des objets dont on peut avoir les éléments comme Map et Set).

Array.from() possède un paramètre optionnel fonctionMap, qui permet d'exécuter une fonction map sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit Array.from(obj, mapFn, thisArg) correspond exactement à Array.from(obj).map(mapFn, thisArg), sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les tableaux typés (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).

La propriété length de la méthode from() est 1.

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 Array.from() sont héritées par les sous-classes d'Array et créent de nouvelles instances de la sous-classe d'Array.

Exemples

// 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]

Spécifications

Spécification État Commentaires
ECMAScript 2015 (6th Edition, ECMA-262)
La définition de 'Array.from' dans cette spécification.
Standard Définition initiale.
ECMAScript Latest Draft (ECMA-262)
La définition de 'Array.from' dans cette spécification.
Projet

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung InternetNode.js
fromChrome Support complet 45Edge Support complet 12Firefox Support complet 32IE Aucun support NonOpera Support complet OuiSafari Support complet 9WebView Android Support complet 45Chrome Android Support complet OuiFirefox Android Support complet 32Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Ouinodejs Support complet 4.0.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, Acen1991
Dernière mise à jour par : SphinxKnight,