Detailed interpretation of map data structure in javascript

This article mainly introduces the map data structure of es6 javascript. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

This article introduces the map data structure of es6 javascript and shares it with everyone. The details are as follows:

The purpose and basic usage of the Map structure

JavaScript’s object (Object) is essentially a collection of key-value pairs (Hash structure), but traditionally only strings can be used as keys. This brings great limitations to its use.

var data = {}; 
var element = document.getElementById('myp'); 
data[element] = 'metadata'; 
data['[object HTMLpElement]'] // "metadata"

The original intention of the above code is to use a DOM node as the key of the object data, but since the object only accepts strings as key names, the element is automatically converted to a string [object HTMLpElement].

To solve this problem, ES6 provides the Map data structure. It is similar to an object and is also a collection of key-value pairs, but the scope of "key" is not limited to strings. Various types of values ​​(including objects) can be used as keys. In other words, the Object structure provides the "string-value" correspondence, and the Map structure provides the "value-value" correspondence, which is a more complete implementation of the Hash structure. If you need a "key-value" data structure, Map is more suitable than Object.

var m = new Map(); 
var o = { 
 p: 'Hello World' 
}; 
m.set(o, 'content') 
m.get(o) // "content" 
m.has(o) // true 
m.delete(o) // true 
m.has(o) // false

The above code uses the set method to treat object o as a key of m, then uses the get method to read the key, and then uses the delete method to delete the key.
As a constructor, Map can also accept an array as a parameter. The members of this array are arrays representing key-value pairs.

var map = new Map([ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]); 
map.size // 2 
map.has('name') // true 
map.get('name') // " 张三 " 
map.has('title') // true 
map.get('title') // "Author"

The above code specifies two keys, name and title, when creating a new Map instance.

The Map constructor accepts an array as a parameter, and actually executes the following algorithm.

var items = [ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]; 
var map = new Map(); 
items.forEach(([key, value]) => map.set(key, value));

In the following example, the string true and the Boolean value true are two different keys.

var m = new Map([ 
 [true, 'foo'], 
 ['true', 'bar'] 
]); 
m.get(true) // 'foo' 
m.get('true') // 'bar'

If the same key is assigned multiple times, the subsequent value will overwrite the previous value.

let map = new Map(); 
map 
 .set(1, 'aaa') 
 .set(1, 'bbb'); 
map.get(1) // "bbb"

The above code assigns two consecutive values ​​to key 1, and the latter value overwrites the previous value.

If an unknown key is read, undefined is returned.

new Map().get('asfddfsasadf') 
 // undefined

Note that only references to the same object will be considered the same key by the Map structure. Be very careful about this.

var map = new Map(); 
map.set(['a'], 555); 
map.get(['a']) // undefined

The set and get methods in the above code appear to be for the same key, but in fact they are two values ​​and the memory addresses are different. Therefore, the get method cannot read the key and returns undefined.

Similarly, two instances of the same value are regarded as two keys in the Map structure.

var map = new Map(); 
var k1 = ['a']; 
var k2 = ['a']; 
map 
 .set(k1, 111) 
 .set(k2, 222); 
map.get(k1) // 111 
map.get(k2) // 222

In the above code, the values ​​of variables k1 and k2 are the same, but they are regarded as two keys in the Map structure.

It can be seen from the above that the keys of Map are actually bound to the memory address. As long as the memory addresses are different, they are regarded as two keys. This solves the problem of collision of properties with the same name. When we extend other people's libraries, if we use objects as key names, we don't have to worry about our own properties having the same name as those of the original author.

If the key of the Map is a simple type of value (number, string, Boolean), then the Map treats it as a key as long as the two values ​​​​are strictly equal, including 0 and - 0. In addition, although NaN is not strictly equal to itself, Map treats them as the same key.

let map = new Map(); 
map.set(NaN, 123); 
map.get(NaN) // 123 
map.set(-0, 123); 
map.get(+0) // 123

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

vue-cli configuration file (detailed tutorial)

Use jQuery to encapsulate animate.css (detailed tutorial)

How to reset the idle state in vuex

The above is the detailed content of Detailed interpretation of map data structure in javascript. For more information, please follow other related articles on the PHP Chinese website!