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

Maison

interface Web

js tutoriel

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

黄舟

Mar 06, 2017 pm 03:15 PM

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>

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

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

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

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

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

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Moteurs JavaScript: comparaison des implémentationsApr 13, 2025 am 12:05 AM

Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.

Au-delà du navigateur: Javascript dans le monde réelApr 12, 2025 am 12:06 AM

Les applications de JavaScript dans le monde réel incluent la programmation côté serveur, le développement des applications mobiles et le contrôle de l'Internet des objets: 1. La programmation côté serveur est réalisée via Node.js, adaptée au traitement de demande élevé simultané. 2. Le développement d'applications mobiles est effectué par le reactnatif et prend en charge le déploiement multiplateforme. 3. Utilisé pour le contrôle des périphériques IoT via la bibliothèque Johnny-Five, adapté à l'interaction matérielle.

Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AM

J'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant

Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Cet article démontre l'intégration frontale avec un backend sécurisé par permis, construisant une application fonctionnelle EdTech SaaS en utilisant Next.js. Le frontend récupère les autorisations des utilisateurs pour contrôler la visibilité de l'interface utilisateur et garantit que les demandes d'API adhèrent à la base de rôles

JavaScript: Explorer la polyvalence d'un langage WebApr 11, 2025 am 12:01 AM

JavaScript est le langage central du développement Web moderne et est largement utilisé pour sa diversité et sa flexibilité. 1) Développement frontal: construire des pages Web dynamiques et des applications à une seule page via les opérations DOM et les cadres modernes (tels que React, Vue.js, Angular). 2) Développement côté serveur: Node.js utilise un modèle d'E / S non bloquant pour gérer une concurrence élevée et des applications en temps réel. 3) Développement des applications mobiles et de bureau: le développement de la plate-forme multiplateuse est réalisé par réact noral et électron pour améliorer l'efficacité du développement.

L'évolution de JavaScript: tendances actuelles et perspectives d'avenirApr 10, 2025 am 09:33 AM

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

Démystifier javascript: ce qu'il fait et pourquoi c'est importantApr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Python ou JavaScript est-il meilleur?Apr 06, 2025 am 12:14 AM

Python est plus adapté à la science des données et à l'apprentissage automatique, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python est connu pour sa syntaxe concise et son écosystème de bibliothèque riche, et convient à l'analyse des données et au développement Web. 2. JavaScript est le cœur du développement frontal. Node.js prend en charge la programmation côté serveur et convient au développement complet.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semainesByDDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

MinGW - GNU minimaliste pour Windows

Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.