Créer un tableau, insérer, supprimer et modifier ses éléments, le parcourir, chercher et trier, et utiliser les méthodes modernes map, filter, find et reduce.
Une boutique en ligne d'artisanat de Safi gère son catalogue : des dizaines de poteries avec leur nom, leur prix et leur stock. Il faut ajouter un produit, retirer ceux qui sont épuisés, trier par prix, chercher un article, calculer la valeur du stock. Tout cela se fait avec les méthodes des tableaux.
Le tableau produits contient 4 poteries, chacune avec un prix et un stock.
const villes = ['Safi', 'Fès', 'Agadir'];
villes[0] // 'Safi'
villes.length // 3
villes[villes.length - 1] // dernier : 'Agadir'
| Méthode | Effet |
|---|---|
push(x) / pop() | ajouter / retirer à la fin |
unshift(x) / shift() | ajouter / retirer au début |
splice(i, n, ...) | retirer n éléments à l’indice i, et en insérer |
t[i] = x | modifier |
for (const v of villes) console.log(v);
villes.forEach((v, i) => console.log(i, v));
| Méthode | Renvoie |
|---|---|
includes(x) | true / false |
indexOf(x) | l’indice, ou -1 |
find(f) | le premier élément qui vérifie f, ou undefined |
findIndex(f) | son indice, ou -1 |
sort((a, b) => a - b) | trie sur place (croissant) |
reverse() | inverse l’ordre |
const dispo = produits.filter((p) => p.stock > 0); // garder
const noms = produits.map((p) => p.nom); // transformer
const total = produits.reduce((s, p) => s + p.prix * p.stock, 0); // réduire à une valeur
noms.join(', ') // en texte
filter, map et slice renvoient un nouveau tableau ; push, splice, sort modifient le tableau existant.
Un tableau est un train : chaque wagon a un numéro (l'indice, qui commence à 0). push accroche un wagon à la fin, pop décroche le dernier, shift décroche le premier.
const train = ['tajine', 'plat', 'bol']; train.push('vase'); // ['tajine', 'plat', 'bol', 'vase'] train[0]; // 'tajine' train.length; // 4
Sur la chaîne de tri, filter garde seulement les bonnes olives, map les transforme (en huile !), reduce les additionne pour obtenir un total.
const prix = [120, 45, 300]; prix.filter((p) => p < 200); // [120, 45] prix.map((p) => p * 1.2); // [144, 54, 360] prix.reduce((s, p) => s + p, 0); // 465
Avec splice, (1) supprimez l'élément d'indice 1 de ['a', 'b', 'c', 'd'] ; (2) insérez 'x' à l'indice 2 sans rien supprimer.
const t = ['a', 'b', 'c', 'd']; t.splice(1, 1); // t vaut ['a', 'c', 'd'] t.splice(2, 0, 'x'); // t vaut ['a', 'c', 'x', 'd']
Que donne [10, 9, 100].sort() ? Pourquoi ? Corrigez.
[10, 9, 100].sort() // [10, 100, 9] : tri alphabétique des textes ! [10, 9, 100].sort((a, b) => a - b) // [9, 10, 100] : tri numérique croissant
À partir de produits, construisez le tableau des noms en majuscules.
const noms = produits.map((p) => p.nom.toUpperCase());