10 JavaScript-kaartmethoden die u vandaag moet beheersen

Een JavaScript-kaart is een verzameling die elk van zijn elementen opslaat als een sleutel-waardepaar. Dit gegevenstype wordt ook wel een associatieve array of een woordenboek genoemd.

U kunt elk gegevenstype (primitieven en objecten) als sleutel of waarde gebruiken. Het Map-object onthoudt de oorspronkelijke volgorde van invoeging, hoewel u waarden normaal gesproken via hun sleutel zult benaderen.

In dit artikel leert u over tien JavaScript-kaartmethoden die u vandaag onder de knie moet krijgen.

1. Een nieuwe kaart maken in JavaScript

U kunt een nieuw kaartobject maken met de Kaart() aannemer. Deze constructor accepteert één parameter: een itereerbaar object waarvan de elementen sleutel-waardeparen zijn.

laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman'],
[1992, 'Batman keert terug'],
[1995, 'Batman voor altijd'],
[2005, 'Batman begint'],
[2008, 'De donkere ridder'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj);

Uitgang:

Kaart (7) {
1966 => 'Batman: de film',





instagram viewer


1989 => 'Batman',
1992 => 'Batman keert terug',
1995 => 'Batman voor altijd',
2005 => 'Batman begint',
2008 => 'De Donkere Ridder',
2012 => 'The Dark Knight Rises'
}

Als u de parameter niet opgeeft, maakt JavaScript een nieuwe lege kaart.

laat mapObj = nieuwe kaart();
console.log (mapObj);

Uitgang:

Kaart (0) {}

Als u een kaart probeert te maken met dubbele sleutels, zal elke herhaalde toets de vorige waarde overschrijven met de nieuwe waarde.

laat mapObj = nieuwe kaart([
['sleutel1', 'waarde1'],
['sleutel2', 'waarde2'],
['sleutel2', 'nieuweWaarde2']
]);
console.log (mapObj);

Uitgang:

Kaart (2) {
'sleutel1' => 'waarde1',
'key2' => 'newValue2'
}

Hier wordt de waarde opgeslagen tegen de sleutel2 sleutel is nieuweWaarde2, niet hoe eerder waarde2.

U kunt ook een kaartobject maken dat sleutel-waardeparen bevat met behulp van gemengde gegevenstypen.

laat mapObj = nieuwe kaart([
["string1", 1],
[2, "string2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Uitgang:

Kaart (4) {
'string1' => 1,
2 => 'string2',
'string3' => 433.234,
23.56 => 45
}

2. Nieuwe elementen toevoegen aan een kaartobject

U kunt een nieuw element aan het kaartobject toevoegen met de set() methode. Deze methode accepteert een sleutel en een waarde en voegt vervolgens een nieuw element toe aan het Map-object. De methode retourneert vervolgens het nieuwe Map-object met de toegevoegde waarde. Als de sleutel al in de kaart bestaat, vervangt de nieuwe waarde de bestaande waarde.

laat mapObj = nieuwe kaart();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Returns');
mapObj.set (1995, 'Batman Forever');
console.log (mapObj);

Uitgang:

Kaart (4) {
1966 => 'Batman: de film',
1989 => 'Batman',
1992 => 'Batman keert terug',
1995 => 'Batman voor altijd'
}

U kunt ook variabelen of constanten gebruiken als sleutels of waarden:

const jaar1 = 1966;
const movieName1 = 'Batman: de film';
laat jaar2 = 1989;
var movieName2 = 'Batman';
laat mapObj = nieuwe kaart();
mapObj.set (jaar1, filmnaam1);
mapObj.set (jaar2, filmnaam2);
console.log (mapObj);

Uitgang:

Kaart (2) {
1966 => 'Batman: de film',
1989 => 'Batman'
}

De set() methode ondersteunt chaining.

laat mapObj = nieuwe kaart();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, 'Batman keert terug')
.set (1995, 'Batman voor altijd');
console.log (mapObj);

Uitgang:

Kaart (4) {
1966 => 'Batman: de film',
1989 => 'Batman',
1992 => 'Batman keert terug',
1995 => 'Batman voor altijd'
}

3. Alle elementen van een kaartobject verwijderen

U kunt alle elementen van een kaartobject verwijderen met de Doorzichtig() methode. Deze methode keert altijd terug ongedefinieerd.

laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman']
]);
console.log("Grootte van het kaartobject: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Grootte van het Map-object na het wissen van elementen: " + mapObj.size);
console.log (mapObj);

Uitgang:

Grootte van het kaartobject: 2
Kaart (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Grootte van het kaartobject na het wissen van elementen: 0
Kaart (0) {}

4. Een specifiek element van een kaart verwijderen

U kunt een specifiek element uit een kaartobject verwijderen met de verwijderen() methode. Deze methode accepteert de sleutel van het element dat van de kaart moet worden verwijderd. Als de sleutel bestaat, retourneert de methode waar. Anders keert het terug vals.

laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman']
]);
console.log("Initiële kaart: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Kaart na het verwijderen van het element met sleutel als 1966");
console.log (mapObj);

Uitgang:

Eerste kaart:
Kaart (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Kaart na het verwijderen van het element met de sleutel als 1966
Kaart (1) { 1989 => 'Batman' }

5. Controleren of een element op een kaart bestaat

U kunt controleren of een element in een kaartobject bestaat met behulp van de heeft() methode. Deze methode accepteert de sleutel van het element als een parameter om te testen op aanwezigheid in het kaartobject. Deze methode retourneert waar als de sleutel bestaat. Anders keert het terug vals.

laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman'],
[1992, 'Batman keert terug'],
[1995, 'Batman voor altijd'],
[2005, 'Batman begint'],
[2008, 'De donkere ridder'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Uitgang:

waar
vals

Een element met sleutel 1966 bestaat in het Map-object, dus de methode is geretourneerd waar. Maar aangezien er geen element is met sleutel 1977 in het Map-object, de methode geretourneerd vals vanaf de tweede oproep.

Verwant: Wat is JavaScript en hoe werkt het?

6. Toegang tot de waarde voor een specifieke sleutel

De krijgen() methode retourneert een specifiek element van het Map-object. Deze methode accepteert de sleutel van het element als parameter. Als de sleutel aanwezig is in het Map-object, retourneert de methode de waarde van het element. Anders keert het terug ongedefinieerd.

laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman'],
[1992, 'Batman keert terug'],
[1995, 'Batman voor altijd'],
[2005, 'Batman begint'],
[2008, 'De donkere ridder'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Uitgang:

Batman: de film
ongedefinieerd

Een element met sleutel 1966 bestaat in het Map-object, dus de methode heeft de waarde van het element geretourneerd. Er is geen element met sleutel 1988 in het Map-object, dus de methode keerde terug ongedefinieerd.

7. Toegang tot de invoer van een kaart via een iterator

Volgens de ambtenaar MDN-webdocumenten:

De methode entries() retourneert een nieuw Iterator-object dat de [key, value]-paren bevat voor elk element in het Map-object in invoegvolgorde. In dit specifieke geval is dit iteratorobject ook itereerbaar, dus de for-of-lus kan worden gebruikt. Wanneer het protocol [Symbol.iterator] wordt gebruikt, retourneert het een functie die, wanneer aangeroepen, deze iterator zelf retourneert.

U hebt toegang tot elk element van de kaart met behulp van deze iterator en a voor...van uitspraak:

laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman'],
[1992, 'Batman keert terug'],
[1995, 'Batman voor altijd'],
[2005, 'Batman begint'],
[2008, 'De donkere ridder'],
[2012, 'The Dark Knight Rises']
]);
for (laat invoer van mapObj.entries()) {
console.log (invoer);
}

Uitgang:

[ 1966, 'Batman: de film']
[ 1989, 'Batman']
[ 1992, 'Batman keert terug']
[ 1995, 'Batman voor altijd']
[2005, 'Batman begint']
[2008, 'De donkere ridder']
[2012, 'The Dark Knight Rises']

Of u kunt de ES6-destructieve toewijzingsfunctie gebruiken om toegang te krijgen tot elke sleutel en waarde:

laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman'],
[1992, 'Batman keert terug'],
[1995, 'Batman voor altijd'],
[2005, 'Batman begint'],
[2008, 'De donkere ridder'],
[2012, 'The Dark Knight Rises']
]);
for (laat [sleutel, waarde] van mapObj.entries()) {
console.log ("Sleutel: " + sleutel + " Waarde: " + waarde);
}

Uitgang:

Sleutel: 1966 Waarde: Batman: The Movie
Sleutel: 1989 Waarde: Batman
Sleutel: 1992 Waarde: Batman Returns
Sleutel: 1995 Waarde: Batman Forever
Sleutel: 2005 Waarde: Batman Begins
Sleutel: 2008 Waarde: The Dark Knight
Sleutel: 2012 Waarde: The Dark Knight Rises

8. Hoe de waarden van een kaart te herhalen

De waarden() methode retourneert an iterator object dat alle waarden in een kaart bevat, en doet dit in invoegvolgorde.

laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman'],
[1992, 'Batman keert terug']
]);
const iteratorObj = mapObj.values();
for (laat waarde van iteratorObj) {
console.log (waarde);
}

Uitgang:

Batman: de film
Batman
Batman keert terug

9. Herhaal de toetsen van een kaart

De sleutels() methode retourneert an iterator object dat alle sleutels in een kaart bevat, en het doet dit in invoegvolgorde.

laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman'],
[1992, 'Batman keert terug']
]);
const iteratorObj = mapObj.keys();
for (laat de sleutel van iteratorObj) {
console.log (sleutel);
}

Uitgang:

1966
1989
1992

Verwant: JavaScript-pijlfuncties kunnen u een betere ontwikkelaar maken

10. Herhaal elementen in een kaart met behulp van een callback

De voor elk() methode roept een callback-functie aan voor elk element van het Map-object. De callback-functie heeft twee parameters: de sleutel en de waarde.

functie printKeyValue (sleutel, waarde) {
console.log ("Sleutel: " + sleutel + " Waarde: " + waarde);
}
laat mapObj = nieuwe kaart([
[1966, 'Batman: de film'],
[1989, 'Batman'],
[1992, 'Batman keert terug']
]);
mapObj.forEach (printKeyValue);

Uitgang:

Sleutel: Batman: The Movie Waarde: 1966
Sleutel: Batman Waarde: 1989
Sleutel: Batman retourneert Waarde: 1992

Nu weet u over kaarten in JavaScript

Nu heb je genoeg kennis om het concept van Maps in JavaScript onder de knie te krijgen. De kaartgegevensstructuur wordt veel gebruikt bij veel programmeertaken. Als je het eenmaal onder de knie hebt, kun je doorgaan met andere native JavaScript-objecten zoals Sets, Arrays, enzovoort.

15 JavaScript-array-methoden die u vandaag moet beheersen

Wilt u JavaScript-arrays begrijpen, maar kunt u er geen grip op krijgen? Bekijk onze voorbeelden van JavaScript-arrays voor hulp.

Lees volgende

Over de auteur