Tableaux — ajouter, retirer, récupérer

Si tu ranges les articles d'un panier dans des variables séparées — item1 / item2 / item3 —, chaque nouveau produit t'oblige à ajouter une variable de plus et à réécrire le code qui les compte. Avec un tableau (une structure de données qui conserve plusieurs valeurs dans l'ordre, au sein d'une seule variable), tu peux en stocker autant que tu veux dans une seule variable, et laisser les méthodes du tableau se charger de l'ajout et du retrait.

Ranger des valeurs dans un tableau — index et length

Tu construis un tableau en listant des valeurs, séparées par des virgules, entre [ et ]. Chaque valeur s'appelle un élément (une des valeurs que contient le tableau). Tu peux mélanger chaînes et nombres, mais en pratique on y range des valeurs de même nature, pour garder un traitement cohérent par la suite.

Tu récupères un élément rangé dans le tableau en écrivant son index (la position d'un élément, comptée à partir de 0) entre []. Si tu écris cart[1] = "Scotch", seul l'élément à cette position est remplacé.

cart[0] est le 1er article, cart[1] le 2e. Comme le 1er article porte le numéro 0, il y a toujours un décalage d'un cran avec notre façon habituelle de compter.

length est le nombre d'éléments. Écris-le sans parenthèses, comme dans cart.length. Puisque l'index commence à 0, l'index du dernier élément est length moins 1.

at(-1) compte depuis la fin, ce qui te permet de récupérer le dernier élément sans passer par length. at(-2) donne l'avant-dernier.

Lire un index hors limites ne lève pas d'erreur : ça renvoie undefined, la valeur qui indique qu'aucune valeur n'est encore stockée là.

const cart = ["Cahier", "Stylo", "Scotch"];

console.log(cart[0]);        // Cahier
console.log(cart[2]);        // Scotch
console.log(cart.length);    // 3

// Le dernier article est à length moins 1, ou utilise at(-1)
console.log(cart[cart.length - 1]);   // Scotch
console.log(cart.at(-1));             // Scotch

// Lire un index hors limites ne lève pas d'erreur
console.log(cart[5]);        // undefined

Ajouter et retirer aux deux extrémités — push / pop / shift / unshift

Le contenu d'un panier change à chaque fois qu'un article est ajouté ou retiré. Si tu réécris le tableau à la main à chaque fois, tu dois gérer toi-même le nombre d'articles et chacun des index. Les tableaux fournissent des méthodes pour ajouter et retirer des éléments aux deux extrémités : tu peux donc leur laisser les calculs de position.

push(value) ajoute un élément à la fin et renvoie le nouveau nombre d'éléments. pop() retire le dernier élément et renvoie l'élément retiré lui-même.

Pour afficher le nom de ce qui a été retiré, récupère le résultat de cette méthode (sa valeur de retour) dans une variable, comme dans const removed = cart.pop();.

unshift(value) et shift() s'occupent du début du tableau. unshift ajoute en tête, shift retire l'élément de tête. Si tu ajoutes un article en tête, tous les éléments qui le suivent voient leur index augmenter d'un cran.

const cart = ["Stylo"];

console.log(cart.push("Scotch"));   // 2 (le nouveau nombre d'éléments)
console.log(cart.join(", "));           // Stylo, Scotch

console.log(cart.pop());                // Scotch (l'élément retiré)
console.log(cart.join(", "));           // Stylo

cart.unshift("Post-it");             // ajoute en tête
console.log(cart.join(", "));           // Post-it, Stylo

console.log(cart.shift());              // Post-it (l'élément retiré)
console.log(cart.join(", "));           // Stylo

Ça peut sembler étrange que cart, déclaré avec const, voie son contenu changer. Ce que const interdit, c'est de réaffecter une autre valeur à ce nom, comme dans cart = unAutreTableau ; ça ne t'empêche pas de modifier le contenu du tableau, comme avec cart.push(value). La raison de cette différence est reprise dans un article ultérieur.

Reproduis le déroulé complet : tu ajoutes un article au panier, puis tu le retires. cart est déjà déclaré.

① Ajoute un stylo-plume à la fin du panier.

② Affiche le nom de l'article qui se trouve maintenant à la fin du panier.

③ Affiche le nombre d'articles après l'ajout.

④ Retire le dernier article, et affiche le nom de ce qui a été retiré.

⑤ Affiche ce qui reste dans le panier, les articles séparés par « , ».

(Si tout s'exécute correctement, une explication apparaîtra.)

Insère en tête de la liste des tâches du jour une intervention urgente qui vient de s'intercaler. tasks est déjà déclaré.

① Ajoute « Réponse incident » en tête de tasks.

② Affiche les tâches dans leur ordre, séparées par « → ».

③ Retire la première tâche, et affiche le nom de ce qui a été retiré.

④ Affiche la tâche qui est passée en tête après ce retrait.

Vérifier si quelque chose est inclus — includes et indexOf

Si tu ajoutes le même produit une deuxième fois à une liste de favoris avec un simple push, tu te retrouves avec le même nom deux fois. Vérifier si la valeur est déjà dans le tableau avant de l'ajouter évite les doublons.

includes(value) renvoie true si cette valeur est dans le tableau, false sinon. Quand tu as aussi besoin de la position, utilise indexOf(value), qui renvoie l'index de la première correspondance. Ça renvoie -1 quand rien ne correspond.

L'idée est la même que pour les includes / indexOf d'une chaîne : tu cherches simplement un élément au lieu d'un caractère.

Les deux comparent le type en plus de la valeur, comme ===, donc deux valeurs de types différents sont traitées comme différentes. Si tu passes la chaîne "2" à un tableau de nombres, il n'y aura aucune correspondance.

const favorites = ["Post-it", "Ardoise"];

console.log(favorites.includes("Post-it"));   // true
console.log(favorites.includes("Gomme"));  // false

console.log(favorites.indexOf("Ardoise"));   // 1
console.log(favorites.indexOf("Gomme"));   // -1

// Compare comme ===, donc des types différents ne correspondent jamais
const quantities = [1, 2, 3];
console.log(quantities.includes("2"));           // false

Ne mets pas le résultat de indexOf directement dans une condition

Quand la correspondance est trouvée en tête, indexOf renvoie 0. Comme 0 est falsy, écrire if (favorites.indexOf(name)) fait passer ce seul élément de tête pour « absent ». Utilise includes si tu veux seulement savoir si la valeur est présente, et quand tu utilises indexOf, compare son résultat explicitement, comme dans !== -1.

Vérifie si un produit sur le point d'être ajouté aux favoris est déjà enregistré. favorites / selected / newItem sont déjà déclarés.

① Affiche si selected est inclus dans favorites.

② Affiche si newItem est inclus dans favorites.

③ Affiche à quelle position se trouve selected dans favorites.

④ Affiche la position renvoyée en cherchant newItem.

Extraire ou remplacer une partie d'un tableau — slice et splice

Tu voudras parfois n'afficher que le top 3 d'un classement de ventes, ou remplacer une seule entrée dans une liste d'options de livraison. Ce qui distingue les deux méthodes, c'est qu'on extrait sans toucher au tableau d'origine, ou bien qu'on modifie ce tableau d'origine lui-même.

slice(start, end) renvoie un nouveau tableau contenant tout, depuis l'index de début jusqu'à l'index de fin, exclu. Le tableau d'origine ne change pas.

Si tu omets la fin, l'extraction va jusqu'au bout du tableau. La façon de compter est la même que pour le slice d'une chaîne.

splice(start, deleteCount, itemsToAdd) modifie le tableau d'origine lui-même. Il retire deleteCount éléments à partir de start, et si tu écris des éléments à ajouter, il les insère juste à cette position.

Il renvoie un tableau des éléments retirés, donc quand tu n'en retires qu'un seul, lis son contenu avec [0].

const ranking = ["Stylo", "Scotch", "Post-it", "Ardoise"];

// slice renvoie un nouveau tableau ; ranking est inchangé
const top2 = ranking.slice(0, 2);
console.log(top2.join(", "));       // Stylo, Scotch
console.log(ranking.length);        // 4

// splice modifie ranking lui-même
const removed = ranking.splice(1, 2, "Gomme");
console.log(removed.join(", "));    // Scotch, Post-it
console.log(ranking.join(", "));    // Stylo, Gomme, Ardoise
console.log(ranking.length);        // 3

slice et splice : une lettre d'écart, un résultat totalement différent

Les noms se ressemblent, mais slice renvoie un nouveau tableau sans toucher à celui d'origine, tandis que splice modifie ce tableau d'origine. Si tu appelles splice juste pour afficher une liste, les données de départ diminuent un peu à chaque affichage. Pour une simple extraction, utilise slice.

Extrais d'un classement de ventes la plage que tu veux afficher. ranking, qui compte 5 entrées, est déjà déclaré.

① Extrais le top 3 et stocke-le dans une variable à part.

② Affiche les 3 entrées extraites, séparées par « , ».

③ Extrais tout à partir de la 4e place, et affiche combien il y en a.

④ Affiche le nombre d'entrées du classement d'origine.

Remplace une seule entrée dans une liste d'options de livraison. shipping est déjà déclaré.

① Remplace la 2e option par « Livraison en soirée », et récupère l'élément retiré.

② Affiche le nom de l'option qui a été retirée.

③ Affiche la liste après le remplacement, les options séparées par « , ».

④ Affiche le nombre d'options après le remplacement.