In deze tutorial leer je met behulp van voorbeelden over JavaScript Maps en WeakMaps.
De JavaScript ES6 heeft twee nieuwe datastructuren geïntroduceerd, namelijk Mapen WeakMap.
Kaart is vergelijkbaar met objecten in JavaScript waarmee we elementen in een sleutel / waarde- paar kunnen opslaan .
De elementen in een kaart worden in een invoegvolgorde ingevoegd. In tegenstelling tot een object kan een kaart echter objecten, functies en andere gegevenstypen als sleutel bevatten.
Maak een JavaScript-kaart
Om een te maken Map, gebruiken we de new Map()constructor. Bijvoorbeeld,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Item invoegen op kaart
Nadat u een kaart heeft gemaakt, kunt u de set()methode gebruiken om er elementen in in te voegen. Bijvoorbeeld,
// 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))
U kunt ook objecten of functies als toetsen gebruiken. Bijvoorbeeld,
// 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"))
Toegang tot kaartelementen
U kunt toegang krijgen tot Mapelementen met behulp van de get()methode. Bijvoorbeeld,
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")
Controleer kaartelementen
U kunt de has()methode gebruiken om te controleren of het element op een kaart staat. Bijvoorbeeld,
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
Elementen verwijderen
U kunt de clear()en de delete()methode gebruiken om elementen van een kaart te verwijderen.
De delete()methode keert terug trueals een opgegeven sleutel / waarde-paar bestaat en is verwijderd, of keert terug false. Bijvoorbeeld,
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 ()
De clear()methode verwijdert alle sleutel / waarde-paren uit een Map-object. Bijvoorbeeld,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
JavaScript-kaartgrootte
U kunt het aantal elementen in een kaart krijgen met behulp van de sizeeigenschap. Bijvoorbeeld,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Herhaal door een kaart
U kunt door de Map-elementen heen herhalen met de for… of loop of forEach () methode. De elementen zijn toegankelijk in de invoegvolgorde. Bijvoorbeeld,
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); )
Uitvoer
naam - Jack leeftijd - 27
U kunt met de forEach()methode ook dezelfde resultaten krijgen als het bovenstaande programma . Bijvoorbeeld,
// 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) ))
Herhaal kaartsleutels
U kunt de kaart herhalen en de sleutel verkrijgen met behulp van de keys()methode. Bijvoorbeeld,
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) )
Uitvoer
naam leeftijd
Herhaal kaartwaarden
U kunt de kaart herhalen en de waarden ophalen met behulp van de values()methode. Bijvoorbeeld,
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); )
Uitvoer
Krik 27
Krijg sleutel / waarden van de kaart
U kunt de kaart herhalen en de sleutel / waarde van een kaart verkrijgen met behulp van de entries()methode. Bijvoorbeeld,
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))`); )
Uitvoer
naam: Jack leeftijd: 27
JavaScript-kaart versus object
| Kaart | Voorwerp |
|---|---|
| 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 hebben methoden get(), set(), delete(), en has(). Bijvoorbeeld,
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 zijn niet itereerbaar
In tegenstelling tot Maps zijn WeakMaps niet itereerbaar. Bijvoorbeeld,
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 Mapen WeakMapzijn geïntroduceerd in ES6 . Sommige browsers ondersteunen het gebruik ervan mogelijk niet. Ga voor meer informatie naar Ondersteuning voor JavaScript-kaarten en JavaScript WeakMap-ondersteuning.
