Array : méthode statique from() - JavaScript | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Array : méthode statique from()

Baseline Large disponibilité

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 statique Array.from() crée une nouvelle instance d'Array (copie superficielle) à partir d'un objet itérable ou d'un objet semblable à un tableau.

Dans cet article

Exemple interactif

console.log(Array.from("toto"));
// Sortie attendue : Array ["t", "o", "t", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x));
// Sortie attendue : Array [2, 4, 6]

Syntaxe

js
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.

Note : Ce comportement est particulièrement important pour les tableaux 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 que TypedArray.from().

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

js
Array.from("toto");
// [ "t", "o", "t", "o" ]

Tableau à partir d'un ensemble

js
const collection = new Set(["toto", "tata", "tati", "toto"]);
Array.from(collection);
// [ "toto", "tata", "tati" ]

Tableau à partir d'une table de correspondance

js
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

js
// 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)

js
function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

Utiliser des fonctions fléchées et Array.from()

js
// 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)

js
// 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.

js
function NotArray(len) {
  console.log("NotArray appelé avec la longueur", len);
}

// Objet itérable
console.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 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' ]

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.)

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 6 mai 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Objets natifs standards
Array
Constructeur
1. Array()
Méthodes statiques
Propriétés statiques
1. [Symbol.species]
Méthodes d'instance
Propriétés d'instance
1. length
2. [Symbol.unscopables]
Héritage
Object/Function
Méthodes statiques
Propriétés statiques
Méthodes d'instance
Propriétés d'instance
1. Object.prototype.__proto__
2. Object.prototype.constructor