10 metod zemljevidov JavaScript, ki jih morate obvladati danes

Zemljevid JavaScript je zbirka, ki shranjuje vsak svoj element kot par ključ/vrednost. Ta tip podatkov se imenuje tudi asociativna matrika ali slovar.

Uporabite lahko kateri koli tip podatkov (primitivne in objekte) kot ključ ali vrednost. Objekt Zemljevid si zapomni prvotni vrstni red vstavljanja, čeprav boste običajno dostopali do vrednosti po njihovem ključu.

V tem članku boste izvedeli deset metod zemljevida JavaScript, ki bi jih morali obvladati danes.

1. Kako ustvariti nov zemljevid v JavaScriptu

Nov predmet Zemljevid lahko ustvarite z uporabo Zemljevid() konstruktor. Ta konstruktor sprejme en parameter: iterable objekt, katerega elementi so pari ključ/vrednost.

naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vrne'],
[1995, 'Batman za vedno'],
[2005, 'Batman se začne'],
[2008, 'Temni vitez'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj);

Izhod:

Zemljevid (7) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman se vrne',
1995 => 'Batman za vedno',
2005 => 'Batman se začne',
2008 => 'Temni vitez',
2012 => 'Temni vitez se vzpenja'
}

Če parametra ne vnesete, bo JavaScript ustvaril nov prazen zemljevid.

naj mapObj = nova mapa();
console.log (mapObj);

Izhod:

Zemljevid (0) {}

Če poskusite ustvariti zemljevid s podvojenimi ključi, bo vsak ponovljeni ključ prepisal prejšnjo vrednost z novo vrednostjo.

naj mapObj = nov zemljevid([
['ključ1', 'vrednost1'],
['ključ2', 'vrednost2'],
['ključ2', 'novaVrednost2']
]);
console.log (mapObj);

Izhod:

Zemljevid (2) {
'ključ1' => 'vrednost1',
'key2' => 'novaValue2'
}

Tukaj je vrednost, shranjena proti ključ 2 ključ je novaVrednost2, ne prej vrednost2.

Ustvarite lahko tudi objekt Zemljevid, ki vsebuje pare ključ/vrednost z uporabo mešanih podatkovnih tipov.

naj mapObj = nov zemljevid([
["niz1", 1],
[2, "string2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Izhod:

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

2. Dodajte nove elemente objektu zemljevida

Predmetu Zemljevid lahko dodate nov element z uporabo set() metoda. Ta metoda sprejme ključ in vrednost, nato pa objektu Zemljevid doda nov element. Metoda nato vrne nov objekt Zemljevid z dodano vrednostjo. Če ključ že obstaja na zemljevidu, bo nova vrednost nadomestila obstoječo vrednost.

naj mapObj = nova mapa();
mapObj.set (1966, 'Batman: Film');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman se vrne');
mapObj.set (1995, 'Batman za vedno');
console.log (mapObj);

Izhod:

Zemljevid (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman se vrne',
1995 => 'Batman za vedno'
}

Kot ključe ali vrednosti lahko uporabite tudi spremenljivke ali konstante:

stalno leto1 = 1966;
const movieName1 = 'Batman: Film';
naj leto2 = 1989;
var movieName2 = 'Batman';
naj mapObj = nova mapa();
mapObj.set (leto1, ime filma1);
mapObj.set (leto2, ime filma2);
console.log (mapObj);

Izhod:

Zemljevid (2) {
1966 => 'Batman: Film',
1989 => 'Batman'
}

The set() metoda podpira veriženje.

naj mapObj = nova mapa();
mapObj.set (1966, 'Batman: Film')
.set (1989, 'Batman')
.set (1992, 'Batman se vrne')
.set (1995, 'Batman za vedno');
console.log (mapObj);

Izhod:

Zemljevid (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman se vrne',
1995 => 'Batman za vedno'
}

3. Odstranite vse elemente iz predmeta zemljevida

Vse elemente lahko odstranite iz predmeta Zemljevid z uporabo jasno () metoda. Ta metoda se vedno vrne nedoločeno.

naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman']
]);
console.log("Velikost predmeta Zemljevid: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Velikost predmeta Zemljevid po izbrisu elementov: " + mapObj.size);
console.log (mapObj);

Izhod:

Velikost predmeta Zemljevid: 2
Zemljevid (2) { 1966 => 'Batman: Film', 1989 => 'Batman' }
Velikost predmeta Zemljevid po čiščenju elementov: 0
Zemljevid (0) {}

4. Izbrišite določen element z zemljevida

Določen element lahko odstranite iz predmeta Zemljevid z uporabo izbriši() metoda. Ta metoda sprejme ključ elementa, ki ga želite izbrisati z zemljevida. Če ključ obstaja, se metoda vrne prav. V nasprotnem primeru se vrne napačno.

naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman']
]);
console.log("Začetni zemljevid: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Zemljevid po brisanju elementa s ključem 1966");
console.log (mapObj);

Izhod:

Začetni zemljevid:
Zemljevid (2) { 1966 => 'Batman: Film', 1989 => 'Batman' }
Zemljevid po brisanju elementa s ključem 1966
Zemljevid (1) { 1989 => 'Batman' }

5. Preverite, ali element obstaja na zemljevidu

Lahko preverite, ali element obstaja v objektu Zemljevid z uporabo ima () metoda. Ta metoda sprejme ključ elementa kot parameter za preverjanje prisotnosti v objektu Zemljevid. Ta metoda se vrne prav če ključ obstaja. V nasprotnem primeru se vrne napačno.

naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vrne'],
[1995, 'Batman za vedno'],
[2005, 'Batman se začne'],
[2008, 'Temni vitez'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Izhod:

prav
napačno

Element s ključem 1966 obstaja v objektu Zemljevid, zato se je metoda vrnila prav. Ampak, ker ni elementa s ključem 1977 v objektu Zemljevid se je metoda vrnila napačno od drugega klica.

Povezano: Kaj je JavaScript in kako deluje?

6. Dostop do vrednosti za določen ključ

The get() metoda vrne določen element iz predmeta Zemljevid. Ta metoda sprejme ključ elementa kot parameter. Če ključ obstaja v objektu Zemljevid, metoda vrne vrednost elementa. V nasprotnem primeru se vrne nedoločeno.

naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vrne'],
[1995, 'Batman za vedno'],
[2005, 'Batman se začne'],
[2008, 'Temni vitez'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Izhod:

Batman: Film
nedoločeno

Element s ključem 1966 obstaja v objektu Zemljevid, zato je metoda vrnila vrednost elementa. Ni elementa s ključem 1988 v objektu Zemljevid, zato se je metoda vrnila nedoločeno.

7. Dostopajte do vnosov zemljevida prek iteratorja

Po uradnem mnenju Spletni dokumenti MDN:

Metoda entries() vrne nov predmet Iterator, ki vsebuje pare [ključ, vrednost] za vsak element v objektu Zemljevid v vrstnem redu vstavljanja. V tem posebnem primeru je ta objekt iteratorja tudi iterativen, tako da je mogoče uporabiti zanko for-of. Ko se uporabi protokol [Symbol.iterator], vrne funkcijo, ki ob priklicu vrne ta iterator sam.

Do vsakega elementa zemljevida lahko dostopate s tem iteratorjem in a za...od izjava:

naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vrne'],
[1995, 'Batman za vedno'],
[2005, 'Batman se začne'],
[2008, 'Temni vitez'],
[2012, 'The Dark Knight Rises']
]);
za (naj vnos mapObj.entries()) {
console.log (vnos);
}

Izhod:

[1966, 'Batman: Film']
[ 1989, 'Batman' ]
[1992, 'Batman se vrne']
[ 1995, 'Batman za vedno' ]
[2005, 'Batman se začne']
[2008, 'Temni vitez']
[2012, 'The Dark Knight Rises']

Lahko pa uporabite funkcijo dodeljevanja uničenja ES6 za dostop do vsakega ključa in vrednosti:

naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vrne'],
[1995, 'Batman za vedno'],
[2005, 'Batman se začne'],
[2008, 'Temni vitez'],
[2012, 'The Dark Knight Rises']
]);
za (naj [ključ, vrednost] mapObj.entries()) {
console.log("Ključ: " + ključ + " Vrednost: " + vrednost);
}

Izhod:

Ključ: 1966 Vrednost: Batman: Film
Ključ: 1989 Vrednost: Batman
Ključ: 1992 Vrednost: Batman se vrača
Ključ: 1995 Vrednost: Batman za vedno
Ključ: 2005 Vrednost: Batman Begins
Ključ: 2008 Vrednost: Temni vitez
Ključ: 2012 Vrednost: The Dark Knight Rises

8. Kako prebirati vrednosti zemljevida

The vrednote() metoda vrne an Iterator predmet, ki vsebuje vse vrednosti v zemljevidu, in to naredi v vrstnem redu vstavljanja.

naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vrne']
]);
const iteratorObj = mapObj.values();
za (naj vrednost iteratorObj) {
console.log (vrednost);
}

Izhod:

Batman: Film
Batman
Batman se vrača

9. Iterirajte po tipkah zemljevida

The tipke() metoda vrne an Iterator predmet, ki vsebuje vse ključe v zemljevidu, in to naredi v vrstnem redu vstavljanja.

naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vrne']
]);
const iteratorObj = mapObj.keys();
za (pustite ključ iteratorObj) {
console.log (ključ);
}

Izhod:

1966
1989
1992

Povezano: Puščične funkcije JavaScript vas lahko naredijo boljšega razvijalca

10. Iterirajte elemente na zemljevidu z uporabo povratnega klica

The za vsakogar() metoda pokliče funkcijo povratnega klica za vsak element predmeta Zemljevid. Funkcija povratnega klica ima dva parametra: ključ in vrednost.

funkcija printKeyValue (ključ, vrednost) {
console.log("Ključ: " + ključ + " Vrednost: " + vrednost);
}
naj mapObj = nov zemljevid([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vrne']
]);
mapObj.forEach (printKeyValue);

Izhod:

Ključ: Batman: Vrednost filma: 1966
Ključ: Batmanova vrednost: 1989
Ključ: Batman Povratna vrednost: 1992

Zdaj veste o zemljevidih ​​v JavaScriptu

Zdaj imate dovolj znanja, da obvladate koncept zemljevidov v JavaScriptu. Struktura podatkov zemljevida se pogosto uporablja pri številnih programskih nalogah. Ko ga obvladate, se lahko premaknete na druge izvorne predmete JavaScript, kot so nizi, nizi itd.

15 metod matrike JavaScript, ki bi jih morali obvladati danes

Želite razumeti polja JavaScript, vendar se jih ne morete spopasti? Za napotke si oglejte naše primere nizov JavaScript.

Preberite Naprej

O avtorju