Apprenez à programmer avec JavaScript

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

let guests = [];

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

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 la création d'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.

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 variablesartistProfileet  allProfiles 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 !

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 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 le travail 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.

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.

Retrouvez au chapitre suivant, un résumé de cette première partie du cours.