| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/from | [Back] [Original] |
Get to know MDN better
Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.
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 mthode statique Array.from() cre une nouvelle instance d'Array (copie superficielle) partir d'un objet itrable ou d'un objet semblable un tableau.
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]
Array.from(items)
Array.from(items, mapFn)
Array.from(items, mapFn, thisArg)
itemsUn objet itrable ou un objet semblable un tableau convertir en un tableau.
mapFn FacultatifUne fonction appele sur chaque lment 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 ajoute au tableau la place. La fonction est appele avec les arguments suivants :
thisArg FacultatifLa valeur utiliser comme this lors de l'excution de la fonction mapFn.
Une nouvelle instance de Array.
Array.from() permet de crer des tableaux partir :
Map et Set) ; ou, si l'objet n'est pas itrable,length et des lments indexs).Pour convertir un objet ordinaire qui n'est ni itrable ni semblable un tableau en un tableau (en numrant ses cls, valeurs ou les deux), utilisez Object.keys(), Object.values() ou Object.entries(). Pour convertir un objet itrable asynchrone en un tableau, utilisez Array.fromAsync().
Array.from() ne cre jamais de tableau creux. Si l'objet items n'a pas certaines proprits d'index, elles deviennent undefined dans le nouveau tableau.
Array.from() possde un paramtre optionnel mapFn, qui permet d'excuter une fonction sur chaque lment du tableau en cours de cration, de faon similaire map(). Plus prcisment, Array.from(obj, mapFn, thisArg) a le mme rsultat que Array.from(obj).map(mapFn, thisArg), sauf qu'il ne cre pas de tableau intermdiaire, et mapFn ne reoit que deux arguments (element, index) sans le tableau complet, car celui-ci est encore en construction.
Note :
Ce comportement est particulirement important pour les tableaux typs, car le tableau intermdiaire aurait ncessairement des valeurs tronques pour correspondre au type appropri. Array.from() est implment pour avoir la mme signature que TypedArray.from().
La mthode Array.from() est une mthode de fabrique gnrique. Par exemple, si une sous-classe d'Array hrite de la mthode from(), la mthode hrite 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 reprsentant la longueur du nouveau tableau. Lorsqu'un objet itrable 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 normalise de l'objet. La longueur finale sera nouveau dfinie la fin de l'itration. Si la valeur de this n'est pas une fonction constructeur, le constructeur natif Array est utilis la place.
Array.from("toto");
// [ "t", "o", "t", "o" ]
const collection = new Set(["toto", "tata", "tati", "toto"]);
Array.from(collection);
// [ "toto", "tata", "tati" ]
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'];
NodeList// Crer un tableau partir d'une proprit des lments du DOM
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);
const insecureSources = sources.filter((link) => link.startsWith("http://"));
function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [ 1, 2, 3 ]
Array.from()// Utiliser une fonction flche comme fonction de transformation pour
// manipuler les lments
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]
// Gnrer une squence 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]
// Fonction gnratrice de squence (souvent appele intervalle , cf. Python, Clojure, etc.)
const range = (start, stop, step) =>
Array.from(
{ length: Math.ceil((stop - start) / step) },
(_, i) => start + i * step,
);
// Gnrer une squence de nombres de 0 (inclus) 5 (exclus), en incrmentant de 1
range(0, 5, 1);
// [0, 1, 2, 3, 4]
// Gnrer une squence de nombres de 1 (inclus) 10 (exclus), en incrmentant de 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]
// Gnrer l'alphabet latin en profitant du fait qu'il soit ordonn comme une squence
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"]
from() avec d'autres fonctions constructrices que la fonction constructeur de tableauLa mthode from() peut tre appele sur n'importe quelle fonction constructeur qui accepte un seul argument reprsentant la longueur du nouveau tableau.
function NotArray(len) {
console.log("NotArray appel avec la longueur", len);
}
// Objet itrable
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' ]
| Spcification |
|---|
| ECMAScript 2027 LanguageSpecification # sec-array.from |
ArrayArray()Array.of()Array.fromAsync()Array.prototype.map()TypedArray.from()Array.from dans core-js (angl.)Array.from (angl.)Cette page a t modifie le 6 mai 2026 par les contributeurices du MDN.
Arrayat()concat()copyWithin()entries()every()fill()filter()find()findIndex()findLast()findLastIndex()flat()flatMap()forEach()includes()indexOf()join()keys()lastIndexOf()map()pop()push()reduce()reduceRight()reverse()shift()slice()some()sort()splice()toLocaleString()toReversed()toSorted()toSpliced()toString()unshift()values()with()[Symbol.iterator]()Object/FunctionObject.prototype.__defineGetter__()Object.prototype.__defineSetter__()Object.prototype.__lookupGetter__()Object.prototype.__lookupSetter__()Object.prototype.hasOwnProperty()Object.prototype.isPrototypeOf()Object.prototype.propertyIsEnumerable()Object.prototype.toLocaleString()Object.prototype.toString()Object.prototype.valueOf()Certaines parties de ce contenu sont protges par le droit d'auteur 19982026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.
| Web Proxy Viewer | New URL | Original Page |