Aller au contenu principal

Les Collections

En JavaScript, les structures de données telles que les "Arrays", les "Sets", et les "Maps" sont des outils essentiels qui offrent des moyens flexibles de stocker, organiser et manipuler des données. Les "Arrays" fournissent une séquence ordonnée d'éléments, les "Sets" assurent une collection de valeurs uniques sans index, tandis que les "Maps" permettent d'associer des paires clé-valeur pour un accès efficace. Chacune de ces structures a ses propres caractéristiques et méthodes associées.

Array​

Nous avons déjà présenté Array dans la section type de base et boucles. Retenez ici qu'il existe un grand nombre de méthodes très pratiques pour manipuler des tableaux.

  • push et pop
let fruits = ['pomme', 'orange'];
fruits.push('banane'); // Ajoute 'banane' à la fin
const dernierFruit = fruits.pop(); // Retourne et retire 'banane'
important

Pour les Array, on peut faire exactement la même chose en utilisant le concept de la déstructuration à la place du push. Les deux écritures sont équivalentes. La tendance actuelle est plutôt à l'utilisation de la déstructuration. On peut aussi utiliser la déstructuration pour "récupérerer" une donnée au format désiré.

let fruits = ['pomme', 'orange'];
fruits = [...fruits, 'banane']; // Ajoute 'banane' à la fin via la destructuration
fruits = [...fruits, 'tomate']; // Ajoute 'tomate' à la fin via la destructuration

const unFruit = fruits.pop(); 
let resultat = [unFruit];
console.log(resultat); // Affichera ['tomate']

const unSecondFruit = fruits.pop();
resultat = [...unSecondFruit];
console.log(resultat); // Affichera ['b', 'a', 'n', 'a', 'n', 'e']

resultat = fruits.pop(); 
console.log(resultat);// Affichera 'orange'

//pomme est destructuré. 
const [lettre1, lettre2, ...resteLettres] = fruits.pop(); 
console.log(lettre1);// Affichera 'p'
console.log(lettre2);// Affichera 'o'
console.log(resteLettres);//Affichera  ['m', 'm', 'e']
  • unshift et shift
let fruits = ['orange', 'banane'];
fruits.unshift('pomme'); // Ajoute 'pomme' au début
let premierFruit = fruits.shift(); // Retourne et retire 'pomme'
  • concat 
let fruits = ['pomme', 'orange'];
let legumes = ['carotte', 'brocoli'];
let aliments = fruits.concat(legumes); // ['pomme', 'orange', 'carotte', 'brocoli']
console.log(aliments);
//ou avec la destructuration
aliments = [...fruits, ...legumes];
console.log(aliments);

  • indexOf() et lastIndexOf()
let fruits = ['pomme', 'orange', 'banane', 'fraise', 'banane'];
let indexBanane = fruits.indexOf('banane'); // 2
let lastIndexBanane = fruits.lastIndexOf('banane'); // 4

Il en existe plein d'autres : reverse, sort, ...

Initialisation d'un tableau
  • Remplir un tableau de 5 réels aléatoires :
Array(5).fill(Math.random(10));
  • Remplir un tableau de 5X5 réels
Array.from({ length: 5 }, function () {
    return Array(5).fill(Math.random(10));
});

Set​

En JavaScript, l'objet Set est une structure de données qui permet de stocker des valeurs uniques, sans doublons. Il faut voir un Set comme un Array dans lequel on ne souhaite pas avoir deux cases avec des valeurs identiques. Les Set peuvent contenir des valeurs de n'importe quel type de données, y compris des objets, des nombres, des chaînes de caractères, etc. Voici quelques caractéristiques importantes des Set en JavaScript :

  • Valeurs Uniques : Chaque valeur dans un Set doit être unique. Si une valeur est ajoutée à un Set qui existe déjà, elle ne sera pas ajoutée à nouveau.

  • Pas d'Indexation : Contrairement aux tableaux (Array), les Set ne sont pas indexés. Vous ne pouvez pas accéder à une valeur dans un Set par son index.

  • Itérable : Les Set sont itérables, ce qui signifie que vous pouvez parcourir leurs éléments à l'aide de boucles comme for...of.

  • Méthodes Utiles : Les Set fournissent des méthodes utiles telles que add() pour ajouter une valeur, delete() pour supprimer une valeur, et has() pour vérifier si une valeur existe dans le Set.

  • Taille Dynamique : Les Set n'ont pas de taille fixe, et la taille peut être déterminée à l'aide de la propriété size.

let mySet = new Set();
mySet.add(1);
mySet.add("du texte");
mySet.add("du texte");
mySet.size; // 2
for (let item of mySet) console.log(item);

mySet.add("toto");
for (let item of mySet) console.log(item);
mySet.has(1); // true
mySet.delete("toto");
mySet.size; // 2
for (let item of mySet) console.log(item);

Map​

En JS, l'objet Map est une structure de données qui permet d'associer des paires clé-valeur. Les clés et les valeurs peuvent être de n'importe quel type de données, offrant ainsi une grande flexibilité dans l'organisation et la manipulation des données. Voici quelques caractéristiques importantes des Map en JavaScript :

  • Clés Uniques : Chaque clé dans une Map est unique. Si une clé est ajoutée à la Map avec une valeur qui existe déjà pour cette clé, la nouvelle valeur écrase l'ancienne.

  • Types de Clés : Les clés peuvent être de n'importe quel type, y compris les objets, les chaînes de caractères, les nombres, etc.

  • Itérable : Les Map sont itérables, ce qui signifie que vous pouvez parcourir leurs éléments à l'aide de boucles comme for...of.

  • Taille Dynamique : Comme les tableaux, les Map n'ont pas de taille fixe, et la taille peut être déterminée à l'aide de la propriété size.

  • Méthodes Utiles : Les Map fournissent des méthodes utiles telles que set() pour ajouter une paire clé-valeur, get() pour récupérer une valeur par sa clé, has() pour vérifier si une clé existe, et delete() pour supprimer une paire clé-valeur.

let sayings = new Map();
sayings.set("dog", "woof");
sayings.set("cat", "meow");
sayings.set("elephant", "tot");
sayings.size; // 3
sayings.get("fox"); // undefined
sayings.has("bird"); // false
sayings.delete("dog");

for (let [key, value] of sayings) {
  console.log(key + " goes " + value);
}

sayings.set("elephant", "toot"); //pas d'ajout, cela modifie la valeur associée à la clef elephant

for (let [key, value] of sayings) {
  console.log(key + " goes " + value);
}

Objets et collections​

Le tutoriel sur les objets est celui juste après celui-ci. Avant de vous expliquer comment fonctionnent classes/objets/méthodes en JS, il est important de savoir comment manipuler les objets via des collections. En voici un exemple.

/**
 * Crée une carte d'étudiants à partir d'un tableau d'objets étudiants.
 * @param {Object[]} etudiants - Le tableau d'objets représentant les étudiants.
 * @param {string} etudiants[].nom - Le nom de l'étudiant.
 * @param {number} etudiants[].score - Le score de l'étudiant.
 * @param {number} etudiants[].age - L'âge de l'étudiant.
 * @returns {Map<string, number[]>} Une map d'étudiants où les clés sont les noms des étudiants
 * et les valeurs sont des tableaux contenant leur score et leur âge.
 */
const creerMapEtudiants = (etudiants) => {
    const mapEtudiants = new Map();
    //Une boucle for..of avec de la destructuration pour accéder aux 3 attributs de chaque instance
    for (const { nom, score, age } of etudiants) {
        const informations = [score, age]; // Crée un tableau avec le score et l'âge
        //On associe chaque clef à un tableau d'informations
        mapEtudiants.set(nom, informations);
    }
        return mapEtudiants;
}

// Exemple d'utilisation
const etudiants = [
    { nom: "Alice", score: 85, age: 25 },
    { nom: "Bob", score: 90, age: 30 },
    { nom: "Charlie", score: 75, age: 28 },
    { nom: "David", score: 80, age: 26 }
];
const resultats = creerMapEtudiants(etudiants);
console.log(resultats);

Comment choisir entre Map, Set et Array ?​

Le choix entre Array, Map, et Set dépend des besoins spécifiques de votre application. Voici quelques règles générales pour vous aider à choisir entre ces structures de données en fonction de certains critères :

Utiliser Array lorsque :
  • Vous avez une liste ordonnée d'éléments et l'ordre a une signification.
  • Vous devez accéder aux éléments par leur indice.
  • Vous avez besoin de méthodes intégrées pour manipuler des séquences d'éléments (comme push, pop, shift, unshift, slice, etc.).
  • Vous devez stocker des éléments dupliqués.
let cart = ['pomme', 'orange', 'banane', 'orange'];
Utiliser un Map lorsque :
  • Vous avez besoin d'associer des clés à des valeurs.
  • Vous devez effectuer des opérations fréquentes sur les paires clé-valeur.
let userMap = new Map();
userMap.set('nom', 'John');
userMap.set('age', 30);
Utiliser un Set lorsque :
  • Vous avez besoin de stocker des valeurs uniques.
  • Vous n'avez pas besoin d'associer des valeurs à des clés.
  • Vous devez effectuer des opérations fréquentes pour vérifier l'existence d'une valeur dans la collection.
let ensembleDeNombres = new Set([1, 2, 3, 4, 5]);

Exercices​

Travail à faire

Copiez-collez ce code dans un fichier html, lancez un live serveur avec VSCODE et testez / débuggez à l'aide de votre navigateur.


/**
 * Convertit une map d'étudiants en un tableau d'objets étudiants.
 * @param {Map<string, number[]>} mapEtudiants - La map d'étudiants à convertir.
 * @returns {Object[]} Un tableau d'objets représentant les étudiants.
 */
const convertirMapEnEtudiants = (mapEtudiants) => {
   /*
   À vous de compléter
   */
}

// Exemple d'utilisation
const mapEtudiants = new Map([
    ["Alice", [85, 25]],
    ["Bob", [90, 30]],
    ["Charlie", [75, 28]],
    ["David", [80, 26]]
]);

const etudiants = convertirMapEnEtudiants(mapEtudiants);
console.log(etudiants);