Array.
Crée un tableau à partir d’un objet itérable ou « semblable à un tableau ».
- Renvoie
- Un nouveau tableau.
- Modifie l’original
- Non
Exemple
#console.log(Array.from('été'))
console.log(Array.from(new Set([1, 2, 2, 3])))
console.log(Array.from({ length: 5 }, (_, i) => i + 1))Définition et utilisation
#La méthode statique Array.from() transforme en véritable tableau tout ce qui peut être itéré ou qui possède une propriété length : une chaîne, un Set, une Map, une liste d’éléments DOM (NodeList) ou un objet { length: 3 }.
Le second argument est une fonction de mappage, appelée pour chaque élément. Cela permet de générer facilement un tableau de nombres : Array.from({ length: 5 }, (_, i) => i + 1).
Dans bien des cas, la syntaxe de décomposition [...iterable] donne le même résultat, mais Array.from() fonctionne aussi avec des objets qui n’ont qu’un length, et mappe directement.
Syntaxe
#Array.from(arrayLike)
Array.from(arrayLike, mapFn)Paramètres
#arrayLike
objet itérable ou avec length
Source des éléments, par exemple une chaîne, un Set, une NodeList.mapFn
optionnelle, function (element, index)
Fonction qui transforme chaque élément.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Vous obtenez les valeurs uniques d’un tableau avec
Array.from(new Set(array))ou[...new Set(array)]. - La liste d’éléments renvoyée par
querySelectorAll()n’a pas toutes les méthodes des tableaux.Array.from()corrige cela.
Entrées associées
#- Array.isArray()Vérifie si une valeur est un tableau.
- Spread (...)La syntaxe spread décompose un tableau, une chaîne ou un objet en éléments individuels : pour copier, fusionner et passer des arguments.
- SetUne collection de valeurs uniques : chaque valeur ne peut apparaître qu’une fois dans l’ensemble.
- document.querySelectorAll()Renvoie une liste statique (NodeList) de tous les éléments qui correspondent à un sélecteur CSS.
- Array.of()Crée un nouveau tableau à partir des arguments donnés, quel que soit leur nombre ou leur type.
- Itérateurs (Symbol.iterator)Le protocole d’itération : un objet avec une méthode [Symbol.iterator]() fonctionne avec for...of, le spread et la déstructuration.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.