Array : méthode from()

Exemple interactif

console.log(Array.from("foo"));
// 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

items

Un objet itérable ou un objet semblable à un tableau à convertir en un tableau.

mapFn Facultatif

Une 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 mapFn est ajoutée au tableau à la place. La fonction est appelée avec les arguments suivants :

element

L'élément en cours de traitement dans le tableau.

index

L'indice de l'élément en cours de traitement dans le tableau.

thisArg Facultatif

La valeur à utiliser comme this lors de l'exécution de la fonction mapFn.

Valeur de retour

Une nouvelle instance de Array.

Description

Array.from() permet de créer des tableaux à partir :

• d'objets itérables (des objets comme Map et Set) ; ou, si l'objet n'est pas itérable,
• d'objets semblables à des tableaux (objets avec une propriété length et 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), utilisez Object.keys(), Object.values() ou Object.entries(). Pour convertir un objet itérable asynchrone en un tableau, utilisez Array.fromAsync().

Array.from() ne crée jamais de tableau creux. Si l'objet items n'a pas certaines propriétés d'index, elles deviennent undefined dans le nouveau tableau.

Array.from() possède un paramètre optionnel mapFn, 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 que Array.from(obj).map(mapFn, thisArg), sauf qu'il ne crée pas de tableau intermédiaire, et mapFn ne reçoit que deux arguments (element, index) sans le tableau complet, car celui-ci est encore en construction.

La méthode Array.from() est une méthode de fabrique générique. Par exemple, si une sous-classe d'Array hérite de la méthode from(), la méthode héritée retournera de nouvelles instances de la sous-classe au lieu d'instances d'Array. En fait, la valeur de this 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é comme items, le constructeur est appelé sans argument ; lorsqu'un objet semblable à un tableau est passé, le constructeur est appelé avec la longueur normalisée de l'objet. La longueur finale sera à nouveau définie à la fin de l'itération. Si la valeur de this n'est pas une fonction constructeur, le constructeur natif Array est utilisé à la place.

Exemples

Tableau à partir d'une chaîne de caractères

Array.from("foo");
// [ "f", "o", "o" ]

Tableau à partir d'un ensemble

const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

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'une NodeList

// Créer un tableau à partir d'une propriété des éléments du DOM
const 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 et Array.from()

// Utiliser une fonction fléchée comme fonction de transformation pour
// manipuler les éléments
Array.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 1
range(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 2
range(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équence
range("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"]

Utiliser from() avec d'autres fonctions constructrices que la fonction constructeur de tableau

La méthode from() 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érable
console.log(Array.from.call(NotArray, new Set(["toto", "tata", "baz"])));
// NotArray appelé avec la longueur undefined
// NotArray { '0': 'toto', '1': 'tata', '2': 'baz', length: 3 }

// Objet semblable à un tableau
console.log(Array.from.call(NotArray, { length: 1, 0: "toto" }));
// NotArray appelé avec la longueur 1
// NotArray { '0': 'toto', length: 1 }

Lorsque la valeur de this n'est pas un constructeur, un objet Array ordinaire est retourné.

console.log(Array.from.call({}, { length: 1, 0: "toto" })); // [ 'toto' ]

Spécifications

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.from dans core-js ^(angl.)
• Prothèse d'émulation es-shims de Array.from ^(angl.)