Créer et manipuler des tableaux en JavaScript

Bienvenue de retour à Jurassic Park ! Aujourd'hui, nous allons travailler avec les tableaux en JavaScript - des structures de données essentielles pour gérer des collections d'objets, comme nos espèces de dinosaures, les résultats de recherche génétique, ou les données des systèmes de surveillance du parc.

Qu'est-ce qu'un tableau ?

Les tableaux sont des collections ordonnées d'éléments qui peuvent stocker des données de n'importe quel type. Tu peux les comparer à des armoires de laboratoire où chaque tiroir (l'index du tableau) contient un échantillon précis (un élément du tableau). Chaque élément possède son propre numéro de position unique (l'index), qui commence à 0.

Créer des tableaux

En JavaScript, il existe plusieurs façons de créer des tableaux :

1. Le littéral de tableau (la plus courante)

La façon la plus répandue consiste à utiliser des crochets [] :

1// Tableau des espèces de dinosaures de notre parc
2const dinosaurs = ["Tyrannosaurus", "Velociraptor", "Triceratops", "Brachiosaurus"];
3
4// Tableau avec des types de données mixtes (nombres, chaînes, booléens)
5const dinoData = ["Blue", 5, true, 120.5];
6
7// Tableau vide, auquel nous ajouterons des éléments plus tard
8const dinoEnclosures = [];

2. Le constructeur Array

Nous pouvons aussi utiliser le constructeur Array() :

1// Tableau créé à l'aide du constructeur
2const parkSectors = new Array("A", "B", "C", "D", "E");
3
4// Tableau avec une longueur prédéfinie mais sans valeurs
5const securityReadings = new Array(10); // Crée un tableau avec 10 éléments vides
6
7// Remarque : si on ne passe qu'un seul nombre, cela crée un tableau de cette longueur
8// Si on passe plusieurs arguments, ils deviennent les éléments du tableau
9const confusingArray = new Array(3); // Tableau de longueur 3 : [empty x 3]
10const normalArray = new Array(1, 2, 3); // Tableau avec trois éléments : [1, 2, 3]

3. La méthode Array.of() (ES6)

Pour éviter l'ambiguïté du constructeur Array(), tu peux utiliser Array.of() :

1// Crée toujours un tableau avec les éléments passés
2const weights = Array.of(5000); // [5000], pas un tableau de longueur 5000
3const measurements = Array.of(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

4. La méthode Array.from() (ES6)

Cette méthode crée un tableau à partir d'objets semblables à des tableaux (par ex. les collections du DOM) ou d'itérables (par ex. les chaînes de caractères) :

1// Créer un tableau à partir d'un itérable (une chaîne de caractères)
2const dinoLetters = Array.from("TREX"); // ["T", "R", "E", "X"]
3
4// Créer un tableau avec une transformation
5const dinoAges = Array.from([5, 7, 3, 10], age => age * 2); // [10, 14, 6, 20]
6
7// Exemple avec une collection du DOM (dans le navigateur)
8// const dinoElements = Array.from(document.querySelectorAll('.dinosaur'));

Accéder aux éléments d'un tableau

Les éléments d'un tableau sont indexés à partir de 0, ce qui signifie que le premier élément a l'index 0, le deuxième l'index 1, et ainsi de suite.

1const velociraptors = ["Blue", "Delta", "Echo", "Charlie"];
2
3// Accéder à des éléments individuels
4console.log(velociraptors[0]); // "Blue"
5console.log(velociraptors[2]); // "Echo"
6
7// Modifier un élément
8velociraptors[1] = "Nouvelle Delta";
9console.log(velociraptors); // ["Blue", "Nouvelle Delta", "Echo", "Charlie"]
10
11// Accéder à un élément inexistant renvoie undefined
12console.log(velociraptors[10]); // undefined

La longueur d'un tableau

La propriété length renvoie le nombre d'éléments du tableau :

1const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops"];
2console.log(dinosaurs.length); // 3
3
4// On peut aussi modifier la longueur du tableau
5dinosaurs.length = 2;
6console.log(dinosaurs); // ["T-Rex", "Velociraptor"] - Triceratops a été supprimé
7
8// Augmenter la longueur ajoute des éléments vides
9dinosaurs.length = 5;
10console.log(dinosaurs); // ["T-Rex", "Velociraptor", empty x 3]

Opérations de base sur les tableaux

Ajouter des éléments

Il existe plusieurs façons d'ajouter des éléments à un tableau :

1. À la fin du tableau : push()

1const dinosaurs = ["T-Rex", "Velociraptor"];
2
3// Ajouter à la fin
4dinosaurs.push("Triceratops");
5console.log(dinosaurs); // ["T-Rex", "Velociraptor", "Triceratops"]
6
7// push peut ajouter plusieurs éléments à la fois
8dinosaurs.push("Brachiosaurus", "Stegosaurus");
9console.log(dinosaurs); // ["T-Rex", "Velociraptor", "Triceratops", "Brachiosaurus", "Stegosaurus"]
10
11// push renvoie la nouvelle longueur du tableau
12const newLength = dinosaurs.push("Ankylosaurus");
13console.log(newLength); // 6

2. Au début du tableau : unshift()

1const dinosaurs = ["Velociraptor", "Triceratops"];
2
3// Ajouter au début
4dinosaurs.unshift("T-Rex");
5console.log(dinosaurs); // ["T-Rex", "Velociraptor", "Triceratops"]
6
7// unshift peut aussi ajouter plusieurs éléments à la fois
8dinosaurs.unshift("Spinosaurus", "Dilophosaurus");
9console.log(dinosaurs); // ["Spinosaurus", "Dilophosaurus", "T-Rex", "Velociraptor", "Triceratops"]
10
11// unshift renvoie aussi la nouvelle longueur du tableau
12const newLength = dinosaurs.unshift("Compsognathus");
13console.log(newLength); // 6

3. À une position précise : splice()

1const dinosaurs = ["T-Rex", "Velociraptor", "Stegosaurus"];
2
3// Insérer un élément à la position 1 (comme deuxième élément)
4// splice(position, nombreASupprimer, elementsAAjouter...)
5dinosaurs.splice(1, 0, "Triceratops");
6console.log(dinosaurs); // ["T-Rex", "Triceratops", "Velociraptor", "Stegosaurus"]
7
8// Remplacer l'élément à la position 2
9dinosaurs.splice(2, 1, "Brachiosaurus");
10console.log(dinosaurs); // ["T-Rex", "Triceratops", "Brachiosaurus", "Stegosaurus"]
11
12// On peut ajouter plusieurs éléments à la fois
13dinosaurs.splice(1, 0, "Ankylosaurus", "Dilophosaurus");
14console.log(dinosaurs); // ["T-Rex", "Ankylosaurus", "Dilophosaurus", "Triceratops", "Brachiosaurus", "Stegosaurus"]

Supprimer des éléments

Comme pour l'ajout, il existe plusieurs méthodes pour supprimer des éléments :

1. À la fin du tableau : pop()

1const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops"];
2
3// Supprimer le dernier élément
4const removedDino = dinosaurs.pop();
5console.log(removedDino); // "Triceratops"
6console.log(dinosaurs); // ["T-Rex", "Velociraptor"]

2. Au début du tableau : shift()

1const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops"];
2
3// Supprimer le premier élément
4const removedDino = dinosaurs.shift();
5console.log(removedDino); // "T-Rex"
6console.log(dinosaurs); // ["Velociraptor", "Triceratops"]

3. À une position précise : splice()

1const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops", "Stegosaurus"];
2
3// Supprimer un élément à la position 1
4const removedDinos = dinosaurs.splice(1, 1);
5console.log(removedDinos); // ["Velociraptor"]
6console.log(dinosaurs); // ["T-Rex", "Triceratops", "Stegosaurus"]
7
8// Supprimer plusieurs éléments à partir de la position 1
9const moreRemovedDinos = dinosaurs.splice(1, 2);
10console.log(moreRemovedDinos); // ["Triceratops", "Stegosaurus"]
11console.log(dinosaurs); // ["T-Rex"]

Trouver des éléments dans un tableau

1. indexOf() et lastIndexOf()

1const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops", "Velociraptor"];
2
3// Trouver la première occurrence
4const firstIndex = dinosaurs.indexOf("Velociraptor");
5console.log(firstIndex); // 1
6
7// Trouver la dernière occurrence
8const lastIndex = dinosaurs.lastIndexOf("Velociraptor");
9console.log(lastIndex); // 3
10
11// Si l'élément n'existe pas, renvoie -1
12const notFoundIndex = dinosaurs.indexOf("Spinosaurus");
13console.log(notFoundIndex); // -1

2. includes() (ES6)

1const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops"];
2
3// Vérifier si un élément existe dans le tableau
4const hasVelociraptor = dinosaurs.includes("Velociraptor");
5console.log(hasVelociraptor); // true
6
7const hasSpinosaurus = dinosaurs.includes("Spinosaurus");
8console.log(hasSpinosaurus); // false

3. find() et findIndex() (ES6)

Ces méthodes sont utiles pour rechercher des éléments complexes (des objets) selon un critère :

1// Tableau d'objets dinosaures
2const dinosaurData = [
3  { name: "Rex", species: "Tyrannosaurus", age: 16, dangerous: true },
4  { name: "Blue", species: "Velociraptor", age: 5, dangerous: true },
5  { name: "Spike", species: "Stegosaurus", age: 10, dangerous: false },
6  { name: "Trixie", species: "Triceratops", age: 18, dangerous: false }
7];
8
9// Trouver le premier dinosaure de plus de 15 ans
10const oldDino = dinosaurData.find(dino => dino.age > 15);
11console.log(oldDino); // { name: "Rex", species: "Tyrannosaurus", age: 16, dangerous: true }
12
13// Trouver l'index du premier dinosaure inoffensif
14const safeIndex = dinosaurData.findIndex(dino => !dino.dangerous);
15console.log(safeIndex); // 2 (Spike)

Copier et fusionner des tableaux

1. Copier un tableau avec slice()

1const originalDinos = ["T-Rex", "Velociraptor", "Triceratops"];
2
3// Créer une copie du tableau entier
4const dinosCopy = originalDinos.slice();
5console.log(dinosCopy); // ["T-Rex", "Velociraptor", "Triceratops"]
6
7// Copier une partie du tableau (de l'index 1 jusqu'à la fin)
8const partialCopy = originalDinos.slice(1);
9console.log(partialCopy); // ["Velociraptor", "Triceratops"]
10
11// Copier une plage (de l'index 0 à 1, sans inclure 2)
12const rangeCopy = originalDinos.slice(0, 2);
13console.log(rangeCopy); // ["T-Rex", "Velociraptor"]

2. Fusionner des tableaux avec concat()

1const carnivores = ["T-Rex", "Velociraptor"];
2const herbivores = ["Triceratops", "Brachiosaurus", "Stegosaurus"];
3
4// Fusionner deux tableaux
5const allDinos = carnivores.concat(herbivores);
6console.log(allDinos);
7// ["T-Rex", "Velociraptor", "Triceratops", "Brachiosaurus", "Stegosaurus"]
8
9// Tu peux fusionner plusieurs tableaux à la fois
10const smallDinos = ["Compsognathus"];
11const allSpecies = carnivores.concat(herbivores, smallDinos);
12console.log(allSpecies);
13// ["T-Rex", "Velociraptor", "Triceratops", "Brachiosaurus", "Stegosaurus", "Compsognathus"]

3. L'opérateur de décomposition (ES6)

1const carnivores = ["T-Rex", "Velociraptor"];
2const herbivores = ["Triceratops", "Brachiosaurus"];
3
4// Fusionner des tableaux avec l'opérateur de décomposition
5const allDinos = [...carnivores, ...herbivores];
6console.log(allDinos); // ["T-Rex", "Velociraptor", "Triceratops", "Brachiosaurus"]
7
8// Tu peux ajouter des éléments au milieu
9const mixedCollection = [...carnivores, "Dilophosaurus", ...herbivores];
10console.log(mixedCollection);
11// ["T-Rex", "Velociraptor", "Dilophosaurus", "Triceratops", "Brachiosaurus"]
12
13// Copier un tableau avec l'opérateur de décomposition
14const dinosCopy = [...carnivores];
15console.log(dinosCopy); // ["T-Rex", "Velociraptor"]

Rechercher et trier des tableaux

1. Trier un tableau : sort()

1const dinosaurs = ["Velociraptor", "Tyrannosaurus", "Brachiosaurus", "Ankylosaurus"];
2
3// Tri alphabétique (par défaut)
4dinosaurs.sort();
5console.log(dinosaurs);
6// ["Ankylosaurus", "Brachiosaurus", "Tyrannosaurus", "Velociraptor"]
7
8// Trier des nombres (nécessite une fonction de comparaison)
9const dinoWeights = [5000, 500, 15000, 7000];
10
11// Le tri par défaut traite les nombres comme des chaînes - ça ne fonctionnera pas correctement !
12dinoWeights.sort();
13console.log(dinoWeights); // [15000, 500, 5000, 7000] (incorrect !)
14
15// Avec une fonction de comparaison - tri croissant correct
16dinoWeights.sort((a, b) => a - b);
17console.log(dinoWeights); // [500, 5000, 7000, 15000]
18
19// Tri décroissant
20dinoWeights.sort((a, b) => b - a);
21console.log(dinoWeights); // [15000, 7000, 5000, 500]

2. Trier des objets

1const dinosaurData = [
2  { name: "Rex", species: "Tyrannosaurus", age: 16 },
3  { name: "Blue", species: "Velociraptor", age: 5 },
4  { name: "Spike", species: "Stegosaurus", age: 10 },
5  { name: "Trixie", species: "Triceratops", age: 18 }
6];
7
8// Trier par âge (croissant)
9dinosaurData.sort((a, b) => a.age - b.age);
10console.log(dinosaurData.map(dino => `${dino.name} (${dino.age})`));
11// ["Blue (5)", "Spike (10)", "Rex (16)", "Trixie (18)"]
12
13// Trier par nom (alphabétiquement)
14dinosaurData.sort((a, b) => a.name.localeCompare(b.name));
15console.log(dinosaurData.map(dino => dino.name));
16// ["Blue", "Rex", "Spike", "Trixie"]

3. Inverser l'ordre : reverse()

1const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops", "Brachiosaurus"];
2
3// Inverser l'ordre des éléments
4dinosaurs.reverse();
5console.log(dinosaurs); // ["Brachiosaurus", "Triceratops", "Velociraptor", "T-Rex"]

Transformer des tableaux

1. Convertir en chaîne de caractères : join()

1const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops"];
2
3// Joindre tous les éléments en une chaîne avec le séparateur par défaut (la virgule)
4const dinoString = dinosaurs.join();
5console.log(dinoString); // "T-Rex,Velociraptor,Triceratops"
6
7// Avec un séparateur personnalisé
8const dinoList = dinosaurs.join(" | ");
9console.log(dinoList); // "T-Rex | Velociraptor | Triceratops"
10
11// Sans séparateur
12const dinoNoSeparator = dinosaurs.join("");
13console.log(dinoNoSeparator); // "T-RexVelociraptorTriceratops"

2. Convertir une chaîne en tableau : split()

1const dinoString = "T-Rex,Velociraptor,Triceratops";
2
3// Découper une chaîne en tableau
4const dinosaurs = dinoString.split(",");
5console.log(dinosaurs); // ["T-Rex", "Velociraptor", "Triceratops"]
6
7// Découper caractère par caractère
8const letters = "TREX".split("");
9console.log(letters); // ["T", "R", "E", "X"]

Exemples pratiques de manipulation de tableaux

Exemple 1 : Système d'inventaire des dinosaures

1// Système d'inventaire des dinosaures pour Jurassic Park
2const dinosaurInventory = {
3  species: [],
4
5  // Ajoute une nouvelle espèce à l'inventaire
6  addSpecies: function(name, count, carnivore) {
7    // Vérifie si l'espèce existe déjà
8    const existingIndex = this.species.findIndex(s => s.name === name);
9
10    if (existingIndex >= 0) {
11      // Met à jour l'espèce existante
12      this.species[existingIndex].count += count;
13      console.log(`Population de ${name} mise à jour : ${this.species[existingIndex].count}`);
14    } else {
15      // Ajoute une nouvelle espèce
16      this.species.push({
17        name,
18        count,
19        carnivore,
20        addDate: new Date().toISOString().split('T')[0]
21      });
22      console.log(`Nouvelle espèce ajoutée : ${name} (nombre de spécimens : ${count})`);
23    }
24
25    return this;
26  },
27
28  // Supprime des dinosaures (par ex. en cas de décès ou de transfert)
29  removeSpecimens: function(name, count, reason) {
30    const index = this.species.findIndex(s => s.name === name);
31
32    if (index === -1) {
33      console.log(`L'espèce ${name} n'existe pas dans l'inventaire.`);
34      return false;
35    }
36
37    if (this.species[index].count < count) {
38      console.log(`Erreur : tu essaies de retirer plus de spécimens (${count}) qu'il n'en existe (${this.species[index].count}).`);
39      return false;
40    }
41
42    this.species[index].count -= count;
43    console.log(`Retrait de ${count} spécimens de l'espèce ${name}. Raison : ${reason}.`);
44    console.log(`Il reste ${this.species[index].count} spécimens.`);
45
46    // S'il ne reste plus aucun spécimen, retire l'espèce de l'inventaire
47    if (this.species[index].count === 0) {
48      const removed = this.species.splice(index, 1)[0];
49      console.log(`L'espèce ${removed.name} a été entièrement retirée de l'inventaire.`);
50    }
51
52    return true;
53  },
54
55  // Génère le récapitulatif de l'inventaire
56  generateSummary: function() {
57    console.log("=== RÉCAPITULATIF DE L'INVENTAIRE DES DINOSAURES ===");
58
59    if (this.species.length === 0) {
60      console.log("Aucun dinosaure dans l'inventaire.");
61      return;
62    }
63
64    // Trie les espèces par population (décroissant)
65    const sortedSpecies = [...this.species].sort((a, b) => b.count - a.count);
66
67    // Nombre d'espèces et de spécimens
68    const totalSpecies = sortedSpecies.length;
69    const totalSpecimens = sortedSpecies.reduce((sum, species) => sum + species.count, 0);
70    console.log(`Nombre d'espèces : ${totalSpecies}`);
71    console.log(`Nombre total de spécimens : ${totalSpecimens}`);
72
73    // Sépare en carnivores et herbivores
74    const carnivores = sortedSpecies.filter(s => s.carnivore);
75    const herbivores = sortedSpecies.filter(s => !s.carnivore);
76
77    console.log(`Espèces carnivores : ${carnivores.length}`);
78    console.log(`Espèces herbivores : ${herbivores.length}`);
79
80    // Espèces les plus nombreuses
81    if (sortedSpecies.length > 0) {
82      console.log("\nPopulations les plus nombreuses :");
83      sortedSpecies.slice(0, 3).forEach((species, i) => {
84        console.log(`${i+1}. ${species.name} : ${species.count} spécimens`);
85      });
86    }
87
88    // Tableau de toutes les espèces
89    console.log("\nListe détaillée des espèces :");
90    console.log("Nom    | Population | Type        | Date d'ajout");
91    console.log("-------|------------|-------------|-------------");
92    sortedSpecies.forEach(species => {
93      const type = species.carnivore ? "Carnivore" : "Herbivore";
94      console.log(`${species.name.padEnd(6)} | ${String(species.count).padEnd(10)} | ${type.padEnd(11)} | ${species.addDate}`);
95    });
96  }
97};
98
99// Test du système d'inventaire
100dinosaurInventory.addSpecies("T-Rex", 3, true);
101dinosaurInventory.addSpecies("Velociraptor", 12, true);
102dinosaurInventory.addSpecies("Triceratops", 8, false);
103dinosaurInventory.addSpecies("Brachiosaurus", 5, false);
104dinosaurInventory.addSpecies("Gallimimus", 20, false);
105
106// Mise à jour d'une espèce existante
107dinosaurInventory.addSpecies("Velociraptor", 4, true); // Ajoute 4 nouveaux Velociraptor
108
109// Suppression de spécimens
110dinosaurInventory.removeSpecimens("T-Rex", 1, "Mort de vieillesse");
111dinosaurInventory.removeSpecimens("Gallimimus", 5, "Transfert vers un autre parc");
112
113// Génération du récapitulatif
114dinosaurInventory.generateSummary();

Exemple 2 : Analyse de données génétiques

1// Données génétiques simplifiées sous forme de tableau
2const geneticData = [
3  { id: "TRX01", species: "Tyrannosaurus", sequenceMatch: 0.85, viability: "Élevée", complete: true },
4  { id: "VLR02", species: "Velociraptor", sequenceMatch: 0.93, viability: "Moyenne", complete: true },
5  { id: "TRC04", species: "Triceratops", sequenceMatch: 0.79, viability: "Faible", complete: false },
6  { id: "BRCH1", species: "Brachiosaurus", sequenceMatch: 0.81, viability: "Moyenne", complete: true },
7  { id: "STEG7", species: "Stegosaurus", sequenceMatch: 0.76, viability: "Faible", complete: false },
8  { id: "ANKL5", species: "Ankylosaurus", sequenceMatch: 0.88, viability: "Élevée", complete: true },
9  { id: "DILO3", species: "Dilophosaurus", sequenceMatch: 0.91, viability: "Moyenne", complete: false },
10  { id: "PTRD9", species: "Pteranodon", sequenceMatch: 0.72, viability: "Faible", complete: false }
11];
12
13// Fonctions d'analyse des données
14function analyzeGeneticData(data) {
15  console.log("=== ANALYSE DES DONNÉES GÉNÉTIQUES ===");
16
17  // 1. Combien de séquences sont complètes ?
18  const completeSequences = data.filter(seq => seq.complete);
19  console.log(`Séquences complètes : ${completeSequences.length} sur ${data.length} (${((completeSequences.length / data.length) * 100).toFixed(1)}%)`);
20
21  // 2. Coefficient moyen de correspondance des séquences
22  const averageMatch = data.reduce((sum, seq) => sum + seq.sequenceMatch, 0) / data.length;
23  console.log(`Correspondance moyenne des séquences : ${(averageMatch * 100).toFixed(1)}%`);
24
25  // 3. Extraire les meilleures et les pires correspondances
26  const sortedByMatch = [...data].sort((a, b) => b.sequenceMatch - a.sequenceMatch);
27
28  console.log("\nMeilleures correspondances de séquences :");
29  sortedByMatch.slice(0, 3).forEach((seq, i) => {
30    console.log(`${i+1}. ${seq.species} (ID: ${seq.id}): ${(seq.sequenceMatch * 100).toFixed(1)}%`);
31  });
32
33  console.log("\nPires correspondances de séquences :");
34  sortedByMatch.slice(-3).reverse().forEach((seq, i) => {
35    console.log(`${i+1}. ${seq.species} (ID: ${seq.id}): ${(seq.sequenceMatch * 100).toFixed(1)}%`);
36  });
37
38  // 4. Regrouper par viabilité
39  const viabilityGroups = data.reduce((groups, seq) => {
40    if (!groups[seq.viability]) {
41      groups[seq.viability] = [];
42    }
43    groups[seq.viability].push(seq);
44    return groups;
45  }, {});
46
47  console.log("\nRegroupement par viabilité :");
48  Object.entries(viabilityGroups).forEach(([viability, sequences]) => {
49    console.log(`${viability} : ${sequences.length} séquences`);
50    sequences.forEach(seq => {
51      console.log(`  - ${seq.species} (ID: ${seq.id})`);
52    });
53  });
54
55  // 5. Séquences prioritaires pour la suite de la recherche
56  const highPrioritySequences = data.filter(seq =>
57    seq.sequenceMatch > 0.85 && !seq.complete
58  );
59
60  console.log("\nSéquences prioritaires à compléter :");
61  if (highPrioritySequences.length > 0) {
62    highPrioritySequences.forEach(seq => {
63      console.log(`- ${seq.species} (ID: ${seq.id}): correspondance ${(seq.sequenceMatch * 100).toFixed(1)}%, viabilité : ${seq.viability}`);
64    });
65  } else {
66    console.log("Aucune séquence prioritaire.");
67  }
68
69  return {
70    totalSequences: data.length,
71    completeSequences: completeSequences.length,
72    averageMatch,
73    bestMatch: sortedByMatch[0],
74    worstMatch: sortedByMatch[sortedByMatch.length - 1],
75    viabilityDistribution: Object.fromEntries(
76      Object.entries(viabilityGroups).map(([key, val]) => [key, val.length])
77    ),
78    highPrioritySequences
79  };
80}
81
82// Exécuter l'analyse
83const analysisResults = analyzeGeneticData(geneticData);
84console.log("\nRésultat de l'analyse sous forme d'objet :", analysisResults);
85
86// Filtrage et manipulation des données
87console.log("\n=== MANIPULATION DES DONNÉES ===");
88
89// 1. Créer un nouveau tableau avec seulement certains champs
90const simplifiedData = geneticData.map(seq => ({
91  id: seq.id,
92  species: seq.species,
93  match: seq.sequenceMatch
94}));
95console.log("Données simplifiées :", simplifiedData);
96
97// 2. Filtrer pour ne garder que les séquences complètes à forte correspondance
98const highQualitySequences = geneticData.filter(seq =>
99  seq.complete && seq.sequenceMatch > 0.8
100);
101console.log("Séquences de haute qualité :", highQualitySequences);
102
103// 3. Trier par ordre alphabétique d'espèce
104const sortedBySpecies = [...geneticData].sort((a, b) =>
105  a.species.localeCompare(b.species)
106);
107console.log("Tri alphabétique par espèce :",
108  sortedBySpecies.map(seq => seq.species)
109);
110
111// 4. Fusionner avec un autre tableau (nouvelles données)
112const newGeneticData = [
113  { id: "PCHY1", species: "Pachycephalosaurus", sequenceMatch: 0.83, viability: "Moyenne", complete: true },
114  { id: "SPNO5", species: "Spinosaurus", sequenceMatch: 0.89, viability: "Élevée", complete: false }
115];
116
117const combinedData = [...geneticData, ...newGeneticData];
118console.log(`Données combinées : ${combinedData.length} séquences`);
119
120// 5. Assembler en une chaîne de rapport CSV
121const csvHeader = "ID,Espèce,Correspondance,Viabilité,Complète";
122const csvRows = combinedData.map(seq =>
123  `${seq.id},${seq.species},${seq.sequenceMatch},${seq.viability},${seq.complete}`
124);
125const csvReport = [csvHeader, ...csvRows].join('\n');
126console.log("Rapport CSV :");
127console.log(csvReport);

Méthodes avancées pour les tableaux (ES6+)

Le JavaScript moderne fournit de nombreuses méthodes puissantes pour travailler avec les tableaux, qui simplifient énormément le traitement des données.

1. map() - Transformer des éléments

La méthode map() crée un nouveau tableau en transformant chaque élément du tableau d'origine :

1const dinosaurs = [
2  { name: "Rex", species: "Tyrannosaurus" },
3  { name: "Blue", species: "Velociraptor" },
4  { name: "Spike", species: "Stegosaurus" }
5];
6
7// Récupérer seulement les noms
8const names = dinosaurs.map(dino => dino.name);
9console.log(names); // ["Rex", "Blue", "Spike"]
10
11// Créer de nouveaux objets
12const dinoLabels = dinosaurs.map(dino => ({
13  label: `${dino.name} (${dino.species})`,
14  id: dino.name.toLowerCase()
15}));
16console.log(dinoLabels);
17// [
18//   { label: "Rex (Tyrannosaurus)", id: "rex" },
19//   { label: "Blue (Velociraptor)", id: "blue" },
20//   { label: "Spike (Stegosaurus)", id: "spike" }
21// ]

2. filter() - Filtrer des éléments

La méthode filter() crée un nouveau tableau ne contenant que les éléments qui répondent à un critère donné :

1const dinosaurs = [
2  { name: "Rex", species: "Tyrannosaurus", carnivore: true, weight: 7000 },
3  { name: "Blue", species: "Velociraptor", carnivore: true, weight: 100 },
4  { name: "Spike", species: "Stegosaurus", carnivore: false, weight: 5000 },
5  { name: "Trixie", species: "Triceratops", carnivore: false, weight: 8000 }
6];
7
8// Filtrer uniquement les prédateurs
9const carnivores = dinosaurs.filter(dino => dino.carnivore);
10console.log(carnivores.map(dino => dino.name)); // ["Rex", "Blue"]
11
12// Filtrer les dinosaures lourds
13const heavyDinos = dinosaurs.filter(dino => dino.weight > 1000);
14console.log(heavyDinos.map(dino => dino.name)); // ["Rex", "Spike", "Trixie"]
15
16// Combiner des conditions
17const heavyCarnivores = dinosaurs.filter(dino => dino.carnivore && dino.weight > 1000);
18console.log(heavyCarnivores.map(dino => dino.name)); // ["Rex"]

3. reduce() - Agréger des éléments

La méthode reduce() réduit un tableau à une seule valeur en traitant tous les éléments :

1const dinosaurs = [
2  { name: "Rex", species: "Tyrannosaurus", weight: 7000 },
3  { name: "Blue", species: "Velociraptor", weight: 100 },
4  { name: "Spike", species: "Stegosaurus", weight: 5000 },
5  { name: "Trixie", species: "Triceratops", weight: 8000 }
6];
7
8// Calculer le poids total
9const totalWeight = dinosaurs.reduce((sum, dino) => sum + dino.weight, 0);
10console.log(`Poids total des dinosaures : ${totalWeight} kg`); // 20100 kg
11
12// Trouver le dinosaure le plus lourd
13const heaviestDino = dinosaurs.reduce(
14  (heaviest, dino) => dino.weight > heaviest.weight ? dino : heaviest,
15  dinosaurs[0]
16);
17console.log(`Dinosaure le plus lourd : ${heaviestDino.name} (${heaviestDino.weight} kg)`);
18// Dinosaure le plus lourd : Trixie (8000 kg)
19
20// Créer un objet associant chaque espèce à un dinosaure
21const dinosBySpecies = dinosaurs.reduce((acc, dino) => {
22  acc[dino.species] = dino;
23  return acc;
24}, {});
25
26console.log(dinosBySpecies.Velociraptor.name); // "Blue"

4. some() et every() - Tester des éléments

Ces méthodes vérifient si certains/tous les éléments répondent à un critère donné :

1const dinosaurs = [
2  { name: "Rex", species: "Tyrannosaurus", dangerous: true, contained: true },
3  { name: "Blue", species: "Velociraptor", dangerous: true, contained: false },
4  { name: "Spike", species: "Stegosaurus", dangerous: false, contained: true }
5];
6
7// Vérifier si un dinosaure au moins est dangereux
8const anyDangerous = dinosaurs.some(dino => dino.dangerous);
9console.log("Y a-t-il un dinosaure dangereux ?", anyDangerous); // true
10
11// Vérifier si tous les dinosaures sont contenus en sécurité
12const allContained = dinosaurs.every(dino => dino.contained);
13console.log("Tous les dinosaures sont-ils bien enfermés ?", allContained); // false
14
15// Vérifier si tous les dinosaures dangereux sont contenus
16const allDangerousContained = dinosaurs
17  .filter(dino => dino.dangerous)
18  .every(dino => dino.contained);
19console.log("Tous les dinosaures dangereux sont-ils enfermés ?", allDangerousContained); // false

5. flat() et flatMap() (ES2019)

Ces méthodes aplatissent des tableaux imbriqués :

1// Tableau imbriqué de dinosaures par enclos
2const enclosures = [
3  ["Rex", "Rexy"], // Enclos du T-Rex
4  ["Blue", "Delta", "Echo"], // Enclos du Velociraptor
5  ["Spike", "Spikey"], // Enclos du Stegosaurus
6  [] // Enclos vide
7];
8
9// Aplatir en un seul tableau
10const allDinos = enclosures.flat();
11console.log(allDinos); // ["Rex", "Rexy", "Blue", "Delta", "Echo", "Spike", "Spikey"]
12
13// Exemple plus complexe avec flatMap
14const enclosureData = [
15  { type: "T-Rex", dinosaurs: ["Rex", "Rexy"] },
16  { type: "Velociraptor", dinosaurs: ["Blue", "Delta", "Echo"] },
17  { type: "Stegosaurus", dinosaurs: ["Spike", "Spikey"] }
18];
19
20// Transformer et aplatir en une seule étape
21const dinosaursWithTypes = enclosureData.flatMap(enclosure =>
22  enclosure.dinosaurs.map(dino => `${dino} (${enclosure.type})`)
23);
24
25console.log(dinosaursWithTypes);
26// [
27//   "Rex (T-Rex)",
28//   "Rexy (T-Rex)",
29//   "Blue (Velociraptor)",
30//   "Delta (Velociraptor)",
31//   "Echo (Velociraptor)",
32//   "Spike (Stegosaurus)",
33//   "Spikey (Stegosaurus)"
34// ]

Récapitulatif

Les tableaux sont l'une des structures de données les plus puissantes en JavaScript, te permettant de stocker, d'organiser et de manipuler des collections d'éléments. Dans cette leçon, nous avons appris :

1. Différentes façons de créer des tableaux : littéraux de tableau, constructeur Array(), méthodes Array.of() et Array.from()
2. Opérations de base sur les tableaux : ajouter des éléments (push, unshift, splice), supprimer des éléments (pop, shift, splice), accéder aux éléments
3. Méthodes de recherche : indexOf, includes, find, findIndex
4. Méthodes de copie et de fusion : slice, concat, opérateur de décomposition (...)
5. Méthodes de tri et de comparaison : sort, reverse
6. Méthodes de transformation : join (vers une chaîne), split (depuis une chaîne)
7. Méthodes de traitement avancées : map, filter, reduce, some, every, flat, flatMap

Savoir utiliser efficacement les tableaux est essentiel dans le travail quotidien avec JavaScript, en particulier lorsqu'il s'agit de gérer de grands ensembles de données comme notre inventaire virtuel de dinosaures.

Dans la prochaine leçon, tu découvriras les méthodes qui ajoutent et suppriment des éléments d'un tableau.

1// Tableaux - Parc Jurassique
2console.log("Laboratoire des Tableaux JavaScript");
3console.log("Gestion des collections de dinosaures\n");
4
5// ===========================================
6// 1. CRÉATION DE TABLEAUX
7// ===========================================
8console.log("=== 1. Création de tableaux ===");
9
10// Méthode 1 : Littéral de tableau (le plus courant)
11const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops"];
12console.log("Littéral:", dinosaurs);
13
14// Méthode 2 : Constructeur Array
15const carnivores = new Array("T-Rex", "Velociraptor", "Spinosaurus");
16console.log("Constructeur:", carnivores);
17
18// Méthode 3 : Array.of()
19const herbivores = Array.of("Triceratops", "Stegosaurus", "Brachiosaurus");
20console.log("Array.of():", herbivores);
21
22// Méthode 4 : Array.from()
23const dinoNames = "TRex";
24const lettersArray = Array.from(dinoNames);
25console.log("Array.from():", lettersArray);
26
27// Tableau vide
28const emptyArray = [];
29console.log("Vide:", emptyArray, "longueur:", emptyArray.length);
30
31// Tableau de taille déterminée
32const fixedSize = new Array(5);
33console.log("Taille 5:", fixedSize, "longueur:", fixedSize.length);
34
35// ===========================================
36// 2. ACCÈS AUX ÉLÉMENTS
37// ===========================================
38console.log("\n=== 2. Accès aux éléments ===");
39
40const jurassicDinos = ["T-Rex", "Velociraptor", "Triceratops", "Stegosaurus", "Brachiosaurus"];
41
42console.log("\nAccès par index:");
43console.log("Premier [0]:", jurassicDinos[0]);
44console.log("Deuxième [1]:", jurassicDinos[1]);
45console.log("Dernier [-1 = length-1]:", jurassicDinos[jurassicDinos.length - 1]);
46
47// Accès à un index inexistant
48console.log("Inexistant [10]:", jurassicDinos[10]); // undefined
49
50// Longueur du tableau
51console.log("\nLongueur du tableau:", jurassicDinos.length);
52
53// ===========================================
54// 3. AJOUT D'ÉLÉMENTS
55// ===========================================
56console.log("\n=== 3. Ajout d'éléments ===");
57
58const parkDinos = ["T-Rex", "Velociraptor"];
59console.log("\nListe initiale:", parkDinos);
60
61// push() - ajoute à la fin
62parkDinos.push("Triceratops");
63console.log("push('Triceratops'):", parkDinos);
64
65parkDinos.push("Stegosaurus", "Brachiosaurus");
66console.log("push(2 éléments):", parkDinos);
67
68// unshift() - ajoute au début
69parkDinos.unshift("Dilophosaurus");
70console.log("unshift('Dilophosaurus'):", parkDinos);
71
72// Affectation directe à un index
73parkDinos[10] = "Pteranodon";
74console.log("parkDinos[10]:", parkDinos);
75console.log("Longueur:", parkDinos.length); // 11 (il y a des espaces vides !)
76
77// ===========================================
78// 4. SUPPRESSION D'ÉLÉMENTS
79// ===========================================
80console.log("\n=== 4. Suppression d'éléments ===");
81
82const removeDinos = ["T-Rex", "Velociraptor", "Triceratops", "Stegosaurus"];
83console.log("\nListe initiale:", removeDinos);
84
85// pop() - supprime le dernier
86const removed1 = removeDinos.pop();
87console.log(`pop(): '${removed1}' supprimé`, removeDinos);
88
89// shift() - supprime le premier
90const removed2 = removeDinos.shift();
91console.log(`shift(): '${removed2}' supprimé`, removeDinos);
92
93// delete - crée un "trou" (NON RECOMMANDÉ !)
94delete removeDinos[0];
95console.log("delete removeDinos[0]:", removeDinos);
96console.log("Longueur inchangée:", removeDinos.length);
97
98// splice() - suppression à partir de n'importe quel endroit
99const spliceDinos = ["T-Rex", "Velociraptor", "Triceratops", "Stegosaurus", "Brachiosaurus"];
100const removed3 = spliceDinos.splice(2, 1); // Supprime 1 élément à partir de l'index 2
101console.log(`\nsplice(2, 1): ${removed3} supprimé`, spliceDinos);
102
103// ===========================================
104// 5. MODIFICATION D'ÉLÉMENTS
105// ===========================================
106console.log("\n=== 5. Modification d'éléments ===");
107
108const modifyDinos = ["T-Rex", "Velociraptor", "Triceratops"];
109console.log("\nOriginale:", modifyDinos);
110
111// Changement d'un seul élément
112modifyDinos[1] = "Blue (Velociraptor)";
113console.log("Après changement [1]:", modifyDinos);
114
115// splice() pour remplacement
116modifyDinos.splice(2, 1, "Trike (Triceratops)", "Stego (Stegosaurus)");
117console.log("splice(2, 1, ...2 nouveaux):", modifyDinos);
118
119// ===========================================
120// 6. COPIE DE TABLEAUX
121// ===========================================
122console.log("\n=== 6. Copie de tableaux ===");
123
124const original = ["T-Rex", "Velociraptor", "Triceratops"];
125
126// Copie superficielle - opérateur spread
127const copy1 = [...original];
128console.log("\nSpread [...original]:", copy1);
129
130// Copie superficielle - slice()
131const copy2 = original.slice();
132console.log("slice():", copy2);
133
134// Copie superficielle - Array.from()
135const copy3 = Array.from(original);
136console.log("Array.from():", copy3);
137
138// Affectation (PAS une copie !)
139const reference = original;
140reference.push("Stegosaurus");
141console.log("\nRéférence (PAS une copie):");
142console.log("original:", original); // Également modifié !
143console.log("reference:", reference);
144
145// ===========================================
146// 7. COMBINAISON DE TABLEAUX
147// ===========================================
148console.log("\n=== 7. Combinaison de tableaux ===");
149
150const carnivoreList = ["T-Rex", "Velociraptor", "Spinosaurus"];
151const herbivoreList = ["Triceratops", "Stegosaurus", "Brachiosaurus"];
152
153// concat()
154const allDinos1 = carnivoreList.concat(herbivoreList);
155console.log("\nconcat():", allDinos1);
156
157// Opérateur spread
158const allDinos2 = [...carnivoreList, ...herbivoreList];
159console.log("Spread:", allDinos2);
160
161// Combinaison avec des éléments supplémentaires
162const allDinos3 = [...carnivoreList, "Dilophosaurus", ...herbivoreList];
163console.log("Spread + supplémentaires:", allDinos3);
164
165// ===========================================
166// 8. DÉCOUPAGE ET DIVISION
167// ===========================================
168console.log("\n=== 8. Découpage de tableaux ===");
169
170const allSpecies = ["T-Rex", "Velociraptor", "Triceratops", "Stegosaurus", "Brachiosaurus"];
171
172// slice(start, end) - ne modifie pas l'original
173const firstThree = allSpecies.slice(0, 3);
174console.log("\nslice(0, 3):", firstThree);
175console.log("Original:", allSpecies); // Inchangé
176
177const lastTwo = allSpecies.slice(-2);
178console.log("slice(-2) - 2 derniers:", lastTwo);
179
180const middle = allSpecies.slice(1, 4);
181console.log("slice(1, 4) - milieu:", middle);
182
183// splice(start, deleteCount, ...items) - modifie l'original
184const splicedArray = ["T-Rex", "Velociraptor", "Triceratops", "Stegosaurus"];
185const removedItems = splicedArray.splice(1, 2, "Blue", "Charlie");
186console.log("\nsplice(1, 2, 'Blue', 'Charlie'):");
187console.log("Supprimés:", removedItems);
188console.log("Modifié:", splicedArray);
189
190// ===========================================
191// 9. RECHERCHE DANS LES TABLEAUX
192// ===========================================
193console.log("\n=== 9. Recherche ===");
194
195const searchDinos = ["T-Rex", "Velociraptor", "Triceratops", "Velociraptor", "Stegosaurus"];
196
197// indexOf() - premier index
198console.log("\nindexOf('Velociraptor'):", searchDinos.indexOf("Velociraptor"));
199console.log("indexOf('Brachiosaurus'):", searchDinos.indexOf("Brachiosaurus")); // -1 (non trouvé)
200
201// lastIndexOf() - dernier index
202console.log("lastIndexOf('Velociraptor'):", searchDinos.lastIndexOf("Velociraptor"));
203
204// includes() - vérifie si contient
205console.log("\nincludes('T-Rex'):", searchDinos.includes("T-Rex"));
206console.log("includes('Pteranodon'):", searchDinos.includes("Pteranodon"));
207
208// find() - premier élément qui remplit une condition
209const longName = searchDinos.find(dino => dino.length > 10);
210console.log("\nfind(dino => dino.length > 10):", longName);
211
212// findIndex() - index du premier élément
213const longNameIndex = searchDinos.findIndex(dino => dino.length > 10);
214console.log("findIndex(dino => dino.length > 10):", longNameIndex);
215
216// ===========================================
217// 10. INVERSION ET TRI
218// ===========================================
219console.log("\n=== 10. Inversion et tri ===");
220
221const sortDinos = ["Triceratops", "Velociraptor", "Stegosaurus", "T-Rex", "Brachiosaurus"];
222console.log("\nOriginale:", sortDinos);
223
224// reverse() - inverse l'ordre (modifie l'original !)
225const reversed = [...sortDinos].reverse(); // Copie, cela ne change pas l'original
226console.log("reverse():", reversed);
227
228// sort() - trie alphabétiquement (modifie l'original !)
229const sorted = [...sortDinos].sort();
230console.log("sort():", sorted);
231
232// Tri personnalisé
233const weights = [8000, 80, 9000, 50000, 5000];
234console.log("\nPoids:", weights);
235
236const sortedWeights = [...weights].sort((a, b) => a - b);
237console.log("sort() croissant:", sortedWeights);
238
239const sortedDesc = [...weights].sort((a, b) => b - a);
240console.log("sort() décroissant:", sortedDesc);
241
242// ===========================================
243// 11. EXEMPLE COMPLET
244// ===========================================
245console.log("\n=== 11. Système d'inventaire - exemple complet ===");
246
247class DinosaurInventory {
248  constructor() {
249    this.dinosaurs = [];
250  }
251
252  add(name, species, sector, health = 100) {
253    const dino = { id: this.dinosaurs.length + 1, name, species, sector, health };
254    this.dinosaurs.push(dino);
255    console.log(`Ajouté: ${name} (${species}) au secteur ${sector}`);
256  }
257
258  remove(name) {
259    const index = this.dinosaurs.findIndex(d => d.name === name);
260    if (index !== -1) {
261      const removed = this.dinosaurs.splice(index, 1)[0];
262      console.log(`Supprimé: ${removed.name}`);
263    } else {
264      console.log(`Introuvable: ${name}`);
265    }
266  }
267
268  findBySector(sector) {
269    return this.dinosaurs.filter(d => d.sector === sector);
270  }
271
272  findBySpecies(species) {
273    return this.dinosaurs.filter(d => d.species === species);
274  }
275
276  getHealthy() {
277    return this.dinosaurs.filter(d => d.health >= 80);
278  }
279
280  getUnhealthy() {
281    return this.dinosaurs.filter(d => d.health < 80);
282  }
283
284  sortByName() {
285    return [...this.dinosaurs].sort((a, b) => a.name.localeCompare(b.name));
286  }
287
288  sortByHealth() {
289    return [...this.dinosaurs].sort((a, b) => b.health - a.health);
290  }
291
292  displayAll() {
293    console.log(`\nINVENTAIRE - Total: ${this.dinosaurs.length}`);
294    console.log("=".repeat(60));
295    this.dinosaurs.forEach((dino, i) => {
296      console.log(`${i + 1}. ${dino.name} (${dino.species}) - Secteur ${dino.sector} - Santé: ${dino.health}%`);
297    });
298  }
299
300  displayReport() {
301    console.log("\nRAPPORT DÉTAILLÉ");
302    console.log("=".repeat(60));
303
304    const sectors = [...new Set(this.dinosaurs.map(d => d.sector))].sort();
305    sectors.forEach(sector => {
306      const inSector = this.findBySector(sector);
307      console.log(`\nSecteur ${sector} (${inSector.length} dinosaures):`);
308      inSector.forEach(dino => {
309        console.log(`  - ${dino.name} (${dino.species}) - ${dino.health}%`);
310      });
311    });
312
313    const healthy = this.getHealthy();
314    const unhealthy = this.getUnhealthy();
315
316    console.log(`\nEn bonne santé (${healthy.length}): ${healthy.map(d => d.name).join(", ")}`);
317    if (unhealthy.length > 0) {
318      console.log(`Nécessitent de l'attention (${unhealthy.length}): ${unhealthy.map(d => d.name).join(", ")}`);
319    }
320  }
321}
322
323// Démonstration du système
324const inventory = new DinosaurInventory();
325
326inventory.add("Rexy", "Tyrannosaurus Rex", "A", 95);
327inventory.add("Blue", "Velociraptor", "B", 100);
328inventory.add("Charlie", "Velociraptor", "B", 85);
329inventory.add("Trike", "Triceratops", "C", 70);
330inventory.add("Stego", "Stegosaurus", "C", 92);
331inventory.add("Brachio", "Brachiosaurus", "D", 88);
332
333inventory.displayAll();
334inventory.displayReport();
335
336console.log("\nTri par nom:");
337inventory.sortByName().forEach((d, i) => {
338  console.log(`  ${i + 1}. ${d.name}`);
339});
340
341console.log("\nTri par santé:");
342inventory.sortByHealth().forEach((d, i) => {
343  console.log(`  ${i + 1}. ${d.name} - ${d.health}%`);
344});
345
346inventory.remove("Charlie");
347inventory.displayAll();
348
349console.log("\nFélicitations ! Tu maîtrises maintenant les tableaux en JavaScript !");