Array.from()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
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.
Exemple interactif
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 fonctionfonctionMap
.
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
etSet
).
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
Specification |
---|
ECMAScript Language Specification # sec-array.from |
Compatibilité des navigateurs
BCD tables only load in the browser