{"id":92087,"date":"2022-10-12T13:59:31","date_gmt":"2022-10-12T18:59:31","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/10-javascript-kartmetoder-du-bor-beharska-idag\/"},"modified":"2022-10-12T13:59:31","modified_gmt":"2022-10-12T18:59:31","slug":"10-javascript-kartmetoder-du-bor-beharska-idag","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/10-javascript-kartmetoder-du-bor-beharska-idag\/","title":{"rendered":"10 JavaScript-kartmetoder du b\u00f6r beh\u00e4rska idag"},"content":{"rendered":"
\n

En JavaScript-karta \u00e4r en samling som lagrar vart och ett av dess element som ett nyckel-v\u00e4rdepar. Denna datatyp kallas ocks\u00e5 f\u00f6r en associativ array eller en ordbok.<\/p>\n

Du kan anv\u00e4nda vilken datatyp som helst (primitiver och objekt) som antingen nyckel eller v\u00e4rde. Kartobjektet kommer ih\u00e5g den ursprungliga ordningen f\u00f6r infogning, \u00e4ven om du vanligtvis kommer \u00e5t v\u00e4rden med deras nyckel.<\/p>\n

I den h\u00e4r artikeln kommer du att l\u00e4ra dig om tio JavaScript-kartmetoder som du b\u00f6r beh\u00e4rska idag.<\/p>\n

<\/span> 1. Hur man skapar en ny karta i JavaScript<\/span><\/h2>\n

Du kan skapa ett nytt kartobjekt med hj\u00e4lp av Karta()<\/strong> konstrukt\u00f6r. Denna konstruktor accepterar en parameter: ett iterbart objekt vars element \u00e4r nyckel-v\u00e4rdepar.<\/p>\n

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);<\/pre>\n
Produktion:<\/p>\n
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'}<\/pre>\n
Om du inte anger parametern kommer JavaScript att skapa en ny tom karta.<\/p>\n
let mapObj = new Map();console.log(mapObj);<\/pre>\n
Produktion:<\/p>\n
Map(0) {}<\/pre>\n
Om du f\u00f6rs\u00f6ker skapa en karta med dubbletter av nycklar kommer varje upprepad nyckel att skriva \u00f6ver det tidigare v\u00e4rdet med det nya v\u00e4rdet.<\/p>\n
let mapObj = new Map([['key1', 'value1'],['key2', 'value2'],['key2', 'newValue2']]);console.log(mapObj);<\/pre>\n
Produktion:<\/p>\n
Map(2) {'key1' => 'value1','key2' => 'newValue2'}<\/pre>\n
H\u00e4r lagras v\u00e4rdet mot nyckel 2<\/strong> nyckeln \u00e4r nyttV\u00e4rde2<\/strong>, inte desto tidigare v\u00e4rde2<\/strong>.<\/p>\n
Du kan ocks\u00e5 skapa ett kartobjekt som inneh\u00e5ller nyckel-v\u00e4rdepar med hj\u00e4lp av blandade datatyper.<\/p>\n
let mapObj = new Map([[\"string1\", 1],[2, \"string2\"],[\"string3\", 433.234],[23.56, 45]]);console.log(mapObj);<\/pre>\n
Produktion:<\/p>\n
Map(4) {'string1' => 1,2 => 'string2','string3' => 433.234,23.56 => 45}<\/pre>\n
<\/span>  2. L\u00e4gg till nya element till ett kartobjekt<\/span><\/h2>\n
Du kan l\u00e4gga till ett nytt element till kartobjektet med hj\u00e4lp av upps\u00e4ttning()<\/strong> metod.  Denna metod accepterar en nyckel och ett v\u00e4rde och l\u00e4gger sedan till ett nytt element till kartobjektet.  Metoden returnerar sedan det nya kartobjektet med merv\u00e4rdet.  Om nyckeln redan finns i kartan kommer det nya v\u00e4rdet att ers\u00e4tta det befintliga v\u00e4rdet.<\/p>\n
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);<\/pre>\n
Produktion:<\/p>\n
Map(4) {1966 => 'Batman: The Movie',1989 => 'Batman',1992 => 'Batman Returns',1995 => 'Batman Forever'}<\/pre>\n
Du kan ocks\u00e5 anv\u00e4nda variabler eller konstanter som nycklar eller v\u00e4rden:<\/p>\n
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);<\/pre>\n
Produktion:<\/p>\n
Map(2) {1966 => 'Batman: The Movie',1989 => 'Batman'}<\/pre>\n
De upps\u00e4ttning()<\/strong> metod st\u00f6der kedja.<\/p>\n
let mapObj = new Map();mapObj.set(1966, 'Batman: The Movie').set(1989, 'Batman').set(1992, 'Batman Returns').set(1995, 'Batman Forever');console.log(mapObj);<\/pre>\n
Produktion:<\/p>\n
Map(4) {1966 => 'Batman: The Movie',1989 => 'Batman',1992 => 'Batman Returns',1995 => 'Batman Forever'}<\/pre>\n
<\/span>  3. Ta bort alla element fr\u00e5n ett kartobjekt<\/span><\/h2>\n
Du kan ta bort alla element fr\u00e5n ett kartobjekt med hj\u00e4lp av klar()<\/strong> metod.  Denna metod \u00e5terkommer alltid odefinierad<\/strong>.<\/p>\n
let mapObj = new Map([[1966, 'Batman: The Movie'],[1989, 'Batman']]);console.log(\"Size of the Map object: \" + mapObj.size);console.log(mapObj);
mapObj.clear();<\/p>
console.log(\"Size of the Map object after clearing elements: \" + mapObj.size);console.log(mapObj);<\/p><\/pre>\n
Produktion:<\/p>\n
Size of the Map object: 2Map(2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }Size of the Map object after clearing elements: 0Map(0) {}<\/pre>\n
<\/span>  4. Ta bort ett specifikt element fr\u00e5n en karta<\/span><\/h2>\n
Du kan ta bort ett specifikt element fr\u00e5n ett kartobjekt med hj\u00e4lp av radera()<\/strong> metod.  Denna metod accepterar nyckeln till elementet som ska raderas fr\u00e5n kartan.  Om nyckeln finns kommer metoden tillbaka Sann<\/strong>.  Annars kommer den tillbaka falsk<\/strong>.<\/p>\n
let mapObj = new Map([[1966, 'Batman: The Movie'],[1989, 'Batman']]);console.log(\"Initial Map: \");console.log(mapObj);
mapObj.delete(1966);<\/p>
console.log(\"Map after deleting the element having key as 1966\");console.log(mapObj);<\/p><\/pre>\n
Produktion:<\/p>\n
Initial Map:Map(2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }Map after deleting the element having key as 1966Map(1) { 1989 => 'Batman' }<\/pre>\n
<\/span>  5. Kontrollera om ett element finns i en karta<\/span><\/h2>\n
Du kan kontrollera om ett element finns i ett kartobjekt med hj\u00e4lp av har()<\/strong> metod.  Denna metod accepterar elementets nyckel som en parameter f\u00f6r att testa f\u00f6r n\u00e4rvaro i kartobjektet.  Denna metod \u00e5terkommer Sann<\/strong> om nyckeln finns.  Annars kommer den tillbaka falsk<\/strong>.<\/p>\n
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));<\/p><\/pre>\n
Produktion:<\/p>\n
truefalse<\/pre>\n
Ett element med nyckel 1966<\/strong> finns i kartobjektet, s\u00e5 metoden returnerades Sann<\/strong>.  Men eftersom det inte finns n\u00e5got element med nyckel 1977<\/strong> i kartobjektet returnerade metoden falsk<\/strong> fr\u00e5n det andra samtalet.<\/p>\n
<\/span>  6. F\u00e5 \u00e5tkomst till v\u00e4rdet f\u00f6r en specifik nyckel<\/span><\/h2>\n
De skaffa sig()<\/strong> metod returnerar ett specifikt element fr\u00e5n kartobjektet.  Denna metod accepterar nyckeln f\u00f6r elementet som en parameter.  Om nyckeln finns i kartobjektet returnerar metoden elementets v\u00e4rde.  Annars kommer det tillbaka odefinierad<\/strong>.<\/p>\n
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));<\/p><\/pre>\n
Produktion:<\/p>\n
Batman: The Movieundefined<\/pre>\n
Ett element med nyckel 1966<\/strong> finns i Map-objektet, s\u00e5 metoden returnerade v\u00e4rdet f\u00f6r elementet.  Det finns inget element med nyckel 1988<\/strong> i kartobjektet, s\u00e5 metoden returnerades odefinierad<\/strong>.<\/p>\n
<\/span>  7. F\u00e5 tillg\u00e5ng till en kartas poster via en Iterator<\/span><\/h2>\n
Enligt den officiella MDN Web Docs:<\/p>\n
Metoden entries() returnerar ett nytt Iterator-objekt som inneh\u00e5ller [key, value] par f\u00f6r varje element i kartobjektet i infogningsordning.  I det h\u00e4r speciella fallet \u00e4r detta iteratorobjekt ocks\u00e5 iterbart, s\u00e5 for-of-loopen kan anv\u00e4ndas.  N\u00e4r protokollet [Symbol.iterator] anv\u00e4nds, returnerar den en funktion som, n\u00e4r den anropas, returnerar denna iterator sj\u00e4lv.<\/p>\n
Du kan komma \u00e5t varje element i kartan med denna iterator och en f\u00f6r av<\/strong> p\u00e5st\u00e5ende:<\/p>\n
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);}<\/p><\/pre>\n
Produktion:<\/p>\n
[ 1966, 'Batman: The Movie' ][ 1989, 'Batman' ][ 1992, 'Batman Returns' ][ 1995, 'Batman Forever' ][ 2005, 'Batman Begins' ][ 2008, 'The Dark Knight' ][ 2012, 'The Dark Knight Rises' ]<\/pre>\n
Eller s\u00e5 kan du anv\u00e4nda ES6-destruktionsfunktionen f\u00f6r att komma \u00e5t varje nyckel och v\u00e4rde:<\/p>\n
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);}<\/p><\/pre>\n
Produktion:<\/p>\n
Key: 1966 Value: Batman: The MovieKey: 1989 Value: BatmanKey: 1992 Value: Batman ReturnsKey: 1995 Value: Batman ForeverKey: 2005 Value: Batman BeginsKey: 2008 Value: The Dark KnightKey: 2012 Value: The Dark Knight Rises<\/pre>\n
<\/span>  8. Hur man itererar \u00f6ver en kartas v\u00e4rden<\/span><\/h2>\n
De v\u00e4rden()<\/strong> metod returnerar en Iterator<\/strong> objekt som inneh\u00e5ller alla v\u00e4rden i en karta, och det g\u00f6r detta i infogningsordning.<\/p>\n
let mapObj = new Map([[1966, 'Batman: The Movie'],[1989, 'Batman'],[1992, 'Batman Returns']]);
const iteratorObj = mapObj.values();<\/p>
for (let value of iteratorObj) {console.log(value);}<\/p><\/pre>\n
Produktion:<\/p>\n
Batman: The MovieBatmanBatman Returns<\/pre>\n
<\/span>  9. Iterera \u00f6ver en kartas nycklar<\/span><\/h2>\n
De nycklar()<\/strong> metod returnerar en Iterator<\/strong> objekt som inneh\u00e5ller alla nycklar i en karta, och det g\u00f6r detta i infogningsordning.<\/p>\n
let mapObj = new Map([[1966, 'Batman: The Movie'],[1989, 'Batman'],[1992, 'Batman Returns']]);
const iteratorObj = mapObj.keys();<\/p>
for (let key of iteratorObj) {console.log(key);}<\/p><\/pre>\n
Produktion:<\/p>\n
196619891992<\/pre>\n
<\/span>  10. Iterera \u00f6ver element i en karta med hj\u00e4lp av en \u00e5teruppringning<\/span><\/h2>\n
De f\u00f6r varje()<\/strong> metoden anropar en \u00e5teruppringningsfunktion f\u00f6r varje element i kartobjektet.  \u00c5teruppringningsfunktionen tar tv\u00e5 parametrar: nyckeln och v\u00e4rdet.<\/p>\n
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);<\/pre>\n
Produktion:<\/p>\n
Key: Batman: The Movie Value: 1966Key: Batman Value: 1989Key: Batman Returns Value: 1992<\/pre>\n
<\/span>  Nu vet du om kartor i JavaScript<\/span><\/h2>\n
Nu har du tillr\u00e4ckligt med kunskap f\u00f6r att bem\u00e4stra konceptet Maps i JavaScript.  Kartdatastrukturen anv\u00e4nds ofta i m\u00e5nga programmeringsuppgifter.  N\u00e4r du har bem\u00e4strat det kan du g\u00e5 vidare till andra inbyggda JavaScript-objekt som upps\u00e4ttningar, matriser och s\u00e5 vidare.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Yuvraj Chandra (80 artiklar publicerade)
<\/strong><\/p>\n
Yuvraj \u00e4r en datavetenskapsstudent vid University of Delhi, Indien.  Han brinner f\u00f6r Full Stack Web Development.  N\u00e4r han inte skriver unders\u00f6ker han djupet i olika teknologier.<\/p>\n
                            Mer fr\u00e5n Yuvraj Chandra<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n