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.

[pastacode lang= »javascript » manual= »const%20myNodeList%20%3D%20Array.from(document.querySelectorAll(%22p%22))%0AmyNodeList.forEach(node%20%3D%3E%20console.log(node)) » message= » » highlight= » » provider= »manual »/]

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.

[pastacode lang= »javascript » manual= »const%20myArray%20%3D%20Array.of(%22My%22%2C%20%22name%22%2C%20%22is%22%2C%20%22Romain%22)%0Aconsole.log(myArray.join(%22%20%22))%3B%20%2F%2F%20%22My%20name%20is%20Romain%22″ message= » » highlight= » » provider= »manual »/]

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.

[pastacode lang= »javascript » manual= »const%20myArray%20%3D%20%5B…Array(3).keys()%5D%0Aconsole.log(myArray)%3B%20%2F%2F%20%5B0%2C%201%2C%202%5D » message= » » highlight= » » provider= »manual »/]

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.

[pastacode lang= »markup » manual= »const%20myArray%20%3D%20Array.of(%22My%22%2C%20%22name%22%2C%20%22is%22%2C%20%22Romain%22)%0Aconst%20newArray%20%3D%20Array.from(myArray.entries())%0Aconsole.log(newArray)%20%2F%2F%20%5B%5B0%2C%20%22My%22%5D%2C%20%5B1%2C%20%22name%22%5D%2C%20%5B1%2C%20%22is%22%5D%2C%20%5B1%2C%20%22Romain%22%5D%5D » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »const%20myArray%20%3D%20%5B%7B%20id%3A%201%2C%20label%3A%20%22My%22%20%7D%2C%20%7B%20id%3A%202%2C%20label%3A%20%22name%22%20%7D%2C%20%7B%20id%3A%203%2C%20label%3A%20%22is%22%20%7D%2C%20%7B%20id%3A%204%2C%20label%3A%20%22Romain%22%20%7D%5D%0Aconst%20found%20%3D%20myArray.find(item%20%3D%3E%20item.id%20%3D%3D%3D%204)%0Aconst%20notfound%20%3D%20myArray.find(function%20(item)%20%7B%0A%20%20return%20item.label%20%3D%3D%3D%20’Julian’%0A%7D)%0Aconsole.log(found%2C%20notfound)%20%2F%2F%20%7Bid%3A%204%2C%20label%3A%20%22Romain%22%7D%2C%20undefined » message= » » highlight= » » provider= »manual »/]

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.

[pastacode lang= »javascript » manual= »const%20myArray%20%3D%20%5B%7B%20id%3A%201%2C%20label%3A%20%22My%22%20%7D%2C%20%7B%20id%3A%202%2C%20label%3A%20%22name%22%20%7D%2C%20%7B%20id%3A%203%2C%20label%3A%20%22is%22%20%7D%2C%20%7B%20id%3A%204%2C%20label%3A%20%22Romain%22%20%7D%5D%0Aconsole.log(myArray.findIndex(item%20%3D%3E%20item.id%20%3D%3D%3D%204))%20%2F%2F%203″ message= » » highlight= » » provider= »manual »/]

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.

[pastacode lang= »javascript » manual= »const%20myArray%20%3D%20%5B1%2C%202%2C%203%2C%204%5D%0A%0A%2F%2F%20Remplace%20par%200%20les%20%C3%A9l%C3%A9ments%20%C3%A0%20partir%20de%20l’index%201%20et%20jusqu’%C3%A0%203%0Aconsole.log(myArray.fill(0%2C%201%2C%203))%20%2F%2F%20%5B1%2C%200%2C%200%2C%204%5D%0A%0A%2F%2F%20Remplace%20par%202%20les%20%C3%A9l%C3%A9ments%20%C3%A0%20partir%20de%20l’index%202%0Aconsole.log(myArray.fill(2%2C%202))%20%2F%2F%20%5B1%2C%200%2C%202%2C%202%5D%0A%0A%2F%2F%20Remplace%20tous%20les%20%C3%A9l%C3%A9ments%20du%20tableau%20par%201%0Aconsole.log(myArray.fill(1))%20%2F%2F%20%5B1%2C%201%2C%201%2C%201%5D » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »const%20myArray%20%3D%20%5B1%2C%202%2C%203%2C%204%2C%205%5D%0A%0A%2F%2F%20Mets%20%C3%A0%20l’index%200%20les%20%C3%A9l%C3%A9ments%20%C3%A0%20partir%20de%20l’index%201%20et%20jusqu’%C3%A0%203%0Aconsole.log(myArray.copyWithin(0%2C%201%2C%203))%20%2F%2F%20%5B2%2C%203%2C%203%2C%204%2C%205%5D%0A%0A%2F%2F%20Mets%20%C3%A0%20l’index%201%20les%20%C3%A9l%C3%A9ments%20%C3%A0%20partir%20de%20l’index%203%0Aconsole.log(myArray.copyWithin(1%2C%203))%20%2F%2F%20%5B2%2C%204%2C%205%2C%204%2C%205%5D » message= » » highlight= » » provider= »manual »/]

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