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.
let mapObj = new Map([
[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:
Map(7) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman Returns',
1995 => 'Batman Forever',
2005 => 'Batman Begins',
2008 => 'The Dark Knight',
2012 => 'The Dark Knight Rises'
}
Om du inte anger parametern kommer JavaScript att skapa en ny tom karta.
let mapObj = new Map();
console.log(mapObj);
Produktion:
Map(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.
let mapObj = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key2', 'newValue2']
]);
console.log(mapObj);
Produktion:
Map(2) {
'key1' => 'value1',
'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.
let mapObj = new Map([
["string1", 1],
[2, "string2"],
["string3", 433.234],
[23.56, 45]
]);
console.log(mapObj);
Produktion:
Map(4) {
'string1' => 1,
2 => 'string2',
'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.
let mapObj = new Map();
mapObj.set(1966, 'Batman: The Movie');
mapObj.set(1989, 'Batman');
mapObj.set(1992, 'Batman Returns');
mapObj.set(1995, 'Batman Forever');
console.log(mapObj);
Produktion:
Map(4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman Returns',
1995 => 'Batman Forever'
}
Du kan också använda variabler eller konstanter som nycklar eller värden:
const year1 = 1966;
const movieName1 = 'Batman: The Movie';
let year2 = 1989;
var movieName2 = 'Batman';
let mapObj = new Map();
mapObj.set(year1, movieName1);
mapObj.set(year2, movieName2);
console.log(mapObj);
Produktion:
Map(2) {
1966 => 'Batman: The Movie',
1989 => 'Batman'
}
De uppsättning() metod stöder kedja.
let mapObj = new Map();
mapObj.set(1966, 'Batman: The Movie')
.set(1989, 'Batman')
.set(1992, 'Batman Returns')
.set(1995, 'Batman Forever');
console.log(mapObj);
Produktion:
Map(4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman Returns',
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.
let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Size of the Map object: " + mapObj.size);
console.log(mapObj);mapObj.clear();
console.log("Size of the Map object after clearing elements: " + mapObj.size);
console.log(mapObj);
Produktion:
Size of the Map object: 2
Map(2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Size of the Map object after clearing elements: 0
Map(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.
let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Initial Map: ");
console.log(mapObj);mapObj.delete(1966);
console.log("Map after deleting the element having key as 1966");
console.log(mapObj);
Produktion:
Initial Map:
Map(2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Map after deleting the element having key as 1966
Map(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.
let mapObj = new Map([
[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:
true
false
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.
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 det tillbaka odefinierad.
let mapObj = new Map([
[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
undefined
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 den officiella MDN Web Docs:
Metoden entries() returnerar ett nytt Iterator-objekt som innehåller [key, value] par för varje element i kartobjektet 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 den 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:
let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);for (let entry of mapObj.entries()) {
console.log(entry);
}
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:
let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);for (let [key, value] of mapObj.entries()) {
console.log("Key: " + key + " Value: " + value);
}
Produktion:
Key: 1966 Value: Batman: The Movie
Key: 1989 Value: Batman
Key: 1992 Value: Batman Returns
Key: 1995 Value: Batman Forever
Key: 2005 Value: Batman Begins
Key: 2008 Value: The Dark Knight
Key: 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.
let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);const iteratorObj = mapObj.values();
for (let value of iteratorObj) {
console.log(value);
}
Produktion:
Batman: The Movie
Batman
Batman Returns
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.
let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);const iteratorObj = mapObj.keys();
for (let key of iteratorObj) {
console.log(key);
}
Produktion:
1966
1989
1992
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(key, value) {
console.log("Key: " + key + " Value: " + value);
}
let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
mapObj.forEach(printKeyValue);
Produktion:
Key: Batman: The Movie Value: 1966
Key: Batman Value: 1989
Key: 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.
Om författaren
Yuvraj Chandra (80 artiklar publicerade)
Yuvraj är en datavetenskapsstudent vid University of Delhi, Indien. Han brinner för Full Stack Web Development. När han inte skriver undersöker han djupet i olika teknologier.
Mer från Yuvraj Chandra
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
