Maison > interface Web > js tutoriel > Que sont les WeakMaps en JS ?

Que sont les WeakMaps en JS ?

Susan Sarandon
Libérer: 2024-12-27 08:45:10
original
241 Les gens l'ont consulté

What are WeakMaps in JS?

Une WeakMap en JavaScript est une collection de paires clé-valeur où les clés doivent être des objets, et les références à celles-ci les clés sont "faibles". Cela signifie que s'il n'y a pas d'autres références à un objet clé, celui-ci peut être récupéré, même s'il se trouve toujours dans WeakMap.


Fonctionnalités clés

  1. Les clés doivent être des objets :

    • Les valeurs primitives (comme les nombres, les chaînes ou les booléens) ne peuvent pas être utilisées comme clés.
    • Seuls les objets et fonctions sont autorisés comme clés.
  2. Références faibles :

    • Les objets clés d'une WeakMap sont tenus faiblement.
    • S'il n'existe aucune autre référence à une clé, la paire clé-valeur sera automatiquement supprimée de WeakMap.
  3. Non itérable :

    • WeakMap n'a pas de méthodes comme forEach, et il ne peut pas être bouclé en utilisant des constructions comme for...of ou Object.keys().
    • En effet, le processus de collecte des déchets rend impossible la liste fiable de toutes les entrées.
  4. Utile pour les données privées :

    • WeakMap est souvent utilisé pour associer des données privées à des objets sans les exposer.

Syntaxe

const weakMap = new WeakMap();
Copier après la connexion
Copier après la connexion
Copier après la connexion

Méthodes

Method Description
weakMap.set(key, value) Adds a new key-value pair or updates an existing key.
weakMap.get(key) Retrieves the value associated with the key.
weakMap.has(key) Checks if the key exists in the WeakMap.
weakMap.delete(key) Removes the key-value pair associated with the key.

Exemples

Utilisation de base

const weakMap = new WeakMap();
Copier après la connexion
Copier après la connexion
Copier après la connexion

Collecte des déchets

const weakMap = new WeakMap();

const obj1 = { name: "Alice" };
const obj2 = { name: "Bob" };

// Adding key-value pairs
weakMap.set(obj1, "Data for Alice");
weakMap.set(obj2, "Data for Bob");

// Accessing values
console.log(weakMap.get(obj1)); // Output: "Data for Alice"

// Checking existence
console.log(weakMap.has(obj2)); // Output: true

// Removing a key-value pair
weakMap.delete(obj2);
console.log(weakMap.has(obj2)); // Output: false
Copier après la connexion
Copier après la connexion

Cas d'utilisation

  1. Stockage de données privées :
    • Associez des données privées à un objet, en vous assurant qu'elles ne sont pas exposées ou accessibles ailleurs.
let obj = { key: "value" };
const weakMap = new WeakMap();
weakMap.set(obj, "Some data");

// Remove all references to `obj`
obj = null;

// The `WeakMap` entry for `obj` is automatically removed by garbage collection.
Copier après la connexion
Copier après la connexion
  1. Métadonnées du nœud DOM :
    • Stockez les métadonnées liées aux éléments DOM sans empêcher le garbage collection.
const privateData = new WeakMap();

class User {
    constructor(name) {
        privateData.set(this, { name });
    }

    getName() {
        return privateData.get(this).name;
    }
}

const user = new User("Alice");
console.log(user.getName()); // Output: "Alice"
Copier après la connexion
Copier après la connexion

Avantages

  • Efficacité de la mémoire : la suppression automatique des clés non référencées permet de gérer efficacement la mémoire.
  • Encapsulation : fournit un moyen de stocker des données de manière privée et sécurisée.
  • Aucune fuite de mémoire : empêche les fuites de mémoire accidentelles en autorisant le garbage collection des clés.

Limitations

  1. Non itérable :
    • Impossible de répertorier toutes les clés ou valeurs.
  2. Uniquement les clés d'objet :
    • Ne prend pas en charge les clés primitives.
  3. Cas d'utilisation limités :
    • Ne convient pas aux scénarios nécessitant une énumération ou un accès complet aux données stockées.

En résumé, WeakMap est une collection spécialisée conçue pour les scénarios où des références faibles et des associations privées sont requises.

Différence entre Map et WeakMap

La principale différence entre Map et WeakMap en JavaScript réside dans leur gestion des clés, du garbage collection et des fonctionnalités. Voici une comparaison détaillée :


Différences clés

Fonctionnalité
Feature Map WeakMap
Key Types Keys can be any type: objects, primitives. Keys must be objects.
Garbage Collection Does not rely on garbage collection; keys persist. Keys are held weakly and can be garbage-collected.
Iteration Iterable (can use for...of, forEach, etc.). Not iterable (cannot list keys or values).
Size Property Has a size property to get the number of entries. No size property available.
Use Case General-purpose key-value storage. Specialized for associating metadata or private data with objects.
Performance Slightly slower due to strong key references. Faster for memory-sensitive operations due to weak references.
Carte WeakMap
ête> Types de clés Les clés peuvent être de n'importe quel type : objets, primitives. Les clés doivent être des objets. Collecte des déchets Ne s'appuie pas sur le garbage collection ; les clés persistent. Les clés sont mal tenues et peuvent être récupérées. Itération Itérable (peut être utilisé pour...of, forEach, etc.). Non itérable (impossible de lister les clés ou les valeurs). Propriété Taille Possède une propriété size pour obtenir le nombre d'entrées. Aucune propriété de taille disponible. Cas d'utilisation Stockage clé-valeur à usage général. Spécialisé pour associer des métadonnées ou des données privées à des objets. Performances Légèrement plus lent en raison de références clés fortes. Plus rapide pour les opérations sensibles à la mémoire en raison de références faibles.

Comparaison des fonctionnalités

1. Types de clés

  • Carte : accepte à la fois les objets et les types primitifs (comme les chaînes, les nombres, les booléens) comme clés.
  • WeakMap : accepte uniquement les objets comme clés. Les primitives ne sont pas autorisées.
const weakMap = new WeakMap();
Copier après la connexion
Copier après la connexion
Copier après la connexion

2. Collecte des déchets

  • Carte : conserve une référence forte à la clé, l'empêchant d'être récupérée tant qu'elle existe dans la carte.
  • WeakMap : contient une référence faible à la clé, lui permettant d'être récupérée s'il n'y a pas d'autres références.
const weakMap = new WeakMap();

const obj1 = { name: "Alice" };
const obj2 = { name: "Bob" };

// Adding key-value pairs
weakMap.set(obj1, "Data for Alice");
weakMap.set(obj2, "Data for Bob");

// Accessing values
console.log(weakMap.get(obj1)); // Output: "Data for Alice"

// Checking existence
console.log(weakMap.has(obj2)); // Output: true

// Removing a key-value pair
weakMap.delete(obj2);
console.log(weakMap.has(obj2)); // Output: false
Copier après la connexion
Copier après la connexion

3. Itération

  • Carte : Itérable. Vous pouvez utiliser for...of, .keys(), .values(), .entries() ou .forEach() pour parcourir son contenu.
  • WeakMap : non itérable. Il n'existe aucune méthode pour récupérer toutes les clés, valeurs ou entrées.
let obj = { key: "value" };
const weakMap = new WeakMap();
weakMap.set(obj, "Some data");

// Remove all references to `obj`
obj = null;

// The `WeakMap` entry for `obj` is automatically removed by garbage collection.
Copier après la connexion
Copier après la connexion

4. Propriété de taille

  • Map : Fournit une propriété de taille qui renvoie le nombre d'entrées.
  • WeakMap : n'a pas de propriété size car elle n'est pas itérable et les entrées sont faiblement référencées.
const privateData = new WeakMap();

class User {
    constructor(name) {
        privateData.set(this, { name });
    }

    getName() {
        return privateData.get(this).name;
    }
}

const user = new User("Alice");
console.log(user.getName()); // Output: "Alice"
Copier après la connexion
Copier après la connexion

Cas d'utilisation

Quand utiliser la carte

  • Stockage clé-valeur à usage général.
  • Scénarios nécessitant une énumération ou une itération de clés et de valeurs.
  • Les clés peuvent être des primitives ou des objets.

Exemple :

const metadata = new WeakMap();

function trackElement(element) {
    metadata.set(element, { clicks: 0 });
}

function incrementClicks(element) {
    const data = metadata.get(element);
    if (data) {
        data.clicks++;
    }
}

const button = document.createElement("button");
trackElement(button);
incrementClicks(button);
console.log(metadata.get(button)); // Output: { clicks: 1 }
Copier après la connexion

Quand utiliser WeakMap

  • Lorsque vous devez associer des métadonnées ou des données privées à des objets sans empêcher le garbage collection.
  • Idéal pour les cas où la durée de vie de la clé doit dicter la durée de vie de la valeur associée.

Exemple :

const map = new Map();
map.set(1, "value"); // Allowed
map.set("key", "value"); // Allowed
map.set({}, "value"); // Allowed

const weakMap = new WeakMap();
weakMap.set({}, "value"); // Allowed
weakMap.set(1, "value"); // TypeError: Invalid value used as weak map key
Copier après la connexion

Résumé

Fonctionnalité
Feature Map WeakMap
Flexibility General-purpose, flexible. Specialized, limited use case.
Performance Persistent key references. Memory-efficient with weak references.
Suitability Iteration and long-term storage. Private data and ephemeral relationships.
Carte WeakMap
ête> Flexibilité Utilisation générale, flexible. Cas d'utilisation spécialisé et limité. Performances Références de clés persistantes. Efficace en mémoire avec des références faibles. Adéquation Itération et stockage à long terme. Données privées et relations éphémères.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal