10 JavaScript-kartmetoder du bör behärska idag

En JavaScript-karta är en samling som lagrar vart och ett av dess element som ett nyckel-värdepar. Denna datatyp kallas också för en associativ array eller en ordbok.

Du kan använda vilken datatyp som helst (primitiver och objekt) som antingen nyckel eller värde. Kartobjektet kommer ihåg den ursprungliga ordningen för infogning, även om du vanligtvis kommer åt värden med deras nyckel.

I den här artikeln kommer du att lära dig om tio JavaScript-kartmetoder som du bör behärska idag.

1. Hur man skapar en ny karta i JavaScript

Du kan skapa ett nytt kartobjekt med hjälp av Karta() konstruktör. Denna konstruktor accepterar en parameter: ett iterbart objekt vars element är nyckel-värdepar.

låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj);

Produktion:

Karta (7) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman återvänder',





instagram viewer


1995 => 'Batman Forever',
2005 => 'Batman börjar',
2008 => 'The Dark Knight',
2012 => 'The Dark Knight Rises'
}

Om du inte anger parametern kommer JavaScript att skapa en ny tom karta.

låt mapObj = ny karta();
console.log (mapObj);

Produktion:

Karta (0) {}

Om du försöker skapa en karta med dubbletter av nycklar kommer varje upprepad nyckel att skriva över det tidigare värdet med det nya värdet.

låt mapObj = ny karta([
['nyckel1', 'värde1'],
['nyckel2', 'värde2'],
['nyckel2', 'newValue2']
]);
console.log (mapObj);

Produktion:

Karta (2) {
'key1' => 'värde1',
'key2' => 'newValue2'
}

Här lagras värdet mot nyckel 2 nyckeln är nyttVärde2, inte desto tidigare värde2.

Du kan också skapa ett kartobjekt som innehåller nyckel-värdepar med hjälp av blandade datatyper.

låt mapObj = ny karta([
["sträng1", 1],
[2, "sträng2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Produktion:

Karta (4) {
'string1' => 1,
2 => 'sträng2',
'string3' => 433.234,
23.56 => 45
}

2. Lägg till nya element till ett kartobjekt

Du kan lägga till ett nytt element till kartobjektet med hjälp av uppsättning() metod. Denna metod accepterar en nyckel och ett värde och lägger sedan till ett nytt element till kartobjektet. Metoden returnerar sedan det nya kartobjektet med mervärdet. Om nyckeln redan finns i kartan kommer det nya värdet att ersätta det befintliga värdet.

låt mapObj = ny karta();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Returns');
mapObj.set (1995, 'Batman Forever');
console.log (mapObj);

Produktion:

Karta (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman återvänder',
1995 => 'Batman Forever'
}

Du kan också använda variabler eller konstanter som nycklar eller värden:

konst år1 = 1966;
const movieName1 = 'Batman: The Movie';
låt år2 = 1989;
var movieName2 = 'Batman';
låt mapObj = ny karta();
mapObj.set (år1, filmnamn1);
mapObj.set (år2, filmnamn2);
console.log (mapObj);

Produktion:

Karta (2) {
1966 => 'Batman: The Movie',
1989 => 'Batman'
}

De uppsättning() metod stöder kedja.

låt mapObj = ny karta();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, 'Batman Returns')
.set (1995, 'Batman Forever');
console.log (mapObj);

Produktion:

Karta (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman återvänder',
1995 => 'Batman Forever'
}

3. Ta bort alla element från ett kartobjekt

Du kan ta bort alla element från ett kartobjekt med hjälp av klar() metod. Denna metod återkommer alltid odefinierad.

låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Storlek på kartobjektet: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Storlek på kartobjektet efter att ha rensat element: " + mapObj.size);
console.log (mapObj);

Produktion:

Kartobjektets storlek: 2
Karta (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Storlek på kartobjektet efter att ha rensat element: 0
Karta (0) {}

4. Ta bort ett specifikt element från en karta

Du kan ta bort ett specifikt element från ett kartobjekt med hjälp av radera() metod. Denna metod accepterar nyckeln till elementet som ska raderas från kartan. Om nyckeln finns kommer metoden tillbaka Sann. Annars kommer den tillbaka falsk.

låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Initial karta: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Karta efter borttagning av elementet med nyckel som 1966");
console.log (mapObj);

Produktion:

Inledande karta:
Karta (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Karta efter att ha tagit bort elementet med nyckel som 1966
Karta (1) { 1989 => 'Batman' }

5. Kontrollera om ett element finns i en karta

Du kan kontrollera om ett element finns i ett kartobjekt med hjälp av har() metod. Denna metod accepterar elementets nyckel som en parameter för att testa för närvaro i kartobjektet. Denna metod återkommer Sann om nyckeln finns. Annars kommer den tillbaka falsk.

låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Produktion:

Sann
falsk

Ett element med nyckel 1966 finns i kartobjektet, så metoden returnerades Sann. Men eftersom det inte finns något element med nyckel 1977 i kartobjektet returnerade metoden falsk från det andra samtalet.

Relaterad: Vad är JavaScript och hur fungerar det?

6. Få åtkomst till värdet för en specifik nyckel

De skaffa sig() metod returnerar ett specifikt element från kartobjektet. Denna metod accepterar nyckeln för elementet som en parameter. Om nyckeln finns i kartobjektet returnerar metoden elementets värde. Annars kommer den tillbaka odefinierad.

låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Produktion:

Batman: The Movie
odefinierad

Ett element med nyckel 1966 finns i Map-objektet, så metoden returnerade värdet för elementet. Det finns inget element med nyckel 1988 i kartobjektet, så metoden returnerades odefinierad.

7. Få tillgång till en kartas poster via en Iterator

Enligt tjänstemannen MDN Web Docs:

Entries()-metoden returnerar ett nytt Iterator-objekt som innehåller [nyckel, värde]-paren för varje element i Map-objektet i infogningsordning. I det här speciella fallet är detta iteratorobjekt också iterbart, så for-of-loopen kan användas. När protokollet [Symbol.iterator] används returnerar det en funktion som, när den anropas, returnerar denna iterator själv.

Du kan komma åt varje element i kartan med denna iterator och en för av påstående:

låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, "The Dark Knight Rises"]
]);
för (låt inmatning av mapObj.entries()) {
console.log (post);
}

Produktion:

[1966, 'Batman: The Movie']
[1989, 'Batman']
[1992, 'Batman Returns']
[1995, 'Batman Forever']
[2005, 'Batman Begins']
[2008, "The Dark Knight"]
[2012, 'The Dark Knight Rises']

Eller så kan du använda ES6-destruktionsfunktionen för att komma åt varje nyckel och värde:

låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, "The Dark Knight Rises"]
]);
för (låt [nyckel, värde] av mapObj.entries()) {
console.log("Nyckel: " + nyckel + " Värde: " + värde);
}

Produktion:

Nyckel: 1966 Värde: Batman: The Movie
Nyckel: 1989 Värde: Batman
Nyckel: 1992 Värde: Batman Returns
Nyckel: 1995 Värde: Batman Forever
Nyckel: 2005 Värde: Batman Begins
Nyckel: 2008 Värde: The Dark Knight
Nyckel: 2012 Value: The Dark Knight Rises

8. Hur man itererar över en kartas värden

De värden() metod returnerar en Iterator objekt som innehåller alla värden i en karta, och det gör detta i infogningsordning.

låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.values();
for (låt värdet av iteratorObj) {
console.log (värde);
}

Produktion:

Batman: The Movie
Läderlappen
Batman återvänder

9. Iterera över en kartas nycklar

De nycklar() metod returnerar en Iterator objekt som innehåller alla nycklar i en karta, och det gör detta i infogningsordning.

låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.keys();
for (låt nyckeln till iteratorObj) {
console.log (nyckel);
}

Produktion:

1966
1989
1992

Relaterad: JavaScript-pilfunktioner kan göra dig till en bättre utvecklare

10. Iterera över element i en karta med hjälp av en återuppringning

De för varje() metoden anropar en återuppringningsfunktion för varje element i kartobjektet. Återuppringningsfunktionen tar två parametrar: nyckeln och värdet.

function printKeyValue (nyckel, värde) {
console.log("Nyckel: " + nyckel + " Värde: " + värde);
}
låt mapObj = ny karta([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
mapObj.forEach (printKeyValue);

Produktion:

Nyckel: Batman: The Movie Värde: 1966
Nyckel: Batman Värde: 1989
Nyckel: Batman Returns Value: 1992

Nu vet du om kartor i JavaScript

Nu har du tillräckligt med kunskap för att bemästra konceptet Maps i JavaScript. Kartdatastrukturen används ofta i många programmeringsuppgifter. När du har bemästrat det kan du gå vidare till andra inbyggda JavaScript-objekt som uppsättningar, matriser och så vidare.

15 JavaScript-array-metoder du bör behärska idag

Vill du förstå JavaScript-matriser men kan inte ta tag i dem? Se våra JavaScript-arrayexempel för vägledning.

Läs Nästa

Om författaren