Introduction détaillée aux nouvelles fonctionnalités d'ES6 - exemples de code des objets Map et WeakMap en JavaScript-js tutoriel-php.cn

Introduction détaillée aux nouvelles fonctionnalités d'ES6 - exemples de code des objets Map et WeakMap en JavaScript

黄舟

Libérer： 2017-03-06 15:15:01

original

1597 Les gens l'ont consulté

Objet Map

L'objet Map est un objet avec des paires clé/valeur correspondantes, et l'objet JS est également un objet de paires clé/valeur

Dans ES6 ; Map présente plusieurs différences par rapport aux objets Objet :

1 : Les objets Objet ont des prototypes , ce qui signifie qu'ils ont des valeurs de clé par défaut sur les objets, sauf si nous utilisons Object.create(null ) crée un objet sans prototype ;

2 : Dans l'objet Object, seules String et Symbol peuvent être utilisées comme valeurs clés , mais dans Map, la valeur clé peut être tout type de base(Chaîne, Nombre, Booléen, non défini, NaN….), ou objets (Carte, Ensemble, Objet, Fonction, Symbole, null….);

3 : Grâce à Map L'attribut size dans peut facilement obtenir la longueur de la carte. Pour obtenir la longueur de l'objet, vous ne pouvez utiliser que d'autres méthodes
La valeur clé de l'objet instance Map peut être un tableau ou. un objet, ou une fonction, plus simple, et le tri des données dans Instance d'objet Map est basé sur l'ordre de poussée de l'utilisateur, tandis que l'ordre de la clé et de la valeur dans Instance d'objet est quelque peu régulier. (Ils trieront d'abord les valeurs clés commençant par des nombres, puis les valeurs clés commençant par des chaînes

Attributs de l'instance Map

map.size) ; Cet attribut a la même signification que la longueur du tableau, indiquant la longueur de l'instance actuelle ;

Méthode d'instance de carte

méthode clear(), supprime toutes les clés /value pairs ;
delete( key), supprime la paire clé/valeur spécifiée ;
entries() renvoie un itérateur, qui renvoie [clé, valeur] dans l'ordre dans lequel l'objet est inséré ;
forEach(callback, context) boucle pour exécuter la fonction et prend la paire clé/valeur comme paramètre le contexte est le contexte d'exécution de la fonction this ;
get(key) renvoie la clé de l'objet Map correspondant à la valeur value ;
has(key) renvoie une valeur booléenne, qui renvoie en fait si l'objet Map a le clé spécifiée ;
keys() renvoie un itérateur, iterator Renvoie chaque élément clé dans l'ordre d'insertion
set(key, value) Définit la clé/valeur ; paire clé/valeur pour l'objet Map et renvoie l'objet Map (par rapport à l'objet Set, Set de Javascript. La méthode d'ajout d'éléments est appelée add, et la méthode d'ajout d'éléments à l'objet Map est définie ;
[ @@iterator] est identique à la méthode entereds() et renvoie un itérateur. L'itérateur est dans l'ordre dans lequel l'objet est inséré. Return

Simulez un. Constructeur de carte vous-même :

Maintenant que nous connaissons les méthodes et les propriétés de l'objet Map, nous pouvons également simuler nous-mêmes un constructeur de carte, nécessite le support du générateur, donc pour l'utiliser dans ES5, vous devez également besoin d'un patch générateur (simulant le constructeur Set) :

<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>

Copier après la connexion

Démo d'utilisation de la carte :

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

Copier après la connexion

On peut également utiliser NaN, non défini, objets, tableaux, fonctions , etc. comme valeur clé d'un objet Map :

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

Copier après la connexion

Méthode Loop Map

Utiliser Map La méthode forEach de l'instance ; Utiliser la boucle for...of :

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

Copier après la connexion

WeakMap

"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);
}

Copier après la connexion

WeakMap est un objet Map faiblement référencé Si l'objet est dans l'environnement d'exécution js S'il n'y a pas de référence dans le WeakMap correspondant. objet, l'objet dans l'objet WeakMap correspondant sera également recyclé par l'environnement d'exécution js

Attributs de l'objet WeakMap : Aucun

Méthodes de l'objet WeakMap :

delete(key):

Supprimer la paire clé/valeur spécifiée;

get(key):

Renvoyer la valeur correspondant à la clé de l'objet Map;

has(key):

renvoie une valeur booléenne, qui renvoie en fait si l'objet Map a la clé spécifiée

set(key):

à la Map ; object Définit la paire clé/valeur et renvoie l'objet Map ;

WeakMap a beaucoup moins de méthodes que Map Nous pouvons également implémenter ces méthodes nous-mêmes. Par exemple, nous pouvons implémenter la méthode clear d'une instance Map :

Ce qui précède est une introduction détaillée aux exemples de code des nouvelles fonctionnalités d'ES6 - Objets Map et WeakMap en JavaScript Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois (www.php. cn) !

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
  }
}

Copier après la connexion