Vous êtes sur la page 1sur 1

Parcours Cours Business AK

Accueil > Cours > Apprenez à programmer avec JavaScript > Gérez la complexité avec la bonne collection (array, set, map)

Apprenez à programmer avec JavaScript

15 heures  Facile Licence 


Mis à jour le 16/10/2020

 

Utiliser les
Gérez la complexité avec la bonne collection (array, données et les
 types de 
set, map) données dans
JavaScript

 1. Découvrez la
structure de ce
cours

2. Déclarez des
variables et
modi ez leurs
valeurs

3. Enregistrez vos
données avec des
types de données

4. Dé nissez des
objets et leurs
attributs avec des
classes

5. Gérez la
complexité avec la
bonne collection
Imaginez que vous êtes responsable de la communication d'un théâtre à la mode. Une de
(array, set, map)
vos responsabilités essentielles est la gestion du premier rang, qui revient à s'assurer que
6. Résumé de la partie
les amis et connaissances des artistes, ainsi que d'autres VIP, aient la meilleure vision du
1
spectacle.
 Quiz : Véri ez ce
Si vous n'aviez à gérer que deux invitations pour l'artiste principal, vous pourriez imaginer que vous avez
utiliser seulement deux variables avec les noms des invités. Le code pourrait se présenter appris sur les
comme ceci : données et les
javascript types !
1 let firstFrontRowGuest;
2 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 :
javascript

1 firstFrontRowGuest = "Sarah Kate";


2 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 :
javascript

1 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 :
javascript

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

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

1 let firstGuest = guests[0]; // "Sarah Kate"


2 let thirdGuest = guests[2]; // "Will Alexander"
3 let undefinedGuest = guests[12] // undefined

N'oubliez pas de démarrer à l'indice   0   !

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 signi e que quand vous faites quelque chose comme :
javascript

1 let numberOfGuests = 20;


2
3 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 :
javascript

1 let artistProfile = {
2 name: "Tao Perkington",
3 age: 27,
4 available: true
5 };
6
7 let allProfiles = [artistProfile]; // nouveau tableau contenant l'objet ci-dessus
8
9 artistProfile.available = false; // modification de l'objet
10
11 console.log(allProfiles) // affiche { nom: "Tao Perkington", âge: 27, disponible: false }

Bien que nous ayons créé le tableau et passé l'objet avant la modi cation 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 pro lArtiste et tousPro ls 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 !

Pour en savoir plus sur les types à passage par valeur et les types à passage par
référence en JavaScript, voici un article (en anglais) que je trouve très bien écrit et
facile à comprendre.

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 :


javascript

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


2
3 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 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 n d'un tableau, utilisez sa méthode push :


javascript

1 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 n, utilisez la méthode  
unshift   :
javascript

1 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 :
javascript

1 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 super u 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éri ez 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 signi e que vous
ne pouvez pas récupérer de façon able les éléments de liste, car ils n'ont pas d'indice
xe. Vous pouvez par contre ajouter et supprimer des éléments (les doublons ne sont pas
autorisés) et véri er 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éri er 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 ltrer ou
modi er dans certains cas les paires clés/valeurs.

Les sets et les maps, bien qu'ils soient utiles dans certains cas, sortent du cadre de
ce cours. Pour en savoir plus, voici quelques liens utiles :

sets ;
maps.

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 ;
en n, vous avez découvert les notions de sets et de maps.

J'AI TERMINÉ CE CHAPITRE ET JE PASSE AU SUIVANT

DÉFINISSEZ DES OBJETS ET LEURS


 RÉSUMÉ DE LA PARTIE 1 
ATTRIBUTS AVEC DES CLASSES

Le professeur
Will Alexander
Scottish developer, teacher and musician based in Paris.

OPENCLASSROOMS ENTREPRISES EN PLUS Français


 
L'entreprise Employeurs Nous rejoindre

Financement Devenez mentor


CONTACT

Forum Conditions générales d'utilisation

Blog Politique de Protection des données


personnelles

Accessibilité