La carte es6 est-elle commandée ?

la carte est commandée. Le type de carte dans ES6 est une liste ordonnée qui stocke de nombreuses paires clé-valeur. Les noms de clés et les valeurs correspondantes prennent en charge tous les types de données ; l'équivalence des noms de clés est jugée en appelant la méthode "Objext.is()". , donc le chiffre 5 et la chaîne "5" seront jugés comme deux types et pourront apparaître dans le programme comme deux clés indépendantes.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

1. Collection de cartes

L'objet JavaScript est essentiellement une collection de paires clé-valeur, mais traditionnellement, seules les chaînes peuvent être utilisées comme paires clé-valeur.

Pour résoudre ce problème, ES6 fournit la structure des données cartographiques. Il est similaire à un objet et constitue également une collection de paires clé-valeur. Cependant, la portée de cette clé ne se limite pas aux chaînes. Différents types de valeurs (y compris les objets) peuvent être utilisés comme clés. En d'autres termes, la structure de l'objet fournit une correspondance (chaîne-valeur) et la structure de la carte implémente le type de carte dans ES6. Il s'agit d'une liste ordonnée qui stocke de nombreuses paires clé-valeur, et les noms de clé et les valeurs correspondantes prennent tous en charge. type de données. Le jugement d'équivalence des noms de clés est obtenu en appelant la méthode Objext.is(), de sorte que le nombre 5 et la chaîne « 5 » seront jugés comme deux types et pourront apparaître dans le programme comme deux clés indépendantes.

Remarque : Il existe une exception. +0 et -0 sont considérés comme égaux dans la collection de cartes, ce qui est différent du résultat Object.is() si vous avez besoin d'une structure de données "paire clé-valeur". , la carte est plus appropriée que l'objet, a une vitesse de recherche extrêmement rapide

1 Attribut : tailleRenvoie le nombre d'éléments de la carte

2. set()Ajouter aux données de la carte, renvoie la carte ajoutée (attribuer une valeur à une clé existante écrasera la valeur précédente)

(2) get()

Obtenir la valeur d'une certaine clé et renvoyer la valeur correspondant à la clé, sinon, renvoie undéfini

(3)has()

Détecte si une certaine clé existe et renvoie une valeur booléenne

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.size);
console.log(map.get('JacksonWang'));
console.log(map.get('LEO'));
console.log(map.has('Z-'));
 
//输出:    3
//        123
//        456
//        true

(4)delete()

Supprimer un key et sa valeur correspondante et renvoie une valeur booléenne, si la suppression réussit, ce sera vrai

(5) clear()

Effacer toutes les valeurs et renvoyer undefined

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
map.delete('Z-');
console.log(map.size);
 
console.log(map.clear())
 
//输出:  2
//      undefined

3.

Remarque : L'ordre de parcours de la carte est l'ordre d'insertion

( 1) touches()

Obtenir toutes les clés de la carte

(2) valeurs()

Obtenir toutes les valeurs ​​de la carte

(3)entrées()

Obtenir tous les membres de la carte

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.keys())//打印所有的键
console.log(map.values())//打印所有的值
console.log(map.entries())//以键值对的方式
 
/*输出：
[Map Iterator] { 'JacksonWang', 'LEO', 'Z-' }
[Map Iterator] { '123', '456', '789' }
[Map Entries] {
  [ 'JacksonWang', '123' ],
  [ 'LEO', '456' ],
  [ 'Z-', '789' ]
}*/

(4) forEach()

Parcourir tous les membres de la carte

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
for(const [key,value] of map.entries()){
    console.log(`${key}:${value}`);
}
/*输出:
JacksonWang:123
LEO:456
Z-:789
*/

4. de la structure du tableau

à la déstructuration du tableau

let map1 = new Map([
    [1,'One'],
    [2,'Two'],
    [3,'Three']
])
 
console.log([...map1.keys()]);
console.log(...map1.entries())
console.log([...map1.entries()]);
 
/*输出:
[ 1, 2, 3 ]
[ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ]
[ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ]
*/

2. Collection Weakmap

WeakMap est une référence faible Les collections de cartes sont également utilisées pour stocker des références faibles à des objets. Le nom de clé dans la collection WeakMap doit être un objet. Si vous utilisez un nom de clé non-objet, une erreur sera signalée : la collection stocke les références faibles à ces objets. S'il n'y a pas d'autres références fortes autres que les références faibles, le mécanisme de récupération de place du moteur. Cet objet sera automatiquement recyclé et les paires clé-valeur de la collection WeakMap seront supprimées. Mais seul le nom de clé de la collection suit cette règle.Si la valeur correspondant au nom de clé est un objet, la référence forte de l'objet enregistré ne déclenchera pas le dispositif de récupération de place

1.

(1) Stockez les éléments DOM

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">WeskMap测试</button>
    <script>
        let btn = document.querySelector(&#39;#btn&#39;);
        let wmap = new WeakMap();
        wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
 
        btn.addEventListener(&#39;click&#39;,function(){
            let temp = wmap.get(btn);//从这里获取键名为btn的值
            temp.timesClicked++;
            console.log(temp.timesClicked)
        },false)
    </script>
</body>
</html>

myElement dans le code est un nœud DOM Chaque fois qu'un événement de clic se produit, le statut est mis à jour. Nous mettons cet état comme valeur clé dans le WeakMap, et le nom de clé correspondant est myElement. Une fois le nœud DOM supprimé, l'état disparaîtra automatiquement et il n'y aura aucun risque de fuite de mémoire

(2) Inscrivez-vous aux événements d'écoute L'objet auditeur

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">WeskMap测试</button>
    <script>
        let btn = document.querySelector(&#39;#btn&#39;);
        let wmap = new WeakMap();
        wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
 
        // btn.addEventListener(&#39;click&#39;,function(){
        //     let temp = wmap.get(btn);//从这里获取键名为btn的值
        //     temp.timesClicked++;
        //     console.log(temp.timesClicked)
        // },false)
        function f1(){
            let temp = wmap.get(btn);//从这里获取键名为btn的值
            temp.timesClicked++;
            console.log(temp.timesClicked)
        }
        btn.addEventListener(&#39;click&#39;,f1,false)
    </script>
</body>
</html>

a le même effet

(3) Déployer des attributs privés

function Person(name){
    this._name = name;
}
 
Person.prototype.getName = function(){
    return this._name;
}
//但这是，创建一个Person对象的时候，我们可以直接访问name
let p = new Person('张三');
console.log(p._name)
 
//输出：张三

Nous ne voulons pas que les utilisateurs accèdent directement à l'attribut name et utilisent directement la méthode suivante pour envelopper le nom dans un attribut privé

let Person = (function(){
    let privateData = new WeakMap();
    function Person(yourname){
        privateData.set(this,{_name:yourname})//this当前这个键的对象
    }
    Person.prototype.getName = function(){
        return privateData.get(this)._name;//
    }
    return Person;
})();//定义好了函数就开始执行
 
let p = new Person('jack');
console.log(p._name)//因为name的私有型，所以在外不可访问
console.log(p.getName())
 
/*输出:
undefined
jack
*/

[Recommandations associées :

tutoriel vidéo javascript, front-end web

]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!