JavaScript-kaarten
Een kaart bevat sleutel-waardeparen waarbij de sleutels elk gegevenstype kunnen zijn.
Een kaart onthoudt de oorspronkelijke invoegvolgorde van de toetsen.
Een kaart heeft een eigenschap die de grootte van de kaart vertegenwoordigt.
Kaartmethoden
| Methode | Beschrijving |
|---|---|
| nieuwe kaart() | Maakt een nieuw kaartobject |
| set() | Stelt de waarde in voor een sleutel in een kaart |
| krijgen() | Haalt de waarde op voor een sleutel in een kaart |
| Doorzichtig() | Verwijdert alle elementen van een kaart |
| verwijderen() | Verwijdert een kaartelement gespecificeerd door een sleutel |
| heeft() | Retourneert waar als een sleutel in een kaart bestaat |
| voor elk() | Roept een callback op voor elk sleutel/waarde-paar in een map |
| vermeldingen() | Retourneert een iteratorobject met de [key, value]-paren in een Map |
| sleutels() | Retourneert een iteratorobject met de sleutels in een kaart |
| waarden() | Retourneert een iteratorobject van de waarden in een kaart |
| Eigendom | Beschrijving |
|---|---|
| maat | Retourneert het aantal kaartelementen |
Een kaart maken
U kunt een JavaScript-kaart maken door:
- Een array doorgeven aan
new Map() - Maak een kaart en gebruik
Map.set()
nieuwe kaart()
U kunt een kaart maken door een array door te geven aan de new Map()constructor:
Voorbeeld
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
kaart.set()
U kunt elementen aan een kaart toevoegen met de set()methode:
Voorbeeld
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
De set()methode kan ook worden gebruikt om bestaande kaartwaarden te wijzigen:
Voorbeeld
fruits.set("apples", 500);
Kaart.get()
De get()methode krijgt de waarde van een sleutel in een kaart:
Voorbeeld
fruits.get("apples"); // Returns 500
Kaart grootte
De sizeeigenschap retourneert het aantal elementen in een kaart:
Voorbeeld
fruits.size;
Kaart.delete()
De delete()methode verwijdert een kaartelement:
Voorbeeld
fruits.delete("apples");
Map.clear()
De clear()methode verwijdert alle elementen van een kaart:
Voorbeeld
fruits.clear();
Kaart.heeft()
De has()methode retourneert true als er een sleutel in een map bestaat:
Voorbeeld
fruits.has("apples");
Probeer dit:
fruits.delete("apples");
fruits.has("apples");
Kaarten zijn objecten
typeofretourneert object:
Voorbeeld
// Returns object:
typeof fruits;
instanceofKaart retourneert waar:
Voorbeeld
// Returns true:
fruits instanceof Map;
JavaScript-objecten versus kaarten
Verschillen tussen JavaScript-objecten en kaarten:
| Object | Kaart | |
|---|---|---|
| itereerbaar | Niet direct itereerbaar | Direct itereerbaar |
| Maat | Heb geen eigenschap voor grootte | Heb een eigenschap van de grootte |
| Sleuteltypes | Sleutels moeten strings (of symbolen) zijn | Sleutels kunnen elk datatype zijn |
| Sleutelvolgorde | Sleutels zijn niet goed besteld | Sleutels worden geordend door invoeging |
| Standaardinstellingen | Standaardsleutels hebben | Heb geen standaardsleutels |
Map.forEach()
De forEach()methode roept een callback op voor elk sleutel/waarde-paar in een kaart:
Voorbeeld
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Map.keys()
De keys()methode retourneert een iteratorobject met de sleutels in een kaart:
Voorbeeld
// List all keys
let veggies = "";
for (const x of fruits.keys()) {
veggies += x;
}
Kaart.waarden()
De valuesmethode retourneert een iteratorobject met de waarden in een kaart:
Voorbeeld
// Sum all values
let total = 0;
for (const x of fruits.values()) {
total += x;
}
Map.entries()
De entries()methode retourneert een iteratorobject met de [key,values] in een Map:
Voorbeeld
// List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}
Objecten als sleutels
Het kunnen gebruiken van objecten als sleutels is een belangrijke kaartfunctie.
Voorbeeld
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Onthoud: de sleutel is een object (appels), geen string ("appels"):
Voorbeeld
fruits.get("apples"); // Returns undefined
Browserondersteuning
JavaScript-kaarten worden ondersteund in alle browsers, behalve Internet Explorer:
| Chrome | Edge | Firefox | Safari | Opera |