Aller au contenu principal

Les tableaux

Ranger plusieurs valeurs dans une liste ordonnée, y retrouver un élément et ne pas se faire piéger par un élément introuvable.

Objectifs de la séance​

  • créer un tableau et lire un élément avec son indice (qui commence à 0) ;
  • utiliser length, at, push, includes et join ;
  • chercher un élément avec find et gérer le cas « introuvable » ;
  • parcourir un tableau d'objets avec for...of ou forEach ;
  • reconnaître les méthodes qui modifient le tableau.

Petite vérification​

Avant de commencer, vérifiez si vous savez...

  1. créer l'objet joueur avec les propriétés pseudo ("Alice") et score (12), puis afficher Alice 12 avec un seul console.log
  2. afficher Inconnu à partir de joueur.equipe?.nom ?? "Inconnu" (l'objet n'a pas de propriété equipe)
  3. dire ce que renvoie console.log(0 ?? 10) et pourquoi
📌 Réponse attendue

Notions théoriques​

Un tableau, c'est une liste numérotée​

Un tableau (array) est une liste de valeurs entre crochets. Chaque valeur a un numéro, appelé indice, qui commence à 0.

const themes = ["mots de passe", "hameçonnage", "réseaux"];

console.log(themes[0]);     // mots de passe
console.log(themes[2]);     // réseaux
console.log(themes.length); // 3
console.log(themes[3]);     // undefined (cet indice n'existe pas)
Indice012
Valeur"mots de passe""hameçonnage""réseaux"

Lire un indice qui n'existe pas ne plante pas : cela renvoie undefined. C'est discret, donc dangereux : on s'en aperçoit plus tard, ailleurs.

Pour lire le dernier élément sans calculer length - 1, utilisez at(-1) :

console.log(themes.at(-1)); // réseaux

Un tableau d'objets : la base de toutes les applications​

En pratique, les tableaux contiennent presque toujours des objets : une liste de questions, de joueurs, de messages.

const reponses = [
  { id: 11, texte: "123456", estCorrecte: false },
  { id: 12, texte: "MonChienRex", estCorrecte: false },
  { id: 13, texte: "Velo-Rouge-Mange-7-Nuages!", estCorrecte: true },
  { id: 14, texte: "azerty", estCorrecte: false },
];

console.log(reponses[2].texte); // Velo-Rouge-Mange-7-Nuages!
console.log(reponses.length);   // 4

Ajouter, tester, assembler​

const themes = ["mots de passe", "hameçonnage"];

themes.push("réseaux");                 // ajoute à la fin
console.log(themes.length);             // 3
console.log(themes.includes("réseaux")); // true
console.log(themes.join(" / "));        // mots de passe / hameçonnage / réseaux
Certaines méthodes modifient le tableau

push modifie le tableau d'origine (comme pop, shift, unshift, splice et sort). Cela fonctionne même avec const, car const protège la variable et non son contenu. Dans React, modifier un tableau « en place » empêche l'écran de se mettre à jour : à la prochaine séance, vous verrez comment créer une copie à la place.

Chercher avec find​

find parcourt le tableau et renvoie le premier élément pour lequel le callback répond true.

const bonneReponse = reponses.find((reponse) => reponse.estCorrecte);
console.log(bonneReponse);
{ id: 13, texte: 'Velo-Rouge-Mange-7-Nuages!', estCorrecte: true }

Que se passe-t-il si aucun élément ne correspond ? find renvoie undefined.

const introuvable = reponses.find((reponse) => reponse.id === 99);
console.log(introuvable);       // undefined
console.log(introuvable.texte); // TypeError: Cannot read properties of undefined

Le réflexe robuste : toujours prévoir le cas où find ne trouve rien, avec ?. et ?? (vus à la séance précédente).

console.log(introuvable?.texte ?? "Réponse introuvable"); // Réponse introuvable

Parcourir un tableau​

// for...of : le plus simple
for (const reponse of reponses) {
  console.log(reponse.texte);
}

// forEach : avec l'indice en deuxième paramètre du callback
reponses.forEach((reponse, indice) => {
  console.log(`${indice + 1}. ${reponse.texte}`);
});
1. 123456
2. MonChienRex
3. Velo-Rouge-Mange-7-Nuages!
4. azerty

Est-ce bien un tableau ? Est-il vide ?​

console.log(Array.isArray(reponses)); // true
console.log(typeof reponses);         // "object" (peu utile pour distinguer un tableau)

const vide = [];
console.log(vide.length === 0); // true : le tableau est vide
Bonne pratique - Tester un tableau vide avec length

Un tableau vide [] est considéré comme vrai dans un if (if ([]) est vrai !). Pour savoir s'il est vide, testez toujours tableau.length === 0.

Test de mémorisation/compréhension​


Que renvoie themes[1] avec : const themes = ["mots de passe", "hameçonnage", "réseaux"]; ?


Que renvoie themes[5] si le tableau contient 3 éléments ?


Quelle expression renvoie le dernier élément du tableau reponses ?


Que renvoie reponses.find((r) => r.id === 99) si aucune réponse n'a cet id ?


Comment tester qu'un tableau est vide ?


Laquelle de ces méthodes modifie le tableau d'origine ?


TP pour réfléchir et résoudre des problèmes​

Votre mission : manipuler les réponses d'une question du quiz et retrouver la bonne, sans risque de plantage. Travaillez dans le fichier labo-js/tableaux.js.

Point de départ :

const reponses = [
  { id: 11, texte: "123456", estCorrecte: false },
  { id: 12, texte: "MonChienRex", estCorrecte: false },
  { id: 13, texte: "Velo-Rouge-Mange-7-Nuages!", estCorrecte: true },
  { id: 14, texte: "azerty", estCorrecte: false },
];

Étape 1 — Lire un élément et compter​

Affichez le texte de la première réponse puis le nombre de réponses.


Bonne pratique - Premier élément = indice 0

L'erreur classique du débutant est de croire que le premier élément est à l'indice 1. Une liste de 4 éléments a pour indices 0, 1, 2 et 3.

Étape 2 — Retrouver la bonne réponse​

Utilisez find pour récupérer la réponse dont estCorrecte vaut true.


Bonne pratique - Nommer le paramètre du callback au singulier

Pour un tableau reponses, le paramètre du callback s'appelle reponse. Le code se lit alors comme une phrase : « trouve la réponse qui est correcte ».

Étape 3 — Gérer le cas « introuvable »​

Sur un tableau vide, find ne trouve rien. Affichez Aucune bonne réponse dans ce cas, sans provoquer d'erreur.


Bonne pratique - Après find, toujours se méfier d'undefined

find est l'une des premières causes de plantage dans les applications : on suppose que l'élément existe, et un jour il n'existe plus. Prévoyez toujours le cas « introuvable ».

Étape 4 — Afficher une liste numérotée​

Affichez chaque réponse précédée de sa lettre (A, B, C, D) grâce à l'indice.


Bonne pratique - Ne pas modifier pendant qu'on parcourt

Ne retirez ou n'ajoutez jamais d'éléments dans un tableau pendant que vous le parcourez : le résultat devient imprévisible. Construisez plutôt un nouveau tableau.

📌 Une solution

Ce qu'il faut retenir​

NotionRésumé
TableauListe ordonnée entre crochets, dont le premier indice est 0.
Indice inexistanttableau[10] renvoie undefined sans erreur : attention aux bugs silencieux.
length, at(-1)Nombre d'éléments, et dernier élément.
findRenvoie le premier élément qui correspond, ou undefined : toujours prévoir ce cas.
pushAjoute à la fin en modifiant le tableau d'origine.
Tableau videSe teste avec tableau.length === 0.

Aperçu de la prochaine séance​

Vous savez lire les objets et les tableaux. Dans la prochaine séance, vous apprendrez à extraire leurs valeurs en une seule ligne (la destructuration) et à copier au lieu de modifier (l'opérateur spread ...). Deux outils présents dans chaque composant React.