Passer au contenu principal
Accéder à l'ensemble des vidéos de ce cours en ligne en illimité à partir de 99€HT/an. Voir nos offres

Angular Initiation (version 21 et antérieures)

JavaScript moderne : tableaux et chaînes

Transformer un tableau avec map

Accéder à l'ensemble des vidéos de ce cours en illimité à partir de 99€ HT/an.

JavaScript moderne : tableaux et chaînes
00:07:01

Script

Objectif pédagogique

Créer un nouveau tableau à partir des propriétés des objets d'un tableau existant.

Démonstration

Le formateur transforme une liste d'objets en une liste de chaînes en associant firstName et lastName. La fonction passée à map reçoit l'élément courant et renvoie la valeur qui apparaîtra dans le nouveau tableau. Le résultat est enregistré dans personCopy puis affiché dans la console ; un espace est ajouté entre les deux propriétés pour améliorer l'affichage.

Étapes

  1. Appeler persons.map avec une fonction fléchée.
  2. Nommer person le paramètre représentant l'objet courant.
  3. Retourner la concaténation de person.firstName et person.lastName.
  4. Enregistrer le résultat dans personCopy.
  5. Contrôler la liste obtenue avec console.log et ajouter un espace entre les valeurs.

Syntaxe et commandes

  • persons.map((person) => person.firstName + person.lastName)
  • console.log(personCopy)

À retenir et précautions

  • map renvoie un nouveau tableau ; il faut exploiter cette valeur de retour.
  • Le callback peut également recevoir l'index et le tableau parcouru.
  • La création d'un nouveau tableau n'est pas une copie profonde des objets : une modification des objets dans le callback peut avoir un effet sur les références partagées.

Le dernier point précise la portée de l'expression « ne modifie pas le tableau d'origine » employée pendant la démonstration.