• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 23/07/2020

Gérez la complexité avec la bonne collection (array, set, map)

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Imaginez que vous êtes responsable de la communication d'un théâtre à la mode. Une de vos responsabilités essentielles est la gestion du premier rang, qui revient à s'assurer que les amis et connaissances des artistes, ainsi que d'autres VIP, aient la meilleure vision du spectacle.

Si vous n'aviez à gérer que deux invitations pour l'artiste principal, vous pourriez imaginer utiliser seulement deux variables avec les noms des invités. Le code pourrait se présenter comme ceci :

let firstFrontRowGuest;
let secondFrontRowGuest;

Ensuite, quand l'artiste vous donne l'information, vous pourriez vous contenter d'affecter un nom à chaque variable. Par exemple, vous pourriez avoir :

firstFrontRowGuest = "Sarah Kate";
secondFrontRowGuest = "Audrey Simon";

Mais si le premier rang a 30 sièges ? Ne serait-il pas plus facile d'utiliser une seule variable contenant toutes ces informations ?

Il existe un type pour cela en JavaScript : le tableau (array).

Utilisez un tableau pour enregistrer une liste ordonnée d'éléments

Pour créer un tableau vide et l'enregistrer dans une variable, utilisez une paire de crochets carrés :

let guests = [];

Vous pouvez aussi créer un tableau rempli en plaçant les éléments voulus à l'intérieur de ces crochets carrés :

let guests = ["Sarah Kate", "Audrey Simon", "Will Alexander"];

Vous pouvez ensuite accéder aux éléments de ce tableau par leur indice :

let firstGuest = guests[0]; // "Sarah Kate"
let thirdGuest = guests[2]; // "Will Alexander"
let undefinedGuest = guests[12] // undefined

Pratiquez : créez un array

Entraînez-vous à créer un tableau pour enregistrer les épisodes de votre série télé avec cet éditeur CodePen

Dans un exercice précédent, vous avez créé trois instances de la classe  Episode  dans des variables séparées. Dans cet exercice, vous allez regrouper ces variables dans un seul tableau (Array).

  1. Créez un Array stocké dans une variable episodes, et peuplez-le avec les trois variables  firstEpisode  ,  secondEpisode  et  thirdEpisode  .

  2. Essayez de changer l'ordre dans lequel vous avez ajouté les épisodes, et regardez ce qu'il se passe lorsque vous rafraîchissez. 

N'oubliez pas, votre code ira entre les commentaires "===" sur l'exercice.

Solution :

Voici un nouveau CodePen avec une solution à l’exercice.

Utilisez des valeurs plutôt que des références

En JavaScript, les types primitifs tels que les nombres, les valeurs logiques et les chaînes sont passés par valeur. Ceci signifie que quand vous faites quelque chose comme :

let numberOfGuests = 20;
let totalNumberOfGuests = numberOfGuests; // 20

c'est la valeur 20 qui est copiée dans la nouvelle variable (totalNumberOfGuests), et aucun lien n'est maintenu entre les deux variables.

Ce n'est pas le cas avec les objets et tableaux, qui sont passés par référence. Si vous n'y prenez pas garde, cela peut conduire à des comportements inattendus. Par exemple :

let artistProfile = {
name: "Tao Perkington",
age: 27,
available: true
};
let allProfiles = [artistProfile]; // nouveau tableau contenant l'objet ci-dessus
artistProfile.available = false; // modification de l'objet
console.log(allProfiles) // affiche { nom: "Tao Perkington", âge: 27, disponible: false }

Bien que nous ayons créé le tableau et passé l'objet avant la modification de cet objet, vous la voyez dans le tableau. C'est parce que quand on utilise des tableaux et des objets, on passe des références aux objets plutôt que la valeur des données qu'ils contiennent. Les variables profilArtiste et tousProfils présentées ci-dessus contiennent des références à l'objet et au tableau en mémoire.

Cela peut sembler un peu compliqué à comprendre, mais avec la pratique, vous vous y ferez !

Travaillez sur les tableaux

Les tableaux en JavaScript sont très puissants et ont beaucoup d'attributs et de méthodes très utiles. Voici une brève introduction à quelques-uns d'entre eux.

Le comptage d'éléments

La propriété  length  d'un tableau indique le nombre d'éléments qu'il contient :

let guests = ["Will Alexander", "Sarah Kate", "Audrey Simon"];
let howManyGuests = guests.length; // 3

Utilisez la notation dot pour accéder à la propriété  length  de votre tableau. Ce n'est peut-être pas très utile dans cet exemple (parce que que nous savons combien nous avons mis d'invités dans le tableau !), mais dans beaucoup de cas, vous ne saurez pas à l'avance combien il y a d'éléments dans un tableau.

L'ajout et la suppression d'éléments

Pour ajouter un élément à la fin d'un tableau, utilisez sa méthode push :

guests.push("Tao Perkington"); // ajoute "Tao Perkington" à la fin de notre tableau guests

Vous pouvez utiliser la notation dot pour accéder à la méthode  push  du tableau, et placer l'élément à ajouter entre parenthèses.

Pour ajouter votre élément au début du tableau plutôt qu'à la fin, utilisez la méthode  unshift  :

guests.unshift("Tao Perkington"); // "Tao Perkington" est ajouté au début du tableau guests

Pour supprimer le dernier élément d'un tableau, appelez sa méthode  pop, sans passer aucun argument :

guests.pop(); // supprimer le dernier élément du tableau

Pratiquez : travaillez avec les arrays

Rendez-vous sur cet éditeur CodePen et suivez les étapes suivantes. 

Dans cet exercice, un Array vide  episodes  a déjà été créé.

  1. En utilisant la méthode  push  du tableau episodes, ajoutez les épisodes un par un. Ajoutez deux fois le troisième épisode.

  2. Avec la méthode pop, retirez l'épisode superflu du tableau  episodes.

  3. Créez une variable appelée  numberOfEpisodes  qui contient la  length  du tableau episodes.

  4. Amusez-vous à ajouter et retirer des épisodes et vérifiez que tout fonctionne correctement.

Solution :

Voici un nouveau CodePen avec une solution à l’exercice.

Découvrez les sets et les maps

Maintenant que nous avons abordé les tableaux, voyons les autres types de collection en JavaScript : les ensembles (sets) et les cartes (maps).

En JavaScript, un set,  ou ensemble, est une liste non ordonnée.  Cela signifie que vous ne pouvez pas récupérer de façon fiable les éléments de liste, car ils n'ont pas d'indice fixe. Vous pouvez par contre ajouter et supprimer des éléments (les doublons ne sont pas autorisés) et vérifier si un ensemble contient ou non un élément particulier.  Les ensembles peuvent être pratiques pour enregistrer les utilisateurs en ligne à un instant donné, pour vérifier s'ils le sont ou non.

En revanche, une map est une liste ordonnée de paires clés/valeurs. Bien qu'elle ressemble à un objet, il y a des différences importantes. Par exemple, les clés peuvent avoir n'importe quelle valeur (et pas seulement des chaînes) dans les cartes. Vous pouvez facilement trouver combien d'éléments une  map  contient, et il est possible de filtrer ou modifier dans certains cas les paires clés/valeurs.

En résumé

Dans ce chapitre :

  • vous avez appris à connaître les collections ;

  • vous avez exploré la collection la plus courante en JavaScript : le tableau ;

  • vous avez appris à créer des tableaux, à les remplir, et vu certains outils de base pour les manipuler ;

  • enfin, vous avez découvert les notions de sets et de maps.

Exemple de certificat de réussite
Exemple de certificat de réussite