Home > Article > Web Front-end > Detailed introduction to the new features of ES6 - code examples of Map and WeakMap objects in JavaScript

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

黄舟Original: 2017-03-06 15:15:011611browse

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 be any Basic types (String, Number, Boolean, undefined, NaN….), or objects (Map, Set, Object, Function, Symbol, null….);

3: Through Map The size attribute in 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 in Map object instance is sorted according to the order of user push, while the order of key and value in Object instance is 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 also simulate a Map constructor ourselves, requires generator support, so to use it in ES5 you need a generator patch (simulating the Set constructor):

<html>
<head>
    <meta charMap="utf-8">
</head>
<body>
    <script>
        "use strict";
        class Map {
            /**
             * @param [[key, value], [k, val]];
             * @return void;
             */
            static refresh (arg) {
                for(let [key,value] of arg) {
                    //判断是否重复了；
                    let index = Map.has.call(this, key);
                    if(index===false) {
                        this._keys.push(key);
                        this._values.push(value);
                    }else{
                        //如果有重复的值，那么我们执行覆盖;
                        this._keys[index] = key;
                        this._values[index] = value;
                    }
                };
                this.size = this._keys.length;
            }
            /**
             * @desc return false || Number；
             * */
            static has (key) {
                var index = this._keys.indexOf(key);
                if(index === -1) {
                    return false;
                }else{
                    return index;
                };
            }
            constructor(arg) {
                this._keys = [];
                this._values = [];
                Map.refresh.call(this, arg);
            }
            set (key, value) {
                Map.refresh.call(this, [[key,value]]);
                return this;
            }
            clear () {
                this._keys = [];
                this._values = [];
                return this;
            }
            delete (key) {
                var index = Map.has.call(this, key);
                if(index!==false) {
                    this._keys.splice(index,1);
                    this._values.splice(index,1);
                };
                return this;
            }
            entries () {
                return this[Symbol.iterator]();
            }
            has (key) {
                return Map.has.call(this, key) === false ? false : true;
            }
            *keys() {
                for(let k of this._keys) {
                    yield k;
                }
            }
            *values () {
                for(let v of this._values) {
                    yield v;
                }
            }
            //直接使用数组的forEach方便啊;
            forEach (fn, context) {
                return this;
            }
            //必须支持生成器的写法;
            *[Symbol.iterator] (){
                for(var i=0; i<this._keys.length; i++) {
                    yield [this._keys[i], this._values[i]];
                }
            }
        };
        var map  = new Map([["key","value"]]);
        map.set("heeh","dada");
        console.log(map.has("key")); //输出：true；
        map.delete("key");
        console.log(map.has("key"));  //输出：false；
        map.set("key","value");
        var keys = map.keys();
        var values = map.values();
        console.log(keys.next());
        console.log(keys.next());
        console.log(values.next());
        console.log(values.next());
        var entries = map.entries();
        console.log(entries);
    </script>
</body>
</html>

Demo of using Map:

var myMap = new Map();

var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};

// 我们给myMap设置值
myMap.set(keyString, "字符串&#39;");
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 use NaN, 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 => &#39;0&#39;, 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 (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the loader principle of JavaScript modular programmingNext article：Detailed explanation of the loader principle of JavaScript modular programming

See more