A brief discussion on the map data structure of es6 javascript_javascript skills

This article mainly introduces the map data structure of es6 javascript. The editor thinks it is quite good. Now I will share the JavaScript source code with you. Also as a reference for everyone. If you are interested in JavaScript, please follow the editor to take a look.

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

Map structure The purpose and basic usage

JavaScript object (Object) is essentially a collection of key-value pairs (Hash structure), but traditionally onlyString as a key. 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 name, so 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, and then uses the get method to read Get this key, and then use 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 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 of the above code appear to be for the same key, but in fact they are two The value and memory address are different, so 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 in the Map structure key.

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 as long as the two values ​​​​are strictly equal, the Map will treat it as a key, 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 the entire content of this article. I hope it will be helpful to everyone’s learning, and I also hope everyone will support PHP. Chinese website.

Related recommendations:

ie8 does not support the javascript map method

A brief analysis of the working principle of JavaScript mapreduce_Basic knowledge

Based on javascript explicit conversion and implicit conversion (detailed explanation)_javascript skills

The above is the detailed content of A brief discussion on the map data structure of es6 javascript_javascript skills. For more information, please follow other related articles on the PHP Chinese website!