Mis à jour le 16/01/2018
  • 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Stockez vos données dans des tableaux

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

Ce chapitre va vous faire découvrir les tableaux, utilisés dans de nombreux programmes informatiques pour stocker des données.

Introduction : le rôle des tableaux

Imaginez que vous souhaitiez informatiser la liste de tous les films que vous avez vus cette année.

Une première solution serait de créer une variable par film, comme dans l'exemple suivant.

var film1 = "Le loup de Wall Street";
var film2 = "Vice-Versa";
var film3 = "Babysitting";
// ...

Si vous êtes cinéphile, vous risquez rapidement de vous retrouver avec un grand nombre de variables dans votre programme. Pire, toutes ces variables sont entièrement indépendantes. Il n'existe aucun moyen pour, par exemple, afficher la liste complète des films ou rechercher un titre dans la liste.

On pourrait stocker tous les titres dans une unique chaîne de caractères, en choisissant un caractère pour délimiter les titres.

var films = "Le loup de Wall Street - Vice-Versa - Babysitting - ...";

Cette chaîne risque de devenir exagérément longue, et que faire si le caractère délimiteur est également présent dans le titre d'un film, comme c'est le cas ici ?

Une autre possibilité consiste à regrouper les films dans un objet.

var films = {
    film1: "Le loup de Wall Street",
    film2: "Vice-Versa",
    film3: "Babysitting",
    // ...
};

Cette fois-ci, les données sont centralisées dans l'objetfilms. Cependant, les noms de ses propriétés (film1,film2,film3...) sont inutiles et répétitifs. A chaque nouveau film vu, il faudra ajouter à l'objet une propriétéfilmN sans se tromper sur la valeur deN, sous peine de masquer un film déjà présent dans l'objet.

Il faudrait trouver une solution pour mémoriser ensemble plusieurs éléments sans devoir les nommer individuellement. Cette solution existe : ce sont les tableaux. 

Un tableau est un type de donnée qui permet de stocker un ensemble d'éléments. Découvrons comment utiliser les tableaux en JavaScript.

Manipulation des tableaux en JavaScript

En JavaScript, un tableau est un objet disposant de propriétés particulières.

 Créer un tableau

Voici comment créer notre liste de films sous la forme d'un tableau.

var films = ["Le loup de Wall Street", "Vice-Versa", "Babysitting"];

On déclare un tableau à l'aide d'une paire de crochets[]. Tout ce qui se trouve entre les crochets correspond au contenu du tableau. Les différents éléments stockés sont séparés par des virgules.

Puisqu'un tableau est destiné à contenir plusieurs éléments, une bonne pratique consiste à donner aux variables tableaux des noms exprimant le pluriel, comme par exemple films,tabFilms  ou encorelesFilms.

Obtenir la taille d'un tableau

Le nombre d'éléments stockés dans un tableau est appelé sa taille. Voici comment l'obtenir.

var films = ["Le loup de Wall Street", "Vice-Versa", "Babysitting"];

console.log(films.length); // Affiche 3

Tapez l'exemple ci-dessus, ainsi que tous les suivants, dans le fichierchapitre_9/js/cours.js et testez-le avec le fichierchapitre_9/html/cours.html. Vous obtenez le résultat suivant.

La taille d'un tableau s'obtient en lui appliquant la propriétélength.

Bien entendu, cette propriété renvoie 0 dans le cas d'un tableau vide (sans aucun élément).

var tableauVide = []; // Création d'un tableau vide

console.log(tableauVide.length); // Affiche 0

 Accéder à un élément d'un tableau

 

Chaque élément présent dans un tableau est identifié par un numéro, appelé son indice (index en anglais). On peut représenter graphiquement un tableau comme un ensemble de cases, chacune stockant une valeur spécifique et associée à un indice. Voici comment on pourrait représenter le tableaufilms :

L'accès à un élément s'effectue en plaçant cet indice entre crochets, comme dans l'exemple ci-dessous.

var films = ["Le loup de Wall Street", "Vice-Versa", "Babysitting"];

console.log(films[0]); // Affiche "Le loup de Wall Street"
console.log(films[1]); // Affiche "Vice-Versa"
console.log(films[2]); // Affiche "Babysitting"

Hé oui, c'est exactement comme pour accéder à un caractère d'une chaîne ! Mieux encore, les mêmes règles d'or s'appliquent :

Mais ça, vous l'aviez déjà compris, n'est-ce-pas ? 

Utiliser un indice invalide pour accéder à un élément d'un tableau JavaScript renvoie la valeurundefined.

// ...

console.log(films[3]); // Affiche undefined

Dans d'autres langages, cela provoque une erreur : à éviter !

 Parcourir un tableau

Il existe deux solutions pour parcourir un tableau élément par élément.

La première consiste à utiliser la bouclefor que vous connaissez déjà. L'exemple ci-dessous permet d'afficher la liste des films présents dans le tableau.

var films = ["Le loup de Wall Street", "Vice-Versa", "Babysitting"];

for (var i = 0; i < films.length; i++) {
    console.log(films[i]);
}

Son exécution produit le résultat suivant.

Avec la bouclefor, on fait varier l'indice du tableau de 0 (indice du premier élément) à taille du tableau - 1 (indice du dernier) pour accéder aux éléments les uns après les autres.

Une autre solution consiste à utiliser la méthodeforEach() sur le tableau. Celle-ci permet d'appliquer une fonction sur chaque élément du tableau. Voici l'exemple précédent réécrit avecforEach().

var films = ["Le loup de Wall Street", "Vice-Versa", "Babysitting"];

films.forEach(function (film) {
    console.log(film);
});

Le résultat obtenu est identique.

Lors de l'exécution, chaque élément du tableau est successivement passé en paramètre à la fonction associée à la méthodeforEach()

Ajouter un élément dans un tableau

Inutile de nier : vous avez craqué et regardé Les Bronzés pour la 12ème fois.

Ajoutons ce film à la liste.

var films = ["Le loup de Wall Street", "Vice-Versa", "Babysitting"];

films.push("Les Bronzés");

console.log(films[3]); // Affiche "Les Bronzés"

L'ajout d'un nouvel élément dans un tableau se fait avec la méthodepush(). Elle prend en paramètre l'élément à insérer, qui est ajouté à la fin du tableau.

Tableaux d'objets

Un tableau permet de stocker tout type d'élément, y compris des objets... Et même d'autres tableaux !

Imaginons que vous souhaitiez stocker également l'année de sortie de chaque film vu cette année. Une première solution est de stocker ces dates directement dans le tableau des films, juste après chaque titre.

var films = ["Le loup de Wall Street", 2013, "Vice-Versa", 2015, "Babysitting", 2013];

Cependant, cela complique le parcours de la liste des films, puisqu'un indice du tableau sur deux correspond maintenant à un nombre. De plus, l'ajout de nouvelles données sur chaque film (genre, réalisateur, etc) rendrait cette solution encore plus bancale.

Nous pouvons faire mieux en représentant chaque film sous la forme d'un objet.

var Film = {
    // Initialise le film
    init: function (titre, annee) {
        this.titre = titre;
        this.annee = annee;
    },
    // Renvoie la description du film
    decrire: function () {
        var description = this.titre + " (" + this.annee + ")";
        return description;
    }
};

var film1 = Object.create(Film);
film1.init("Le loup de Wall Street", 2013);

var film2 = Object.create(Film);
film2.init("Vice-Versa", 2015);

var film3 = Object.create(Film);
film3.init("Babysitting", 2013);

L'objetFilm est le modèle de nos films. Sa méthodeinit() permet de lui donner un titre et une année de sortie, et sa méthodedecrire() permet de le décrire sous la forme : "titre (année)".

Les objetsfilm1,film2 etfilm3 sont créés avecFilm comme prototype pour bénéficier de ses propriétés.

A présent, on peut créer un tableaufilms contenant nos objets, puis l'utiliser pour afficher la description de chaque film.

// ...

var films = [];
films.push(film1);
films.push(film2);
films.push(film3);

films.forEach(function (film) {
    console.log(film.decrire());
});

Cet exemple donne le résultat d'exécution suivant.

Dans notre exemple, la fonction associée à la méthodeforEach() affiche le résultat de l'appel à la méthodedecrire() sur chaque objet du tableau des films.

A vous de jouer !

Ces exercices vont vous entraîner à l'utilisation des tableaux. Vous connaissez maintenant bien les consignes : nommage, indentation, etc. Pensez aussi à utiliser le pluriel pour nommer les tableaux dans vos programmes.

Les mousquetaires (résultat à obtenir)

Ecrivez un programmemousquetaires.js qui :

  1. crée un tableau contenant les noms des trois mousquetaires, Athos, Porthos et Aramis ;

  2. affiche le nom de chaque mousquetaire à l'aide d'une bouclefor ;

  3. ajoute au tableau le mousquetaire d'Artagnan ;

  4. affiche de nouveau le nom de chaque mousquetaire, cette fois à l'aide de la méthodeforEach().

 

Somme des valeurs (résultat à obtenir)

Ecrivez un programmesomme.js qui déclare le tableau ci-dessous.

var valeurs = [11, 3, 7, 2, 9, 10];

Le programme calcule et affiche ensuite la somme des éléments de ce tableau.

Maximum des valeurs (résultat à obtenir)

Ecrivez un programmemax.js qui déclare le tableau ci-dessous.

var valeurs = [11, 3, 7, 2, 9, 10];

Le programme calcule et affiche ensuite la plus grande valeur présente dans le tableau.

Saisie d'une liste de mots (résultat à obtenir)

Ecrivez un programmemots.js qui fait saisir à l'utilisateur des mots jusqu'à ce qu'il saisisse "stop". Le programme affiche alors la liste des mots saisis.

Liste de films avec réalisateurs (résultat à obtenir‌)

En vous inspirant du cours, écrivez un programmefilms.js qui gère un tableau de films. Chaque film est caractérisé par son titre, son année de sortie et son réalisateur.

Le programme ajoute trois films de votre choix dans le tableau, puis l'affiche élément par élément comme indiqué ci-dessous.

Gestion d'un chenil (résultat à obtenir)

Voici la définition d'un objetChien issu du chapitre sur la programmation orientée objet.

var Chien = {
    // initialise le chien
    init: function (nom, race, taille) {
        this.nom = nom;
        this.race = race;
        this.taille = taille;
    },
    // Renvoie l'aboiement du chien
    aboyer: function () {
        var aboiement = "Whoua ! Whoua !";
        if (this.taille < 25) {
            aboiement = "Kaii ! Kaii !";
        } else if (this.taille > 60) {
            aboiement = "Grrr ! Grrr !";
        }
        return aboiement;
    }
};

Utilisez cet objet dans un programmechenil.js qui ajoute trois chiens dans un tableau, puis affiche des informations sur le chenil et chacun de ses chiens.

Solutions des exercices

Le code source des solutions est consultable en ligne. ‌

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Exemple de certificat de réussite
Exemple de certificat de réussite