Detailed introduction to the new features of ES6 - code examples of Map and WeakMap objects in JavaScript

Map object

Map object is an object with corresponding key/value pairs, and JS’s Object is also an object of key/value pairs;

In ES6 Map has several differences compared to Object objects:

1:Object objects have prototypes, which means that they have default key values on the objects, unless we use Object.create(null ) Create an object without a prototype;

2:In the Object object, only String and Symbol can be used as key values, but in Map, the key value can beany Basic types(String, Number, Boolean, undefined, NaN….), or objects (Map, Set, Object, Function, Symbol, null….);

3: ThroughMap The size attributein can easily obtain the length of the Map. To obtain the length of the Object, you can only use other methods;
The key value of the Map instance object can be an array or an object, or A function, more casual, and the sorting of data inMap object instanceis sorted according to the order of user push, while the order of key and value inObject instanceis somewhat regular. (They will sort the key values starting with numbers first, and then the key values starting with strings);

Attributes of Map instances

map.size This attribute has the same meaning as the length of the array , indicating the length of the current instance;

Map instance method

clear()method, deletes all key/value pairs;
delete( key), delete the specified key/value pair;
entries()Returns an iterator, which returns [key, value] in the order in which the object is inserted;
forEach(callback, context)Loops to execute the function and takes the key/value pair as a parameter; context is the context of executing the function this;
get(key)Returns the Map object key corresponding to value value;
has(key)Returns a Boolean value, which actually returns whether the Map object has the specified key;
keys()Returns an iterator, iterator Return each key element in the order of insertion;
set(key, value)Set the key/value key/value pair for the Map object and return the Map object (relative to Javascript's Set, Set object The method of adding elements is called add, and the method of adding elements to the Map object is set;
[@@iterator]is the same as the entrieds() method, and returns an iterator. The iterator is in the order in which the object is inserted. Return [key, value];

Simulate a Map constructor yourself:

Now that we know the methods and properties of the Map object, we can alsosimulate a Map constructor ourselves, requires generator support, so to use it in ES5 you need a generator patch (simulating the Set constructor):

Demo of using Map:

var myMap = new Map(); var keyString = "a string", keyObj = {}, keyFunc = function () {}; // 我们给myMap设置值 myMap.set(keyString, "字符串'"); myMap.set(keyObj, "对象"); myMap.set(keyFunc, "函数"); myMap.size; // 输出长度： 3 // 获取值 console.log(myMap.get(keyString)); // 输出：字符串 console.log(myMap.get(keyObj)); // 输出：对象 console.log(myMap.get(keyFunc)); // 输出：函数 console.log(myMap.get("a string")); // 输出：字符串 console.log(myMap.get({})); // 输出：undefined console.log(myMap.get(function() {})) // 输出：undefined

We can also useNaN, undefined, object, array, functionetc. These are used as key values of a Map object:

"use strict"; let map = new Map(); map.set(undefined, "0"); map.set(NaN, {}); console.log(map); //输出：Map { undefined => '0', NaN => {} }

Loop Map method

Use the forEach method of the Map instance;

"use strict"; let map = new Map(); map.set(undefined, "0"); map.set(NaN, {}); map.forEach(function(value ,key ,map) { console.log(key,value, map); });

Use for...of loop:

"use strict"; let map = new Map(); map.set(undefined, "0"); map.set(NaN, {}); for(let [key, value] of map) { console.log(key, value); } for(let arr of map) { console.log(arr); }

WeakMap

WeakMap is a weakly referenced Map object. If the object does not have a reference in the js execution environment, the corresponding WeakMap The object within the object will also be recycled by the js execution environment;

Attributes of the WeakMap object: None

Methods of the WeakMap object:

delete(key):Delete the specified key/value pair;

get(key):Return the value corresponding to the Map object key;

has(key ):Returns a Boolean value, which actually returns whether the Map object has the specified key;

set(key):Set the key/value key/value pair for the Map object, return This Map object;

WeakMap has many fewer methods than Map. We can also implement these methods ourselves. For example, we can implement the clear method of a Map instance:

class ClearableWeakMap { constructor(init) { this._wm = new WeakMap(init) } clear() { this._wm = new WeakMap() } delete(k) { return this._wm.delete(k) } get(k) { return this._wm.get(k) } has(k) { return this._wm.has(k) } set(k, v) { this._wm.set(k, v) return this } }

The above are the details Introducing the new features of ES6 - code examples of Map and WeakMap objects in JavaScript. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!