10 JavaScript-kartmetoder du bør mestre i dag

Et JavaScript-kart er en samling som lagrer hvert av elementene som et nøkkelverdi-par. Denne datatypen blir også referert til som en assosiativ matrise eller en ordbok.

Du kan bruke hvilken som helst datatype (primitiver og objekter) som enten en nøkkel eller en verdi. Kartobjektet husker den opprinnelige innsettingsrekkefølgen, selv om du vanligvis får tilgang til verdier med nøkkelen deres.

I denne artikkelen lærer du om ti JavaScript-kartmetoder du bør mestre i dag.

1. Hvordan lage et nytt kart i JavaScript

Du kan opprette et nytt kartobjekt ved å bruke Kart() konstruktør. Denne konstruktøren godtar én parameter: et gjentakbart objekt hvis elementer er nøkkelverdi-par.

la mapObj = nytt kart([
[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);

Produksjon:

Kart (7) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman vender tilbake',





instagram viewer


1995 => 'Batman Forever',
2005 => 'Batman begynner',
2008 => 'The Dark Knight',
2012 => 'The Dark Knight Rises'
}

Hvis du ikke oppgir parameteren, vil JavaScript opprette et nytt tomt kart.

la mapObj = nytt kart();
console.log (mapObj);

Produksjon:

Kart (0) {}

Hvis du prøver å lage et kart med dupliserte nøkler, vil hver gjentatt nøkkel overskrive den forrige verdien med den nye verdien.

la mapObj = nytt kart([
['nøkkel1', 'verdi1'],
['nøkkel2', 'verdi2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Produksjon:

Kart (2) {
'key1' => 'verdi1',
'key2' => 'newValue2'
}

Her er verdien lagret mot nøkkel 2 nøkkelen er nyverdi2, ikke jo tidligere verdi2.

Du kan også opprette et kartobjekt som inneholder nøkkelverdi-par ved å bruke blandede datatyper.

la mapObj = nytt kart([
["streng1", 1],
[2, "streng2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Produksjon:

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

2. Legg til nye elementer til et kartobjekt

Du kan legge til et nytt element til kartobjektet ved å bruke sett() metode. Denne metoden godtar en nøkkel og en verdi, og legger deretter til et nytt element til kartobjektet. Metoden returnerer så det nye kartobjektet med tilleggsverdien. Hvis nøkkelen allerede finnes i kartet, vil den nye verdien erstatte den eksisterende verdien.

la mapObj = nytt kart();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Returns');
mapObj.set (1995, 'Batman Forever');
console.log (mapObj);

Produksjon:

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

Du kan også bruke variabler eller konstanter som nøkler eller verdier:

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

Produksjon:

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

De sett() metoden støtter kjetting.

la mapObj = nytt kart();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, 'Batman Returns')
.set (1995, 'Batman Forever');
console.log (mapObj);

Produksjon:

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

3. Fjern alle elementer fra et kartobjekt

Du kan fjerne alle elementer fra et kartobjekt ved å bruke klar() metode. Denne metoden kommer alltid tilbake udefinert.

la mapObj = nytt kart([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Størrelse på kartobjektet: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Størrelse på kartobjektet etter fjerning av elementer: " + mapObj.size);
console.log (mapObj);

Produksjon:

Størrelse på kartobjektet: 2
Kart (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Størrelse på kartobjektet etter fjerning av elementer: 0
Kart (0) {}

4. Slett et spesifikt element fra et kart

Du kan fjerne et spesifikt element fra et kartobjekt ved å bruke slett() metode. Denne metoden godtar nøkkelen til elementet som skal slettes fra kartet. Hvis nøkkelen finnes, returnerer metoden ekte. Ellers kommer den tilbake falsk.

la mapObj = nytt kart([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Innledende kart: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Kart etter sletting av elementet med nøkkel som 1966");
console.log (mapObj);

Produksjon:

Opprinnelig kart:
Kart (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Kart etter sletting av elementet med nøkkel som 1966
Kart (1) { 1989 => 'Batman' }

5. Sjekk om et element finnes i et kart

Du kan sjekke om et element finnes i et kartobjekt ved å bruke har() metode. Denne metoden aksepterer nøkkelen til elementet som en parameter for å teste for tilstedeværelse i kartobjektet. Denne metoden kommer tilbake ekte hvis nøkkelen finnes. Ellers kommer den tilbake falsk.

la mapObj = nytt kart([
[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));

Produksjon:

ekte
falsk

Et element med nøkkel 1966 finnes i kartobjektet, så metoden returnerte ekte. Men siden det ikke er noe element med nøkkel 1977 i kartobjektet returnerte metoden falsk fra den andre samtalen.

I slekt: Hva er JavaScript og hvordan fungerer det?

6. Få tilgang til verdien for en spesifikk nøkkel

De få() metoden returnerer et spesifikt element fra kartobjektet. Denne metoden aksepterer nøkkelen til elementet som en parameter. Hvis nøkkelen finnes i kartobjektet, returnerer metoden verdien til elementet. Ellers kommer den tilbake udefinert.

la mapObj = nytt kart([
[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));

Produksjon:

Batman: The Movie
udefinert

Et element med nøkkel 1966 eksisterer i kartobjektet, så metoden returnerte verdien til elementet. Det er ikke noe element med nøkkel 1988 i kartobjektet, så metoden returnerte udefinert.

7. Få tilgang til et karts oppføringer via en iterator

Ifølge tjenestemannen MDN Web Docs:

Entries()-metoden returnerer et nytt Iterator-objekt som inneholder [nøkkel, verdi]-parene for hvert element i kartobjektet i innsettingsrekkefølge. I dette spesielle tilfellet er dette iteratorobjektet også itererbart, så for-of-løkken kan brukes. Når protokollen [Symbol.iterator] brukes, returnerer den en funksjon som, når den startes, returnerer denne iteratoren selv.

Du kan få tilgang til hvert element på kartet ved å bruke denne iteratoren og en for... av uttalelse:

la mapObj = nytt kart([
[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 (la oppføring av mapObj.entries()) {
console.log (oppføring);
}

Produksjon:

[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 du kan bruke ES6-destruksjonstildelingsfunksjonen for å få tilgang til hver nøkkel og verdi:

la mapObj = nytt kart([
[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 (la [nøkkel, verdi] av mapObj.entries()) {
console.log("Nøkkel: " + tast + " Verdi: " + verdi);
}

Produksjon:

Nøkkel: 1966 Verdi: Batman: The Movie
Nøkkel: 1989 Verdi: Batman
Nøkkel: 1992 Verdi: Batman vender tilbake
Nøkkel: 1995 Verdi: Batman Forever
Nøkkel: 2005 Verdi: Batman Begins
Nøkkel: 2008 Verdi: The Dark Knight
Nøkkel: 2012 Verdi: The Dark Knight Rises

8. Hvordan gjenta verdiene på et kart

De verdier() metoden returnerer en Iterator objekt som inneholder alle verdiene i et kart, og det gjør dette i innsettingsrekkefølge.

la mapObj = nytt kart([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.values();
for (la verdien av iteratorObj) {
console.log (verdi);
}

Produksjon:

Batman: The Movie
Batman
Batman vender tilbake

9. Iterer over et karts nøkler

De nøkler() metoden returnerer en Iterator objekt som inneholder alle nøklene i et kart, og det gjør dette i innsettingsrekkefølge.

la mapObj = nytt kart([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.keys();
for (la nøkkelen til iteratorObj) {
console.log (nøkkel);
}

Produksjon:

1966
1989
1992

I slekt: JavaScript-pilfunksjoner kan gjøre deg til en bedre utvikler

10. Iterer over elementer i et kart ved å bruke en tilbakeringing

De for hver() metoden påkaller en tilbakeringingsfunksjon for hvert element i kartobjektet. Tilbakeringingsfunksjonen tar to parametere: nøkkelen og verdien.

funksjon printKeyValue (nøkkel, verdi) {
console.log("Nøkkel: " + tast + " Verdi: " + verdi);
}
la mapObj = nytt kart([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
mapObj.forEach (printKeyValue);

Produksjon:

Nøkkel: Batman: The Movie Verdi: 1966
Nøkkel: Batman Verdi: 1989
Nøkkel: Batman Returns Verdi: 1992

Nå vet du om kart i JavaScript

Nå har du nok kunnskap til å mestre konseptet med kart i JavaScript. Kartdatastrukturen er mye brukt i mange programmeringsoppgaver. Når du har mestret det, kan du gå videre til andre innebygde JavaScript-objekter som sett, matriser og så videre.

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

Vil du forstå JavaScript-matriser, men kan ikke få tak i dem? Se våre JavaScript-eksempler for veiledning.

Les Neste

Om forfatteren