SoFunction
Updated on 2025-03-01

A detailed explanation of Map, Set, WeakMap and WeakSet in JS

In JavaScript, Map, Set, WeakMap and WeakSet are four different data structures, and they all have different characteristics and uses:

  • Map: Map is a collection of key-value pairs, where the keys and values ​​can be of any type. Similar to objects, they can access values ​​through keys. The difference is that Map can use any type as key, while objects can only use string or Symbol type as keys. Map also provides many useful methods, such as the size attribute to get the number of key-value pairs, and the forEach() method to iterate over the collection.
  • Set:Set is a collection of values ​​where each value is unique. Unlike arrays, they have no duplicate elements and have no specific order. Set provides many useful methods, such as the add() method to add new values, the delete() method to delete values, the has() method to check whether a certain value exists, and the size attribute to get the size of the collection.
  • WeakMap: WeakMap is similar to Map, and is also a collection of key-value pairs. However, their keys must be objects, and the values ​​can be of any type. Unlike Map, WeakMap's keys are weak references, that is, if the key objects are not referenced elsewhere, they can be garbage collected. This makes WeakMap very suitable for caching data, because when objects are no longer needed, they can be automatically deleted from WeakMap, freeing up memory.
  • WeakSet: WeakSet is a collection of values ​​where each value is unique and has no specific order. Unlike Set, their values ​​are also weakly referenced and therefore can be garbage collected. WeakSet is often used to store references to objects to avoid memory leaks.

Here are examples of Map, Set, WeakMap and WeakSet:

1. Map：

const myMap = new Map();
const key1 = 'key1';
const key2 = { name: 'John' };
const key3 = function () { ('Hello!'); };
(key1, 'value1');
(key2, 'value2');
(key3, 'value3');
((key1)); // 'value1'
((key2)); // 'value2'
((key3)); // 'value3'
(); // 3

In this example, we create aMapObject, and use three different types of keys(key1、key2、key3)To store three values(value1、value2、value3). We can useget()Method to get the corresponding value, usesizeProperties to get the number of key-value pairs.

2. Set：

const mySet = new Set();
('value1');
('value2');
('value3');
(('value1')); // true
(('value4')); // false
(); // 3
('value2');
(); // 2

In this example, we create aSetobject, and useadd()Methods add three values ​​to it(value1、value2、value3). We can usehas()Method to check whether a value exists in the collection, usesizeProperties to get the size of the collection, usedelete()Method to delete the value.

3. WeakMap：

let key1 = { name: 'John' };
let key2 = { name: 'Mary' };
let weakMap = new WeakMap();
(key1, 'value1');
(key2, 'value2');
key1 = null;
((key1)); // undefined
((key2)); // 'value2'

In this example, we create aWeakMapObject, and use two object keys(key1、key2)To store two values(value1、value2). Then we willkey1Assigning the value to null, which will cause the key1 objects to be garbage collected, and they are with the valuesvalue1Being separated togetherWeakMapdeleted in. When we useget()When the method tries to access a deleted key, it returns undefined.

4. WeakSet：

let obj1 = { name: 'John' };
let obj2 = { name: 'Mary' };
let weakSet = new WeakSet([obj1, obj2]);
((obj1)); // true
obj1 = null;
((obj1)); // false

In this example, we create aWeakSetObject, and add two objects to it(obj1、obj2). We can usehas()Method CheckWeakSetIs there an object in it?obj1When assigned to null, they are separated with the value.WeakSetdeleted in. When we usehas()Returns false when the method attempts to access an object that has been deleted.

The following are the differences and usage scenarios between Map, Set, WeakMap and WeakSet:

1. Map and Set:

MapandSetThey are all collection data structures, the difference is:

  • Map stores key-value pairs, which can use any type as key, while Set stores only values, and each value must be unique.
  • Map provides more ways to manipulate key-value pairs, such as get(), set(), and size attributes. Set provides more methods to manipulate values, such as add(), delete() and has().

Use scenarios:

  • When you need to store key-value pairs and you need to use keys to access values, you can useMap。
  • When you need to store unique values, you can useSet。

2. WeakMap and WeakSet:

WeakMapandWeakSetandMapandSetSimilar, but their keys or values ​​are weak references, that is, when there are no other references to the keys or value objects, they can be garbage collected without affecting the memory usage of the program. The difference is:

  • WeakMap and WeakSet can only use objects as keys or values.
  • WeakMap and WeakSet do not have a size attribute because their content may be garbage collected at any time.

Use scenarios:

  • When you need to store objects that need to be garbage collected, and these objects can only be stored as keys or values, you can useWeakMapandWeakSet。
  • When you need to use the cache in case of memory constrained, you can useWeakMapandWeakSetto store data, because they are garbage collected at any time, thus freeing up memory.

This is the article about this article about a detailed explanation of Map, Set, WeakMap and WeakSet in JS. This is all about this article. For more related contents of Map, Set, WeakMap and WeakSet in JS, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!