Ist die ES6-Karte bestellt?

Karte ist bestellt. Der Kartentyp in ES6 ist eine geordnete Liste, in der viele Schlüssel-Wert-Paare gespeichert werden. Die Äquivalenz der Schlüsselnamen wird durch Aufrufen der Methode „Objext.is()“ beurteilt Daher werden die Zahl 5 und die Zeichenfolge „5“ als zwei Typen beurteilt und können im Programm als zwei unabhängige Schlüssel erscheinen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

1. Kartensammlung

JavaScript-Objekt ist im Wesentlichen eine Sammlung von Schlüssel-Wert-Paaren, aber traditionell können nur Zeichenfolgen als Schlüssel-Wert-Paare verwendet werden.

Um dieses Problem zu lösen, stellt ES6 die Kartendatenstruktur bereit. Es ähnelt einem Objekt und ist ebenfalls eine Sammlung von Schlüssel-Wert-Paaren. Der Umfang dieses Schlüssels ist jedoch nicht auf Zeichenfolgen beschränkt. Als Schlüssel können verschiedene Arten von Werten (einschließlich Objekten) verwendet werden. Mit anderen Worten, die Objektstruktur stellt eine (String-Wert-)Korrespondenz bereit und die Kartenstruktur implementiert den Kartentyp in ES6. Es handelt sich um eine geordnete Liste, in der viele Schlüssel-Wert-Paare gespeichert sind, und die Schlüsselnamen und entsprechenden Werte unterstützen alle Datentyp. Die Äquivalenzbeurteilung von Schlüsselnamen wird durch Aufrufen der Methode Objext.is() erreicht, sodass die Zahl 5 und die Zeichenfolge „5“ als zwei Typen beurteilt werden und im Programm als zwei unabhängige Schlüssel erscheinen können.

Hinweis: Es gibt eine Ausnahme, die in der Kartensammlung als gleich betrachtet wird und sich vom Object.is()-Ergebnis unterscheidet, wenn Sie eine „Schlüssel-Wert-Paar“-Datenstruktur benötigen , Karte ist besser geeignet als Objekt, hat extrem schnelle Suchgeschwindigkeit

Gibt die Anzahl der Elemente der Karte zurück

(1) set()

Zu Kartendaten hinzufügen, die hinzugefügte Karte zurückgeben (durch Zuweisen eines Werts zu einem vorhandenen Schlüssel wird der vorherige Wert überschrieben) (2) get()

Den Wert eines bestimmten Schlüssels abrufen, zurückgeben Der dem Schlüssel entsprechende Wert. Wenn nicht, wird undefiniert zurückgegeben Schlüssel und sein entsprechender Wert und geben einen booleschen Wert zurück. Wenn der Löschvorgang erfolgreich ist, ist er wahr

(5) klar()

Alle Werte löschen und undefiniert zurückgeben

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

3

Hinweis: Die Durchlaufreihenfolge der Karte ist die Einfügungsreihenfolge ​​der Karte

(3)entries()

Alle Mitglieder der Karte abrufen

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

(4) forEach()

Alle Mitglieder der Karte durchqueren

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 zum ArrayKartenstruktur zur Array-Destrukturierung

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

2. Weakmap-Sammlung

WeakMap ist eine schwache Referenz. Kartensammlungen werden auch zum Speichern schwacher Referenzen auf Objekte verwendet. Der Schlüsselname in der WeakMap-Sammlung muss ein Objekt sein. Wenn Sie einen Nicht-Objekt-Schlüsselnamen verwenden, wird ein Fehler gemeldet: Die Sammlung speichert schwache Referenzen auf diese Objekte. Wenn es außer den schwachen Referenzen keine anderen starken Referenzen gibt. Der Garbage-Collection-Mechanismus der Engine Dieses Objekt wird automatisch recycelt und die Schlüssel-Wert-Paare in der WeakMap-Sammlung werden entfernt. Aber nur der Schlüsselname der Sammlung folgt dieser Regel. Wenn der dem Schlüsselnamen entsprechende Wert ein Objekt ist, löst die starke Referenz des gespeicherten Objekts das Garbage Collection-Gerät nicht aus

1 Der Zweck der WeakMap-Sammlung

(1) Speichern Sie DOM-Elemente

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' ] ]
*/

myElement im Code ist ein DOM-Knoten, der Status wird aktualisiert. Wir fügen diesen Zustand als Schlüsselwert in die WeakMap ein und der entsprechende Schlüsselname lautet myElement. Sobald der DOM-Knoten gelöscht wird, verschwindet der Zustand automatisch und es besteht keine Gefahr von Speicherverlusten

(2) Registrieren Sie sich für Listening-Ereignisse. Die Wirkung des Listener-Objekts

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

ist die gleiche

(3) Stellen Sie private Attribute bereit

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

Wir möchten nicht, dass Benutzer direkt auf das Namensattribut zugreifen und die folgende Methode direkt verwenden Wickeln Sie den Namen in ein privates Attribut ein

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

[Verwandte Empfehlungen:

Javascript-Video-Tutorial, Web-Frontend

]

Das obige ist der detaillierte Inhalt vonIst die ES6-Karte bestellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!