Map

Brief introduction:

Prior to ES6, the JavaScript implementation of ‘key’ => ‘value’, which is often referred to as a key-value pair, was done with Object. However, this implementation was problematic in particular cases, and ES6 introduced a new collection type called Map, bringing true key-value pair storage to the language.

Using the Map

We can use new to create that

const myMap = new Map(a);console.log(myMap); // Map(0) {}
Copy the code

If you need to add key-value pairs, use the set() method

 myMap.set('name'.'jackson');
 console.log(myMap); //Map(1) {"name" => "jackson"}
Copy the code

Queries can also be made using the get() and has() methods

  console.log(myMap.get("name")); // Query the content of the key or value
  console.log(myMap.has("name"));// Query whether it exists
Copy the code

You can also use the size property to get the number of key pairs in the map. Let’s add another key pair and query for the number

 myMap.set("age".22);
 console.log(myMap.size);/ / 2
Copy the code

We can also delete with delete() and clear()

myMap.delete("name"); // Delete a key-value pair
myMap.clear();// Delete all
console.log(myMap,myMap.size);
Copy the code

Difference between Map and Object

1. Memory usage

The engineering and implementation of Object and Map vary greatly from browser to browser. Given a fixed size of memory, Map stores 50% more key-value pairs than Object.

2. Search speed

The performance difference between large objects and maps for finding key pairs is small. If only a small number of key pairs are contained, Object is larger than Map. The browser engine can optimize for using objects as arrays (such as consecutive integers as attributes), which is not possible for Map operations.

3. Insert performance

Inserting new key-value pairs into an Object and a Map costs roughly the same, but maps perform better if the code is more extensive

4. Delete attributes

The performance of deleting Object properties using delete has been criticized in browsers, with some people setting the property values to null and undefined in order to delete Object properties. Map delete operations are faster than insert and query operations, and Map is definitely preferred if a lot of code is involved.

weakMap

What is a WeakMap

In JavaScript, the Map API can be implemented by having its four API methods share two arrays (one for keys and one for values). Setting a value for such a map adds both the key and the value to the end of both arrays. Thus the indexes of the key and value correspond in the two arrays. When taking a value from the map, you need to iterate through all the keys and then use the index to retrieve the corresponding value from the array of stored values.

But there are two big drawbacks to such an implementation. First, the assignment and search operations are both O(n) time (n is the number of key-value pairs) because both operations need to traverse the entire array to match. Another disadvantage is that it can cause a memory leak because the array will always refer to each key and value. This reference makes it impossible for the garbage collection algorithm to collect and process them, even if no other reference exists.

In contrast, a native WeakMap holds a “weak reference” to each key object, which means garbage collection works correctly when no other reference exists. The structure of a native WeakMap is special and valid, and its key for mapping is valid only if it has not been reclaimed.

Because of such weak references, the keys of a WeakMap are not enumerable (there is no way to give all the keys). If the key is enumerable, its list will be affected by the garbage collection mechanism, resulting in an uncertain result. Therefore, if you want a list of key values for this type of object, you should use [Map]

Basically, if you want to add data to an object and you don’t want to interfere with the garbage collection mechanism, you can use WeakMap.

Pay attention to

The key of a WeakMap can only be of Object type. [raw data type] cannot be used as a key (for example, [Symbol]).

const myWaekMap = new WeakMap(a); myWaekMap.set('name'.'jackson')
console.log(myWaekMap)
Copy the code

Execution of the above code will cause an error, because WeakMap can only be built for object typesIt can be executed if the type is changed to object and stored as a key

       const myWaekMap = new WeakMap(a);const arr = function (){
            a = 1;
       }
        myWaekMap.set(arr,Storage a = '1')
        console.log(myWaekMap) WeakMap {ƒ => "Store a=1"}
Copy the code

The value of a WeakMap can also be an object, but that doesn’t make much sense

      const myWaekMap = new WeakMap(a);const arr = function (){
            a = 1;
       }
       const bbb = function (){
           b = 2;
       }
        myWaekMap.set(arr,bbb)
        console.log(myWaekMap) / / WeakMap {ƒ = > ƒ}
Copy the code