In diesem Tutorial lernen Sie anhand von Beispielen JavaScript Maps und WeakMaps kennen.
Das JavaScript ES6 hat zwei neue Datenstrukturen eingeführt, nämlich Mapund WeakMap.
Map ähnelt Objekten in JavaScript, mit denen wir Elemente in einem Schlüssel / Wert- Paar speichern können .
Die Elemente in einer Karte werden in einer Einfügereihenfolge eingefügt. Im Gegensatz zu einem Objekt kann eine Karte jedoch Objekte, Funktionen und andere Datentypen als Schlüssel enthalten.
Erstellen Sie eine JavaScript-Karte
Um ein zu erstellen Map, verwenden wir den new Map()Konstruktor. Beispielsweise,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Element in Karte einfügen
Nachdem Sie eine Karte erstellt haben, können Sie mit dieser set()Methode Elemente einfügen. Beispielsweise,
// create a set let map1 = new Map(); // insert key-value pair map1.set('info', (name: 'Jack', age: 26)); console.log(map1); // Map ("info" => (name: "Jack", age: 26))
Sie können auch Objekte oder Funktionen als Tasten verwenden. Beispielsweise,
// Map with object key let map2 = new Map(); let obj = (); map2.set(obj, (name: 'Jack', age: "26")); console.log(map2); // Map (() => (name: "Jack", age: "26"))
Zugriff auf Kartenelemente
MapMit der get()Methode können Sie auf Elemente zugreifen . Beispielsweise,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // access the elements of a Map console.log(map1.get('info')); // (name: "Jack", age: "26")
Überprüfen Sie die Kartenelemente
Mit dieser has()Methode können Sie überprüfen, ob sich das Element in einer Map befindet. Beispielsweise,
const set1 = new Set((1, 2, 3)); let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // check if an element is in Set console.log(map1.has('info')); // true
Elemente entfernen
Mit clear()der delete()Methode und können Sie Elemente aus einer Karte entfernen.
Die delete()Methode wird zurückgegeben, truewenn ein angegebenes Schlüssel / Wert-Paar vorhanden ist und entfernt wurde, oder es wird zurückgegeben false. Beispielsweise,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing a particular element map1.delete('address'); // false console.log(map1); // Map ("info" => (name: "Jack", age: "26")) map1.delete('info'); // true console.log(map1); // Map ()
Die clear()Methode entfernt alle Schlüssel / Wert-Paare aus einem Map-Objekt. Beispielsweise,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
JavaScript-Kartengröße
Mit der sizeEigenschaft können Sie die Anzahl der Elemente in einer Karte abrufen . Beispielsweise,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Durch eine Karte iterieren
Sie können die Map-Elemente mit der for… of-Schleife oder der forEach () -Methode durchlaufen. Auf die Elemente wird in der Einfügereihenfolge zugegriffen. Beispielsweise,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map for (let (key, value) of map1) ( console.log(key + '- ' + value); )
Ausgabe
Name- Jack Alter- 27
Mit der forEach()Methode können Sie auch die gleichen Ergebnisse wie mit dem obigen Programm erzielen. Beispielsweise,
// using forEach method() let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map map1.forEach(function(value, key) ( console.log(key + '- ' + value) ))
Über Kartenschlüssel iterieren
Sie können die Karte durchlaufen und den Schlüssel mithilfe der keys()Methode abrufen . Beispielsweise,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let key of map1.keys()) ( console.log(key) )
Ausgabe
name Alter
Über Kartenwerte iterieren
Sie können die Karte durchlaufen und die Werte mithilfe der values()Methode abrufen . Beispielsweise,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let values of map1.values()) ( console.log(values); )
Ausgabe
Jack 27
Schlüssel / Werte der Karte abrufen
Mit der entries()Methode können Sie die Karte durchlaufen und den Schlüssel / Wert einer Karte abrufen. Beispielsweise,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let elem of map1.entries()) ( console.log(`$(elem(0)): $(elem(1))`); )
Ausgabe
Name: Jack Alter: 27
JavaScript Map vs Object
| Karte | Objekt |
|---|---|
| Maps can contain objects and other data types as keys. | Objects can only contain strings and symbols as keys. |
| Maps can be directly iterated and their value can be accessed. | Objects can be iterated by accessing its keys. |
The number of elements of a Map can be determined by size property. | The number of elements of an object needs to be determined manually. |
| Map performs better for programs that require the addition or removal of elements frequently. | Object does not perform well if the program requires the addition or removal of elements frequently. |
JavaScript WeakMap
The WeakMap is similar to a Map. However, WeakMap can only contain objects as keys. For example,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello")
When you try to add other data types besides objects, WeakMap throws an error. For example,
const weakMap = new WeakMap(); // adding string as a key to WeakMap weakMap.set('obj', 'hello');
// throws error // TypeError: Attempted to set a non-object key in a WeakMap
WeakMap Methods
WeakMaps haben Methoden get(), set(), delete(), und has(). Beispielsweise,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello") // get the element of a WeakMap console.log(weakMap.get(obj)); // hello // check if an element is present in WeakMap console.log(weakMap.has(obj)); // true // delete the element of WeakMap console.log(weakMap.delete(obj)); // true console.log(weakMap); // WeakMap ()
WeakMaps sind nicht iterierbar
Im Gegensatz zu Maps sind WeakMaps nicht iterierbar. Beispielsweise,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); // looping through WeakMap for (let i of weakMap) ( console.log(i); // TypeError )
JavaScript Mapund WeakMapwurden in ES6 eingeführt . Einige Browser unterstützen ihre Verwendung möglicherweise nicht. Weitere Informationen finden Sie unter JavaScript Map-Unterstützung und JavaScript WeakMap-Unterstützung.
