Carte javascript
Les tableau Méthode de carte est utilisé pour construire un nouveau tableau mappé basé sur la valeur de retour de la fonction de rappel pour chaque élément.
var mappedArray = tableau.map (callbackfunction, thisValue)Le rappeler est la fonction qui sera appelée à chaque fois pour un seul élément et renvoie une valeur qui sera stockée dans un nouveau tableau. La syntaxe de la fonction de rappel est
fonction (valeur, [index [, array]])valeur est un argument nécessaire, qui est en fait un seul élément du tableau.
Le indice est un argument facultatif qui sera utilisé comme index de chaque élément de la fonction de rappel.
Le déployer est également un argument facultatif. Nous pouvons passer cet argument si nous voulons utiliser le tableau dans la fonction de rappel.
cette valeur est la valeur que nous voulons passer, qui sera utilisée comme «ceci» dans la fonction de rappel. Sinon, «indéfini» sera passé.
JavaScript fournit le pour… en boucle en boucle et en boucle foreach pour itérer à travers des éléments et manipuler les tableaux. Mais, pourquoi avons-nous besoin d'une méthode de carte en dehors de cela? Il y a deux raisons principales à cela. L'une est la séparation de la préoccupation et la seconde est la syntaxe facile pour effectuer de telles tâches. Alors, essayons différents exemples pour démontrer le but et la bonne utilisation.
Exemples
Tout d'abord, nous allons avoir une démonstration simple dans laquelle nous avons un simple tableau de nombres sur lesquels nous essaierons d'effectuer toute opération arithmétique simple sur chaque élément.
var arr = [4, 8, 16, 64, 49];Maintenant, avant d'appliquer la méthode de carte sur ce tableau. Nous rédigerons d'abord une fonction de rappel à laquelle nous pouvons appeler dans notre fonction de carte dans laquelle, disons que nous voulons multiplier chaque élément avec 10 et avoir un nouveau tableau.
fonction multiply (élément)var newelement = élément * 10;
retourner Newelement;
Tout est configuré pour appliquer la méthode de carte sur le tableau et avoir les résultats requis.
var newarr = arr.map (multiplier);Maintenant, si nous jetons un coup d'œil au «Newarr»,
console.journal (newarr);Nous pouvons voir le dernier tableau cartographié dans la sortie selon notre exigence.
Gardez à l'esprit que la longueur du nouveau tableau mappé sera certainement égale au tableau d'origine.
Il existe un moyen plus court de faire la même tâche en utilisant la flèche ou la fonction anonyme dans une méthode de carte. Ainsi, nous pouvons écrire une fonction de rappel dans une méthode de carte comme celle-ci
var newarr = arr.map ((élément) =>Élément de retour * 10
)
Ou, si nous voulons être un pro et le rendre plus concis. Nous pouvons le faire
var newarr = arr.map (e => e * 10)Bien! C'était donc la démonstration très basique de la méthode de la carte et différentes façons d'écrire la fonction de rappel. Mais, cette fonction est plus utile, lorsque nous jouons avec un tableau d'objets. C'est là que c'est une vraie implémentation.
Utilisation de la carte avec un tableau d'objets
Dans cet exemple, nous supposons un tableau d'objets dans lesquels chaque objet contient les informations d'un joueur. Le nom du joueur et son identifiant.
var arr = [id: 12, nom: "James",
id: 36, nom: "Morgan",
id: 66, nom: "Jordan"
]]
Maintenant, disons que nous voulons extraire les ID de chaque objet et avoir un nouveau tableau d'IDS.
Mais, pour comprendre comment la méthode de carte est différente et aide mieux à la boucle FOREAK. Nous allons essayer ces deux (méthode de carte et boucle foreach) pour faire la même tâche et apprendre la différence.
Donc, d'abord, nous essaierons d'extraire des ID en utilisant la boucle FOREEACH, puis en utilisant la méthode de la carte.
var extraitDides = [];art.foreach ((élément) =>
Retour ExtracteDides.pousser (élément.identifiant);
)
Maintenant, si nous regardons les ID extraits.
console.log (extraitdides);
Nous les avons séparés dans un tableau. Mais, démontrons maintenant la même sortie en utilisant la méthode de la carte.
élément de retour.identifiant;
)
console.log (extraitdides);
En regardant la différence de code et la même sortie, nous pouvons réaliser la vraie différence entre les deux méthodes (Forach et Map). La syntaxe et la séparation des préoccupations.
De même, nous pouvons effectuer beaucoup d'autres opérations. Si nous devons jouer et obtenir des données à partir de la table d'objets. Nous supposons un tableau d'objets dans lesquels chaque objet contient deux propriétés: prénom et nom de famille.
var arr = [FirstName: "John", LastName: "Doe",
FirstName: "Morgan", LastName: "Freeman",
FirstName: "Jordan", LastName: "Peterson"
]]
Maintenant, nous voulons avoir un tableau qui contient les noms complets. Donc, nous écrivons une fonction de carte comme celle-ci pour atteindre notre objectif
var fullname = arr.map ((personne) =>retour.Firstname + "+ personne.nom de famille
)
console.log (fullName);
Comme vous pouvez le voir, nous avons un tableau séparé avec des noms complets. C'est super.
Donc, ce sont quelques-unes des façons de base et différentes de la façon dont une fonction MAP peut être utilisée pour répondre à nos exigences de développement et aide dans la vie d'un développeur JavaScript.
Conclusion
Dans cet article, nous avons appris la méthode map () la plus utilisée de JavaScript pour les tableaux et nous avons appris certaines des différentes façons d'utiliser la méthode de la carte. Cet article explique le concept de la méthode de la carte d'une manière si simple et profonde que tout codeur débutant peut le comprendre et l'utiliser selon ses besoins. Alors, continuez à apprendre, à travailler et à acquérir de l'expérience en javascript avec Linuxhint.com pour avoir une meilleure compréhension. Merci beaucoup!