ES6 : Array et ses nouvelles fonctionnalités

Le standard ES6 ajoute de nouvelles fonctionnalités pour les tableaux Javascript Array.
Voici les nouveautés disponibles.

Array.from()

La méthode Array.from() est nouvelle fonctionnalité bien pratique, qui sera utilisée souvent. Elle permet de créer un tableau à partir d’un élément itérable ou d’un objet qui ressemble à un tableau, comme par exemple une NodeList.

const myNodeList = Array.from(document.querySelectorAll("p"))
myNodeList.forEach(node => console.log(node))

Array.of()

Avec cette méthode, vous pouvez passer des éléments en arguments et elle va vous créer un tableau former à partir des arguments reçus.

const myArray = Array.of("My", "name", "is", "Romain")
console.log(myArray.join(" ")); // "My name is Romain"

Array.prototype.keys() & Array.prototype.entries()

La méthode Array.prototype.keys() renvoie un nouveau tableau composé des clés de chaque élément du tableau passé en paramètre.
Cette méthode est également disponible pour d’autres itérables, comme Map ou Set.

const myArray = [...Array(3).keys()]
console.log(myArray); // [0, 1, 2]

La méthode Array.prototype.entries() est assez proche de Array.prototype.keys(), à la différence qu’elle va renvoyer un nouveau tableau composé du couple clé / valeur, et pas uniquement les clés.

const myArray = Array.of("My", "name", "is", "Romain")
const newArray = Array.from(myArray.entries())
console.log(newArray) // [[0, "My"], [1, "name"], [1, "is"], [1, "Romain"]]

Array.prototype.find()

La méthode Array.prototype.find() va permettre de chercher le premier élément du tableau qui respecte la condition donnée par la fonction de test passée en argument, et renvoie sa valeur. Si aucun élément valide n’est trouvé, la fonction renvoie undefined.
On retrouve le même principe de fonctionne qu’avec les fonctions filter()some() ou every().

const myArray = [{ id: 1, label: "My" }, { id: 2, label: "name" }, { id: 3, label: "is" }, { id: 4, label: "Romain" }]
const found = myArray.find(item => item.id === 4)
const notfound = myArray.find(function (item) {
  return item.label === 'Julian'
})
console.log(found, notfound) // {id: 4, label: "Romain"}, undefined

Il existe également la fonction Array.prototype.findIndex() qui est très proche, mais celle-ci renvoie l’indice de l’élément trouvé. Si aucun élément ne valide la fonction de test, la méthode renvoie -1.

const myArray = [{ id: 1, label: "My" }, { id: 2, label: "name" }, { id: 3, label: "is" }, { id: 4, label: "Romain" }]
console.log(myArray.findIndex(item => item.id === 4)) // 3

Array.prototype.fill()

La méthode Array.prototype.fill() va remplir un tableau avec la valeur passée en argument.
Par défaut, tous les éléments du tableau seront remplacés par cette valeur.
Il est toutefois possible de donner deux autres arguments qui vont définir à partir de quel index il faut remplir le tableau par la valeur donnée, et à quel index il faut arrêter. Par contre, la valeur de l’index de fin n’est pas incluse.

const myArray = [1, 2, 3, 4]

// Remplace par 0 les éléments à partir de l'index 1 et jusqu'à 3
console.log(myArray.fill(0, 1, 3)) // [1, 0, 0, 4]

// Remplace par 2 les éléments à partir de l'index 2
console.log(myArray.fill(2, 2)) // [1, 0, 2, 2]

// Remplace tous les éléments du tableau par 1
console.log(myArray.fill(1)) // [1, 1, 1, 1]

Array.prototype.copyWithin()

La méthode Array.prototype.copyWithin() renvoie une copie du tableau en remplaçant un élément du tableau par une séquence de celui-ci.
La méthode prends donc 3 paramètres : l’index de l’élément à remplacer, l’index du premier élément à copier et l’index de l’élément de fin de la copie (se dernier n’est pas inclus).

const myArray = [1, 2, 3, 4, 5]

// Mets à l'index 0 les éléments à partir de l'index 1 et jusqu'à 3
console.log(myArray.copyWithin(0, 1, 3)) // [2, 3, 3, 4, 5]

// Mets à l'index 1 les éléments à partir de l'index 3
console.log(myArray.copyWithin(1, 3)) // [2, 4, 5, 4, 5]

Est-ce que vous utilisez certaines de ces fonctions ? Certaines vous semble inutile ? Donner votre avis !

Commentaires0

Il n'y a aucun commentaire pour le moment.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.