Tableaux JavaScript
La page d’avant rangeait les faits dans un texte qu’on peut envoyer plus tard. Ici la liste reste vivante dans le script, et tu peux réécrire ses cases. Trois noms de couleur se tiennent dans l’ordre. Tu désignes une case par son numéro, pas par une clé.
Une étagère, pas une note
Les crochets construisent la liste pendant que le script tourne, et chaque valeur occupe une case numérotée. Ce n’est pas un texte JSON qui attend parse, ni un objet dont les champs portent un nom. Tout le sens de cette forme est dans l’ordre des cases.
Le nom face au numéro
📊 Objet nommé contre tableau numéroté
| Question | Objet | Tableau |
|---|---|---|
| Comment tu désignes | une clé comme name | un indice comme 0 |
| Première couleur | pas une liste de couleurs | colors[0] |
| Combien | tu comptes les clés | length |
| Ordre | pas le sujet | le sujet |
| Après la page JSON | une note sur les données | une liste vivante dans le script |
Un objet demande quel nom tu vises, un tableau demande quelle place tu vises. La première couleur est colors[0], sans clé. Glisser un objet dans une case, c’est une habitude pour plus tard, pas pour cette page.
Des crochets, pas des accolades
Les accolades ouvrent un objet, les crochets ouvrent un tableau. Trois noms de couleur font trois cases à la suite. La tasse de la leçon d’avant était un champ nommé, pas une liste. Quand tu ne veux qu’une liste, garde les crochets.
let colors = ["red", "green", "blue"];
console.log(colors[0]);
La première case porte l’indice 0
colors[0] affiche red. On compte à partir de zéro, pas de un. Si tu pars de un, tu rates le rouge. La deuxième case est green, la troisième est blue.
let colors = ["red", "green", "blue"];
console.log(colors.length);
console.log(colors[colors.length - 1]);
length compte les cases
colors.length vaut 3 parce que trois noms sont rangés, et la dernière case colors[colors.length - 1] vaut blue. Tu retires un, parce que le premier indice est zéro, pas un. length est une propriété et ne prend pas de parenthèses d’appel.
let colors = ["red", "green", "blue"];
colors[1] = "gold";
console.log(colors[1]);
console.log(colors.length);
Remplacer ne change pas le nombre
colors[1] = "gold" écrit par-dessus green. La lecture suivante de cette case affiche gold. length reste à 3. Une case déjà présente a changé, aucune case neuve n’a été ajoutée. Ajouter et retirer des cases, c’est la leçon des méthodes de tableau.
let colors = ["red", "green", "blue"];
console.log(colors[9]);
console.log(colors.length);
Un indice vide n’est pas une case neuve
colors[9] ne stocke rien, donc la lecture vaut undefined et length reste 3. Lire une case vide n’allonge pas la liste. Écrire au-delà de la fin agrandit la longueur et laisse des trous, et ce n’est pas l’outil de cette page.
let bag = ["red", 12, true];
console.log(bag[1]);
console.log(typeof bag[0]);
Un seul genre de valeur se lit mieux
Une case peut tenir un texte, un nombre ou un boolean. bag[1] affiche 12 et typeof bag[0] vaut string. Une liste de couleurs est plus claire qu’un sac mélangé. Le langage n’interdit pas le mélange.
Montre la première couleur dans la page
Lis l’indice 0 et écris ce texte dans le paragraphe. Les deux autres couleurs restent dans la liste.
<!DOCTYPE html>
<html>
<head>
<title>arrays — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let colors = ["red", "green", "blue"];
let box = document.getElementById("line");
box.textContent = colors[0];
</script>
</body>
</html>
Le paragraphe affiche red. Change seulement le premier texte dans les crochets, puis recharge, et la ligne suit. Les deux autres couleurs restent stockées et ne sont pas écrites dans le paragraphe.
Étapes d’exercice
- Crée les trois couleurs et lis l’indice 0, puis lis la longueur et atteins la dernière couleur avec longueur moins un.
- Mets l’indice 1 à
goldet lis cette case ainsi que la longueur. - Lis l’indice 9 et vérifie que la longueur vaut encore 3, et dans le sac mélangé regarde le nombre et le type de la première case.
- Dans la démo HTML, change seulement la première couleur, recharge et lis le paragraphe.
Faux pas fréquents
- Compter depuis 1 et rater la première couleur, et appeler
lengthavec des parenthèses comme si c’était une fonction - Traiter le tableau comme du texte
JSONet le passer àparse - Croire que lire un indice vide fait grandir
length, ou que remplacer une case ajoute un élément - Chercher les méthodes de tableau sur cette page
L’essentiel
- Un tableau est une liste vivante dans le script, et les crochets la créent
- L’indice 0 est le premier élément
lengthcompte les cases et ne prend pas de parenthèses- Écrire sur un indice déjà là remplace cette case, et lire au-delà de la fin donne
undefinedsans changer la longueur - Le premier élément peut remplir une ligne de la page, et la suite ce sont les méthodes de tableau pour ajouter et retirer
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut