Les méthodes de base des tableaux

Une meute de raptors ne reste jamais immobile : le matin, un nouvel individu rejoint l'enclos, le soir, un autre part chez le vétérinaire, et quelqu'un d'autre doit passer en tête de la file pour le repas. Reconstruire le tableau à chaque changement de ce genre serait fastidieux, et on risquerait d'y perdre un dinosaure. JavaScript offre une série de méthodes intégrées qui permettent d'ajouter, de supprimer et de modifier les éléments d'un tableau. Dans le contexte de Jurassic Park, nous en avons besoin pour gérer les listes de dinosaures, leur statut et leur emplacement.

Les méthodes qui modifient le tableau (mutatrices)

Le premier groupe de méthodes modifie le tableau sur place. Le résultat de leur action sera visible par tout fragment de code qui utilise le même tableau.

push() - ajouter à la fin

La méthode push() ajoute un ou plusieurs éléments à la fin du tableau et renvoie la nouvelle longueur du tableau :

1const pack = ["Blue", "Charlie"];
2console.log(pack.length); // 2
3
4pack.push("Delta");
5console.log(pack); // ["Blue", "Charlie", "Delta"]
6
7// Ajouter plusieurs éléments à la fois
8pack.push("Echo", "Fox");
9console.log(pack); // ["Blue", "Charlie", "Delta", "Echo", "Fox"]

La meute a grandi, bien que nous l'ayons déclarée avec const - la constante surveille l'affectation, pas le contenu du tableau. Souviens-toi aussi que push() renvoie un nombre, et non un tableau, ne traite donc pas son résultat comme une nouvelle meute.

pop() - supprimer à la fin

La méthode pop() fait l'inverse : elle supprime le dernier élément du tableau et le renvoie, tu sais donc tout de suite qui a quitté la meute :

1const pack = ["Blue", "Charlie", "Delta", "Echo"];
2const removed = pack.pop();
3
4console.log(removed); // "Echo"
5console.log(pack);    // ["Blue", "Charlie", "Delta"]

Echo disparaît du tableau, mais atterrit dans la variable removed, on peut donc transmettre la fiche au vétérinaire immédiatement. Sur un tableau vide, pop() ne signale pas d'erreur, il renvoie simplement undefined.

unshift() - ajouter au début

La méthode unshift() ajoute des éléments au début du tableau, en décalant tous les éléments existants d'une position :

1const pack = ["Charlie", "Delta"];
2pack.unshift("Blue");
3
4console.log(pack); // ["Blue", "Charlie", "Delta"]

Blue a maintenant l'indice 0, et Charlie passe à 1. Comme push(), unshift() renvoie lui aussi la nouvelle longueur du tableau.

shift() - supprimer au début

La méthode shift() supprime le premier élément du tableau et le renvoie. C'est le choix naturel quand tu sers la file d'attente du repas en commençant par le début :

1const pack = ["Blue", "Charlie", "Delta"];
2const first = pack.shift();
3
4console.log(first); // "Blue"
5console.log(pack);  // ["Charlie", "Delta"]

Les noms sont faciles à confondre, alors retiens la paire : shift() retire au début, et unshift() ajoute au début. Les deux renumérotent tous les éléments restants.

splice() - la modification polyvalente

La méthode splice() peut ajouter, supprimer ou remplacer des éléments à n'importe quel endroit du tableau. Elle modifie le tableau d'origine. Elle prend l'indice de départ, le nombre d'éléments à supprimer et, en option, de nouveaux éléments :

1const dinosaurs = ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops"];
2
3// Supprimer 1 élément à partir de l'indice 1
4dinosaurs.splice(1, 1);
5console.log(dinosaurs); // ["T-Rex", "Stegosaurus", "Triceratops"]
6
7// Insérer un élément à l'indice 1 (sans rien supprimer)
8dinosaurs.splice(1, 0, "Brachiosaurus");
9console.log(dinosaurs); // ["T-Rex", "Brachiosaurus", "Stegosaurus", "Triceratops"]
10
11// Remplacer l'élément à l'indice 2
12dinosaurs.splice(2, 1, "Pteranodon");
13console.log(dinosaurs); // ["T-Rex", "Brachiosaurus", "Pteranodon", "Triceratops"]

Chaque appel renvoie un tableau des éléments supprimés - le premier rendrait ["Velociraptor"]. Le deuxième montre qu'un nombre d'éléments à supprimer égal à zéro signifie une simple insertion, et le troisième combine suppression et insertion, c'est-à-dire un remplacement.

Une meute, deux noms

Avant de passer aux méthodes qui ne modifient rien, découvre un piège. Affecter un tableau à une nouvelle variable ne crée pas de copie, seulement un deuxième nom pour la même meute :

1const pack = ["Blue", "Charlie"];
2const nightShift = pack; // le même tableau, pas une copie
3
4nightShift.push("Delta");
5console.log(pack);                // ["Blue", "Charlie", "Delta"]
6console.log(nightShift === pack); // true

Une modification faite par un nom est visible sous l'autre, car les deux variables stockent une référence, c'est-à-dire un pointeur vers le même tableau en mémoire. Voici le cycle de vie des données : le moteur réserve la mémoire à la création du tableau, le code l'utilise à travers des références, et quand le tableau n'est plus accessible, le garbage collector la libère tout seul. Tu découvriras les détails dans la location sur la gestion de la mémoire.

Les méthodes qui ne modifient pas (non mutatrices)

slice() - copier un fragment du tableau

La méthode slice() renvoie un nouveau tableau qui est un fragment de l'original. Elle ne modifie pas l'original. Le second argument est l'indice avant lequel la copie s'arrête :

1const allDinos = ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops", "Pteranodon"];
2
3// slice(start, end) - de l'indice start jusqu'à end (end exclu)
4const herbivores = allDinos.slice(2, 4);
5console.log(herbivores); // ["Stegosaurus", "Triceratops"]
6console.log(allDinos);   // L'original est inchangé !
7
8// Copier tout le tableau
9const copy = allDinos.slice();
10console.log(copy); // ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops", "Pteranodon"]

L'élément à l'indice de fin n'entre pas dans le résultat, c'est pourquoi slice(2, 4) renvoie deux dinosaures. Un appel sans arguments copie tout le tableau - c'est le remède au piège des références. La copie est cependant superficielle : les objets à l'intérieur restent partagés.

La différence essentielle : splice() contre slice()

Les noms diffèrent d'une lettre, et le comportement du tout au tout : splice() réorganise la meute, slice() prend une photo d'une partie de celle-ci. Quand tu n'as pas besoin de modifier l'original, je te recommande slice() - un code sans mutations inattendues est plus facile à suivre.

Les chaînes de méthodes : map, filter et forEach

Les méthodes non mutatrices ont encore un avantage : puisqu'elles renvoient un nouveau tableau, on peut appeler aussitôt une autre méthode sur le résultat. C'est ainsi que naît une chaîne. Tu y rencontreras le plus souvent trois méthodes - map() transforme chaque élément, filter() ne garde que ceux qui correspondent, et forEach() exécute une action pour chacun :

1const pack = ["Blue", "Charlie", "Delta", "Echo"];
2
3const tags = pack.map(name => name.toUpperCase());
4console.log(tags); // ["BLUE", "CHARLIE", "DELTA", "ECHO"]
5
6const longNames = pack.filter(name => name.length > 4);
7console.log(longNames); // ["Charlie", "Delta"]
8
9// Une chaîne : d'abord le filtre, puis la transformation
10const alarms = pack.filter(name => name.length > 4).map(name => name + "!");
11console.log(alarms); // ["Charlie!", "Delta!"]
12
13pack.forEach(name => console.log("Présent :", name)); // renvoie undefined
14console.log(pack); // ["Blue", "Charlie", "Delta", "Echo"] - inchangé

map() renvoie toujours un nouveau tableau de même longueur, et filter() un tableau plus court ou égal. forEach() ne renvoie que undefined, on ne peut donc pas poursuivre la chaîne après lui. La dernière ligne confirme que la meute d'origine est restée intacte. Une quatrième méthode, reduce(), réduit un tableau à une seule valeur - nous nous en occuperons dans la prochaine leçon.

Dans le laboratoire ci-dessous, tu t'exerceras à ajouter et à retirer des raptors, puis à utiliser splice() et slice().

Retiens bien : les méthodes mutatrices réorganisent la meute dans l'enclos, et les non mutatrices la prennent en photo sans toucher à un seul raptor.

1// Methodes de base des tableaux - Gerer une meute de raptors
2
3const pack = ["Blue", "Charlie"];
4console.log("Meute initiale :", pack);
5
6// push() - ajoute a la fin
7pack.push("Delta");
8console.log("Apres push('Delta') :", pack);
9
10// pop() - retire en fin
11const removed = pack.pop();
12console.log("Apres pop() :", pack, "| Retire :", removed);
13
14// unshift() - ajoute au debut
15pack.unshift("Alpha");
16console.log("Apres unshift('Alpha') :", pack);
17
18// shift() - retire au debut
19const first = pack.shift();
20console.log("Apres shift() :", pack, "| Retire :", first);
21
22// === EXERCICE ===
23// TODO : cree un tableau dinosaurs avec 5 dinosaures
24const dinosaurs = ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops", "Pteranodon"];
25
26// TODO : utilise splice() pour retirer 1 element a partir de l'indice 2
27// TODO : utilise splice() pour inserer "Brachiosaurus" a l'indice 1
28
29console.log("\n=== splice() ===");
30console.log("Apres les operations splice :", dinosaurs);
31
32// TODO : utilise slice() pour extraire les elements de l'indice 1 a 3
33// Rappel : slice() NE modifie PAS le tableau d'origine !
34const fragment = dinosaurs.slice(1, 3);
35console.log("\n=== slice() ===");
36console.log("Fragment :", fragment);
37console.log("Original inchange :", dinosaurs);