10 JavaScript-kortmetoder, du bør mestre i dag

Et JavaScript-kort er en samling, der gemmer hvert af dets elementer som et nøgleværdi-par. Denne datatype omtales også som en associativ matrix eller en ordbog.

Du kan bruge enhver datatype (primitiver og objekter) som enten en nøgle eller en værdi. Kortobjektet husker den oprindelige indsættelsesrækkefølge, selvom du typisk får adgang til værdier ved deres nøgle.

I denne artikel lærer du om ti JavaScript-kortmetoder, som du bør mestre i dag.

1. Sådan opretter du et nyt kort i JavaScript

Du kan oprette et nyt kortobjekt ved hjælp af Kort() konstruktør. Denne konstruktør accepterer én parameter: et iterabelt objekt, hvis elementer er nøgleværdi-par.

lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman vender tilbage'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj);

Produktion:

Kort (7) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman vender tilbage',
1995 => 'Batman Forever',





instagram viewer


2005 => 'Batman begynder',
2008 => 'The Dark Knight',
2012 => 'The Dark Knight Rises'
}

Hvis du ikke angiver parameteren, vil JavaScript oprette et nyt tomt kort.

lad mapObj = nyt kort();
console.log (mapObj);

Produktion:

Kort (0) {}

Hvis du forsøger at oprette et kort med dublerede nøgler, vil hver gentaget nøgle overskrive den tidligere værdi med den nye værdi.

lad mapObj = nyt kort([
['nøgle1', 'værdi1'],
['nøgle2', 'værdi2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Produktion:

Kort (2) {
'key1' => 'værdi1',
'key2' => 'newValue2'
}

Her er værdien gemt mod nøgle 2 nøglen er nyVærdi2, ikke jo tidligere værdi2.

Du kan også oprette et kortobjekt, der indeholder nøgle-værdi-par ved hjælp af blandede datatyper.

lad mapObj = nyt kort([
["streng1", 1],
[2, "streng2"],
["streng3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Produktion:

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

2. Tilføj nye elementer til et kortobjekt

Du kan tilføje et nyt element til kortobjektet ved hjælp af sæt() metode. Denne metode accepterer en nøgle og en værdi og tilføjer derefter et nyt element til kortobjektet. Metoden returnerer derefter det nye kortobjekt med den tilføjede værdi. Hvis nøglen allerede findes i kortet, vil den nye værdi erstatte den eksisterende værdi.

lad mapObj = nyt kort();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman vender tilbage');
mapObj.set (1995, 'Batman Forever');
console.log (mapObj);

Produktion:

Kort (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman vender tilbage',
1995 => 'Batman Forever'
}

Du kan også bruge variabler eller konstanter som nøgler eller værdier:

konst år1 = 1966;
const movieName1 = 'Batman: The Movie';
lad år2 = 1989;
var movieName2 = 'Batman';
lad mapObj = nyt kort();
mapObj.set (år1, filmnavn1);
mapObj.set (år2, filmnavn2);
console.log (mapObj);

Produktion:

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

Det sæt() metoden understøtter kæde.

lad mapObj = nyt kort();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, 'Batman vender tilbage')
.set (1995, 'Batman Forever');
console.log (mapObj);

Produktion:

Kort (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman vender tilbage',
1995 => 'Batman Forever'
}

3. Fjern alle elementer fra et kortobjekt

Du kan fjerne alle elementer fra et kortobjekt ved hjælp af klar() metode. Denne metode vender altid tilbage udefineret.

lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Størrelse af kortobjektet: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Størrelse af kortobjektet efter sletning af elementer: " + mapObj.size);
console.log (mapObj);

Produktion:

Kortobjektets størrelse: 2
Kort (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Størrelse på kortobjektet efter sletning af elementer: 0
Kort (0) {}

4. Slet et bestemt element fra et kort

Du kan fjerne et bestemt element fra et kortobjekt ved hjælp af slet() metode. Denne metode accepterer nøglen til det element, der skal slettes fra kortet. Hvis nøglen findes, vender metoden tilbage sand. Ellers vender den tilbage falsk.

lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Initial Map: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Kort efter sletning af elementet med nøgle som 1966");
console.log (mapObj);

Produktion:

Indledende kort:
Kort (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Kort efter sletning af elementet med nøgle som 1966
Kort (1) { 1989 => 'Batman' }

5. Tjek, om et element findes på et kort

Du kan kontrollere, om et element findes i et kortobjekt ved hjælp af har() metode. Denne metode accepterer elementets nøgle som en parameter til at teste for tilstedeværelse i kortobjektet. Denne metode vender tilbage sand hvis nøglen findes. Ellers vender den tilbage falsk.

lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman vender tilbage'],
[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:

sand
falsk

Et element med nøgle 1966 findes i Map-objektet, så metoden returnerede sand. Men da der ikke er noget element med nøgle 1977 i kortobjektet returnerede metoden falsk fra det andet opkald.

Relaterede: Hvad er JavaScript, og hvordan virker det?

6. Adgang til værdien for en specifik nøgle

Det få() metode returnerer et specifikt element fra kortobjektet. Denne metode accepterer elementets nøgle som en parameter. Hvis nøglen findes i kortobjektet, returnerer metoden værdien af ​​elementet. Ellers vender den tilbage udefineret.

lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman vender tilbage'],
[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
udefineret

Et element med nøgle 1966 eksisterer i Map-objektet, så metoden returnerede værdien af ​​elementet. Der er intet element med nøgle 1988 i Map-objektet, så metoden returnerede udefineret.

7. Få adgang til et korts poster via en iterator

Ifølge embedsmanden MDN Web Docs:

Entries()-metoden returnerer et nyt Iterator-objekt, der indeholder [nøgle, værdi]-parrene for hvert element i Map-objektet i indsættelsesrækkefølge. I dette særlige tilfælde er dette iteratorobjekt også iterbart, så for-of-løkken kan bruges. Når protokollen [Symbol.iterator] bruges, returnerer den en funktion, der, når den aktiveres, returnerer denne iterator selv.

Du kan få adgang til hvert element på kortet ved hjælp af denne iterator og en for... af udmelding:

lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman vender tilbage'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
for (lad indtastning af mapObj.entries()) {
console.log (indgang);
}

Produktion:

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

Eller du kan bruge ES6-destruktionsfunktionen til at få adgang til hver nøgle og værdi:

lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman vender tilbage'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
for (lad [nøgle, værdi] af mapObj.entries()) {
console.log("Nøgle: " + tast + " Værdi: " + værdi);
}

Produktion:

Nøgle: 1966 Værdi: Batman: The Movie
Nøgle: 1989 Værdi: Batman
Nøgle: 1992 Værdi: Batman vender tilbage
Nøgle: 1995 Værdi: Batman Forever
Nøgle: 2005 Værdi: Batman Begins
Nøgle: 2008 Værdi: The Dark Knight
Nøgle: 2012 Værdi: The Dark Knight Rises

8. Sådan gentager du et korts værdier

Det værdier() metode returnerer en Iterator objekt, der indeholder alle værdierne i et kort, og det gør dette i indsættelsesrækkefølge.

lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman vender tilbage']
]);
const iteratorObj = mapObj.values();
for (lad værdien af ​​iteratorObj) {
console.log (værdi);
}

Produktion:

Batman: The Movie
Batman
Batman vender tilbage

9. Gentag over et korts nøgler

Det nøgler() metode returnerer en Iterator objekt, der indeholder alle nøglerne i et kort, og det gør dette i indsættelsesrækkefølge.

lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman vender tilbage']
]);
const iteratorObj = mapObj.keys();
for (lad nøglen til iteratorObj) {
console.log (nøgle);
}

Produktion:

1966
1989
1992

Relaterede: JavaScript-pilefunktioner kan gøre dig til en bedre udvikler

10. Gentag elementer i et kort ved hjælp af et tilbagekald

Det for hver() metode aktiverer en tilbagekaldsfunktion for hvert element i kortobjektet. Tilbagekaldsfunktionen tager to parametre: nøglen og værdien.

function printKeyValue (nøgle, værdi) {
console.log("Nøgle: " + tast + " Værdi: " + værdi);
}
lad mapObj = nyt kort([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman vender tilbage']
]);
mapObj.forEach (printKeyValue);

Produktion:

Nøgle: Batman: The Movie Værdi: 1966
Nøgle: Batman Værdi: 1989
Nøgle: Batman Returns Værdi: 1992

Nu ved du om Maps i JavaScript

Nu har du viden nok til at mestre konceptet Maps i JavaScript. Kortdatastrukturen er meget brugt i mange programmeringsopgaver. Når du har mestret det, kan du gå videre til andre native JavaScript-objekter som sæt, arrays og så videre.

15 JavaScript-array-metoder, du bør mestre i dag

Vil du forstå JavaScript-arrays, men kan du ikke få styr på dem? Tjek vores JavaScript-array-eksempler for vejledning.

Læs Næste

Om forfatteren