WeakMap and WeakSet are suitable for avoiding memory leaks and managing data related to the object's life cycle. 1. WeakMap can be used for private data storage. By weakly referring to associated objects and private information, data is automatically recycled after instances are destroyed; 2. WeakSet is suitable for tracking whether objects have been processed, preventing repeated operations and not affecting the life cycle of the object; 3. When cooperating with DOM elements, attached status information can be safely stored, and data can be automatically cleaned after elements are removed, without manual maintenance.

WeakMap and WeakSet are two special collection types in JavaScript. Their "weak reference" nature determines that they are suitable for handling certain specific scenarios. If you want to know when to use them instead of regular Map or Set, this article will help you sort out your thoughts.

What is a "weak quote"?

Before understanding the usage scenario, let’s briefly talk about the key concepts:
The keys (for WeakMap) or elements (for WeakSet) in WeakMap and WeakSet are weakly referenced . This means that if these objects are not referenced elsewhere, the garbage collector can recycle them normally without being retained because they are still present in WeakMap or WeakSet.

For example:

 let obj = {};
const ws = new WeakSet();
ws.add(obj);
obj = null; // The original object no longer has strong references// At this time obj can be recycled by GC, WeakSet will not block it

In contrast, references to ordinary Set or Map are "strong". Even if you set external references to null, they will not be recycled as long as they are still in Map/Set.

1. Avoid memory leaks private data storage

Sometimes you want to add some extra information to an object, but you don't want this information to affect the life cycle of the object itself. At this time, weakMap can be used to do "private data mapping".

for example:

 const privateData = new WeakMap();

class MyClass {
  constructor(name) {
    this.name = name;
    privateData.set(this, { secret: 'hide content' });
  }

  getSecret() {
    return privateData.get(this).secret;
  }
}

The benefits of doing this are:

• privateData cannot be accessed directly from the external one unless you know this map.
• When the class instance is destroyed, the corresponding private data will be automatically recycled and there will be no memory leakage.

2. Track whether the object has been processed (deduplication, cache, etc.)

WeakSet is very useful in this scenario. For example, you want to know whether an object has been processed without affecting its life cycle.

Common uses include:

• Prevent repeated access to the same object during recursive traversal
• Cache function call results (only for object parameters)
• Tags whether the DOM element has been bound to an event or other state

Example:

 const seen = new WeakSet();

function process(obj) {
  if (seen.has(obj)) return;
  see.add(obj);
  // Execute processing logic}

This way, even if you call it many times, it won't cause the memory to continue to grow.

3. Meta-information management used with DOM elements

In front-end development, it is often necessary to attach some status information to the DOM elements. If you use normal objects to save this information, it is easy to forget to clean it up, especially after component uninstallation.

WeakMap is very suitable for saving this type of "affiliated information":

 const elementState = new WeakMap();

function initElement(el) {
  elementState.set(el, { initialized: true });
}

function isInitialized(el) {
  return elementState.get(el)?.initialized;
}

When the DOM element is removed, if no other reference points to it, the JavaScript engine will automatically clean up this part of the data without you manually deleting it.

Recommendations and precautions for use

• Do not use for long-term storage : WeakMap and WeakSet data may be cleared at any time and are not suitable for saving critical states.
• The key must be an object : basic types such as strings and numbers cannot be used as keys of WeakMap or the value of WeakSet.
• Not Iterable : These two structures do not support traversal, so they are not suitable for scenarios where all keys/values ??are enumerated.
• Debugging difficulty : Due to its "weak" nature, it is not easy to view the content in the debugging tool.

Basically that's it. WeakMap and WeakSet are not structures that are frequently used in daily development, but they are very useful tools when dealing with object lifecycle and memory management issues.

The above is the detailed content of When to Use Javascript WeakMap and WeakSet. For more information, please follow other related articles on the PHP Chinese website!