Phenquestions
Le tableau méthode de la 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 retournera une valeur qui sera stockée dans un nouveau tableau. La syntaxe de la fonction de rappel est
fonction(valeur, [index[, tableau]])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 dans la fonction de rappel.
le déployer est aussi un argument optionnel. Nous pouvons passer cet argument si nous voulons utiliser le tableau dans la fonction de rappel.
thisValeur est la valeur que nous voulons passer, qui sera utilisée comme « this » dans la fonction de rappel. Sinon, « undefined » sera transmis.
Javascript fournit la boucle for… in et la boucle foreach pour parcourir les éléments et manipuler les tableaux. Mais pourquoi avons-nous besoin d'une méthode de carte à part ça? Il y a deux raisons principales à cela. L'un est la séparation des préoccupations et le second est la syntaxe simple pour effectuer de telles tâches. Alors, essayons quelques exemples différents pour démontrer le but et la bonne utilisation de celui-ci.
Exemples
Tout d'abord, nous allons avoir une démonstration simple dans laquelle nous avons un simple tableau de nombres sur lequel nous allons essayer d'effectuer n'importe quelle opération arithmétique simple sur chaque élément.
var arr = [4, 8, 16, 64, 49];Maintenant, avant d'appliquer la méthode map sur ce tableau. Nous allons d'abord écrire une fonction de rappel à laquelle nous pouvons appeler notre fonction map dans laquelle, disons que nous voulons multiplier chaque élément par 10 et avoir un nouveau tableau.
fonction multiplier(élément)var newElement = élément * 10;
renvoyer newElement ;
Tout est mis en place pour appliquer la méthode map sur le tableau et avoir les résultats requis.
var nouvelleArr = arr.map (multiplier);Maintenant, si nous regardons le "newArr",
console.log(nouvelleArr);Nous pouvons voir le dernier tableau mappé dans la sortie selon nos besoins.
Gardez cela à 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 map comme celle-ci
var nouvelleArr = 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.carte(e => e * 10)Bien! C'était donc la démonstration très basique de la méthode map et des différentes façons d'écrire la fonction de rappel. Mais, cette fonction est plus pratique, lorsque nous jouons avec un tableau d'objets. C'est là que la vraie mise en œuvre se produit.
Utilisation de Map avec un tableau d'objets
Dans cet exemple, nous supposons un tableau d'objets dans lequel chaque objet contient les informations d'un joueur. Nom du joueur et son identifiant.
var arr = [id : 12, nom : "James",
identifiant : 36, nom : "Morgan",
id : 66, nom : "Jordanie"
] ;
Maintenant, disons que nous voulons extraire les identifiants de chaque objet et avoir un nouveau tableau d'identifiants.
Mais, pour comprendre, en quoi la méthode map est différente et aide mieux que la boucle foreach. Nous allons essayer les deux (méthode map et boucle foreach) pour faire la même tâche et apprendre la différence.
Donc, nous allons d'abord essayer d'extraire les identifiants en utilisant la boucle foreach puis en utilisant la méthode map.
var extraitIDs = [];arr.pourChaque((élément) =>
renvoyer les ID extraits.pousser (élément.identifiant);
)
Maintenant, si nous regardons les identifiants extraits.
console.log (ID extraits);
Nous les avons séparés dans un tableau. Mais, maintenant, montrons la même sortie en utilisant la méthode map.
élément de retour.identifiant;
)
console.log (ID extraits);
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 (foreach 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 du tableau d'objets. On suppose un tableau d'objets dans lequel chaque objet contient deux propriétés : prénom et nom.
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 allons écrire une fonction de carte comme celle-ci pour remplir notre objectif
var nomcomplet = arr.carte((personne) =>personne de retour.prénom + " + personne.nom de famille
)
console.log(nomcomplet);
Comme vous pouvez le voir, nous avons un tableau séparé avec des noms complets. C'est super.
Voici donc quelques-unes des manières de base et différentes d'utiliser une fonction de carte pour répondre à nos exigences de développement et aider dans la vie de chaque développeur javascript.
Conclusion
Dans cet article, nous avons découvert la méthode map() la plus utilisée de javascript pour les tableaux et nous avons appris quelques-unes des différentes manières d'utiliser la méthode map. 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 mieux le comprendre. Merci beaucoup!
