6.14 Mapper un Tableau

Une autre méthode très utile et puissante que nous avons en JavaScript est la méthode map. Avec cette méthode, nous pouvons mapper chaque élément du tableau sur autre chose. Donc, suivant l'exemple de la dernière vidéo, nous avons un tableau de nombres positifs, disons que nous voulons construire du balisage HTML, en utilisant les éléments de ce tableau. Nous appelons donc la constante filtred.map et encore une fois, nous devons passer une fonction call back ici. Cette fonction, tout comme la fonction que nous avons passée à la méthode du filtre, peut avoir trois paramètres. Valeur, index et tableau. Donc, dans ce cas, encore une fois, nous allons travailler uniquement avec la valeur afin de pouvoir passer une fonction ou une fonction fléchée. Nous obtenons donc un certain nombre de balisage html. Nous pouvons donc ajouter une chaîne, avec un élément de liste li. Ensuite, nous ajoutons le numéro, puis enfin l'élément de liste de fermeture. Donc, avec ce balisage, nous pouvons afficher chaque numéro à l'aide d'une puce. Bien sûr, nous devons les placer à l'intérieur d'un élément ul, et je vais vous le montrer dans un instant. Voyons donc le résultat de la méthode map. Je vais stocker le résultat dans une constante appelée items, et maintenant, affichons cela sur la console. Ainsi, vous pouvez voir que chaque numéro est maintenant mappé sur une chaîne, c'est notre élément de liste. Alors maintenant, nous avons un tableau de chaînes, nous pouvons utiliser la méthode Join que vous avez apprise plus tôt pour joindre les éléments de ce tableau et créer une chaîne. Donc, constant, html, nous le définissons sur items.join, puis affichez-le sur la console. Maintenant, au lieu d'un tableau, nous avons une chaîne. Notez que par défaut, la virgule est utilisée comme séparateur, nous ne voulons pas avoir de virgule dans notre balisage html, nous voulons simplement les combiner en utilisant un caractère vide comme celui-ci. Enregistrez les modifications, maintenant la virgule a disparu, le seul qui reste est l'élément ul. Donc l'implémentation très simple serait comme ça, vous ajoutez ul puis le concaténez avec tous ces éléments et enfin un autre ul. Enregistrez les modifications et voici notre balisage html pour afficher tous ces nombres à l'aide de puces. Plus tard dans le cours, je vais vous montrer une manière plus élégante d'implémenter la même chose, tout ce que je veux que vous retiriez de cette vidéo, c'est que nous pouvons utiliser la méthode map pour mapper chaque élément d'un tableau dans quelque chose d'autre. Maintenant, dans cet exemple, vous mappez ces nombres à des chaînes, mais vous pouvez également les mapper à des objets, laissez-moi vous montrer un autre exemple. Je vais donc supprimer ce htm. Au lieu de mapper un nombre à une chaîne, disons que vous voulez les mapper à un objet. Donc, ici, je vais définir un objet, dans cet objet, nous voulons avoir une propriété value et la définir sur ce nombre. Et enfin, vous voulez retourner cet objet. Regardons le résultat. Ici, j'ai fait une erreur, j'ai supprimé la constante html et c'est pourquoi nous obtenons cette erreur. Le HTML n'est pas défini. Alors, affichons le constant item. Voici maintenant le résultat de notre map. Nous avons mappé chaque nombre à un objet avec une propriété value. Donc très utile lors de la création d'applications. Maintenant, laissez-moi vous montrer quelque chose de délicat ici, dans notre fonction call back, nous déclarons cette constante, puis la renvoyons. Techniquement, nous n'avons pas besoin de déclarer cela comme une constante séparée, nous pouvons simplement mettre le mot-clé return ici et renvoyer cet objet. Parce que nous ne travaillons pas avec cette constante, avec cette constante d'objet, Donc, enregistrez les modifications, vous obtenez toujours le même résultat, Voilà pour cette vidéo sur comment mapper un tableau en JavaScript, on se retrouve pour une prochaine vidéo ou on va voir la réduction d’un tableau.