Les objets Set, Map, WeakSet, WeakMap en JavaScript sont des outils essentiels pour la manipulation de collections de données et la gestion de mappages dans vos applications. Comprendre comment utiliser Set, Map, WeakSet, WeakMap en JavaScript vous permettra d’améliorer l’efficacité et la performance de votre code. Apprenons leur fonctionnement à travers des exemples concrets.
Introduction aux Objets Set, Map, WeakSet, WeakMap en JavaScript
Set en JavaScript est une collection d’éléments uniques qui permet de stocker des valeurs primitives ou des objets. Voici comment créer et manipuler un Set :
Créer et Utiliser un Set
Pour créer un Set, vous pouvez utiliser le constructeur Set(), et ajouter des éléments avec la méthode add() :
// Créer un Set
const set = new Set();
// Ajouter des éléments
set.add(1);
set.add(2);
set.add(3);
set.add(1); // Duplicate value
console.log(set); // Output: Set(3) {1, 2, 3}Manipuler les Valeurs dans un Set
Vous pouvez vérifier la présence d’un élément avec has(), supprimer un élément avec delete(), ou itérer sur les valeurs avec forEach() et for...of :
const set = new Set([1, 2, 3]);
console.log(set.has(2)); // Output: true
set.delete(2);
console.log(set.has(2)); // Output: false
// Itérer sur les valeurs
set.forEach(value => console.log(value));
for (const value of set) {
console.log(value);
}Créer et Utiliser un Map
Un Map en JavaScript est une collection de paires clé-valeur. Contrairement à un object, un Map peut avoir des clés de tout type.
// Créer un Map
const map = new Map();
// Ajouter des paires clé-valeur
map.set('name', 'John');
map.set('age', 30);
console.log(map); // Output: Map(2) {'name' => 'John', 'age' => 30}
// Accéder à une valeur
console.log(map.get('name')); // Output: John
// Vérifier la présence d'une clé
console.log(map.has('age')); // Output: true
// Supprimer une paire clé-valeur
map.delete('age');
console.log(map.has('age')); // Output: falseItérer sur un Map
Il est possible d’itérer sur un Map en utilisant des boucles for...of, ou en récupérant les itérateurs des clés, valeurs, ou entrées :
const map = new Map([
['name', 'John'],
['age', 30]
]);
// Itérer sur les entrées
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// Récupérer les clés
for (const key of map.keys()) {
console.log(key);
}
// Récupérer les valeurs
for (const value of map.values()) {
console.log(value);
}Créer et Utiliser un WeakSet
Un WeakSet est similaire à un Set, mais il ne peut contenir que des objets, et non des valeurs primitives. Les objets stockés dans un WeakSet sont faiblement référencés, ce qui signifie qu’ils peuvent être collectés par le garbage collector s’il n’existe plus aucune référence à eux.
// Créer un WeakSet
const weakSet = new WeakSet();
const obj1 = {name: 'John'};
const obj2 = {age: 30};
// Ajouter des objets
weakSet.add(obj1);
weakSet.add(obj2);
console.log(weakSet.has(obj1)); // Output: true
// Supprimer un objet
weakSet.delete(obj1);
console.log(weakSet.has(obj1)); // Output: falseCréer et Utiliser un WeakMap
Un WeakMap est une collection de paires clé-valeur où les clés sont des objets et les valeurs peuvent être de tout type. Comme pour WeakSet, les clés dans un WeakMap sont faiblement référencées.
// Créer un WeakMap
const weakMap = new WeakMap();
const obj1 = {id: 1};
const obj2 = {id: 2};
// Ajouter des paires clé-valeur
weakMap.set(obj1, 'Alice');
weakMap.set(obj2, 'Bob');
console.log(weakMap.get(obj1)); // Output: Alice
// Vérifier la présence d'une clé
console.log(weakMap.has(obj2)); // Output: true
// Supprimer une paire clé-valeur
weakMap.delete(obj2);
console.log(weakMap.has(obj2)); // Output: falseUtilisations Avancées des Collections en JavaScript
Pour vous aider à maîtriser l’utilisation de Set, Map, WeakSet, et WeakMap, voyons quelques exemples détaillés tirés de projets réels.
Gestion des Abonnements avec Set
Imaginons une application de chat où vous souhaitez maintenir une liste unique d’abonnés pour chaque canal. Avec un Set, vous pouvez facilement gérer les abonnements :
class ChatChannel {
constructor(name) {
this.name = name;
this.subscribers = new Set();
}
subscribe(user) {
this.subscribers.add(user);
console.log(`${user} a rejoint le canal ${this.name}`);
}
unsubscribe(user) {
this.subscribers.delete(user);
console.log(`${user} a quitté le canal ${this.name}`);
}
}
const channel = new ChatChannel('Général');
channel.subscribe('Alice');
channel.subscribe('Bob');
channel.subscribe('Alice'); // Aucun doublon
console.log(channel.subscribers); // Output: Set(2) {'Alice', 'Bob'}
Utilisation de Map pour Gérer les Paramètres Utilisateur
Un Map peut être utilisé pour gérer les paramètres utilisateur dans une application. Contrairement à un objet, un Map permet d’utiliser des objets comme clés :
const userSettings = new Map();
const user1 = { id: 1, name: 'Alice' };
const user2 = { id: 2, name: 'Bob' };
// Ajouter des paramètres
userSettings.set(user1, { theme: 'dark', language: 'fr' });
userSettings.set(user2, { theme: 'light', language: 'en' });
console.log(userSettings.get(user1)); // Output: { theme: 'dark', language: 'fr' }
Utilisation de WeakSet pour Destructurer des Références à des Objets Complexes
Dans une application de suivi de ressources, un WeakSet peut être utilisé pour gérer des références à des objets complexes. Une fois que les objets ne sont plus nécessaires, ils peuvent être automatiquement nettoyés :
const resources = new WeakSet();
let resource1 = { description: 'Database Connection' };
let resource2 = { description: 'File Handle' };
resources.add(resource1);
resources.add(resource2);
console.log(resources.has(resource1)); // Output: true
resource1 = null; // Cleanup, resource1 will be garbage collected
console.log(resources.has(resource1)); // Output: falseUtilisation de WeakMap pour Stocker des Données Privées
Un WeakMap est idéal pour stocker des données privées associées à des objets. Cela permet de protéger les données et de garantir qu’elles sont automatiquement collectées lorsque l’objet n’est plus accessible :
const privateData = new WeakMap();
class Person {
constructor(name, age) {
privateData.set(this, { name, age });
}
getName() {
return privateData.get(this).name;
}
getAge() {
return privateData.get(this).age;
}
}
const person = new Person('Alice', 30);
console.log(person.getName()); // Output: Alice
console.log(person.getAge()); // Output: 30Pour en savoir plus sur l’utilisation des collections en JavaScript, visitez le site de la documentation MDN. Vous pouvez également suivre des cours en ligne sur Coursera pour approfondir vos connaissances.
