10 metoda JavaScript mapa koje biste trebali ovladati danas

JavaScript karta je zbirka koja pohranjuje svaki svoj element kao par ključ-vrijednost. Ovaj tip podataka se također naziva asocijativnim nizom ili rječnikom.

Možete koristiti bilo koju vrstu podataka (primitivne i objekte) kao ključ ili vrijednost. Objekt Map pamti izvorni redoslijed umetanja, iako ćete obično pristupati vrijednostima po njihovom ključu.

U ovom članku ćete naučiti o deset metoda JavaScript mapa koje biste trebali ovladati danas.

1. Kako stvoriti novu kartu u JavaScriptu

Možete stvoriti novi objekt karte koristeći Karta() konstruktor. Ovaj konstruktor prihvaća jedan parametar: iterativni objekt čiji su elementi parovi ključ/vrijednost.

neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vraća'],
[1995, 'Batman zauvijek'],
[2005., 'Batman počinje'],
[2008., 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj);

Izlaz:

Karta (7) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman se vraća',
1995 => 'Batman zauvijek',
2005 => 'Batman počinje',
2008 => 'Mračni vitez',
2012 => 'The Dark Knight Rises'
}

Ako ne unesete parametar, JavaScript će stvoriti novu praznu kartu.

neka mapObj = nova karta();
console.log (mapObj);

Izlaz:

Karta (0) {}

Ako pokušate stvoriti kartu s dupliciranim ključevima, svaki ponovljeni ključ će prepisati prethodnu vrijednost novom vrijednošću.

neka mapObj = nova karta([
['ključ1', 'vrijednost1'],
['ključ2', 'vrijednost2'],
['ključ2', 'novaVrijednost2']
]);
console.log (mapObj);

Izlaz:

Karta (2) {
'ključ1' => 'vrijednost1',
'ključ2' => 'novaVrijednost2'
}

Ovdje je vrijednost pohranjena u odnosu na ključ 2 ključ je novaVrijednost2, ne ranije vrijednost2.

Također možete stvoriti objekt karte koji sadrži parove ključ/vrijednost koristeći mješovite vrste podataka.

neka mapObj = nova karta([
["string1", 1],
[2, "string2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Izlaz:

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

2. Dodajte nove elemente objektu karte

Možete dodati novi element objektu Map koristeći set() metoda. Ova metoda prihvaća ključ i vrijednost, a zatim dodaje novi element objektu Map. Metoda zatim vraća novi objekt Map s dodanom vrijednošću. Ako ključ već postoji na karti, nova vrijednost će zamijeniti postojeću vrijednost.

neka mapObj = nova karta();
mapObj.set (1966, 'Batman: Film');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman se vraća');
mapObj.set (1995., 'Batman zauvijek');
console.log (mapObj);

Izlaz:

Karta (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman se vraća',
1995 => 'Batman zauvijek'
}

Također možete koristiti varijable ili konstante kao ključeve ili vrijednosti:

stalna godina1 = 1966;
const movieName1 = 'Batman: Film';
neka godina2 = 1989;
var movieName2 = 'Batman';
neka mapObj = nova karta();
mapObj.set (godina1, naziv filma1);
mapObj.set (godina2, naziv filma2);
console.log (mapObj);

Izlaz:

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

The set() metoda podržava ulančavanje.

neka mapObj = nova karta();
mapObj.set (1966, 'Batman: Film')
.set (1989, 'Batman')
.set (1992, 'Batman se vraća')
.set (1995, 'Batman zauvijek');
console.log (mapObj);

Izlaz:

Karta (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman se vraća',
1995 => 'Batman zauvijek'
}

3. Uklonite sve elemente iz objekta karte

Možete ukloniti sve elemente iz objekta karte pomoću čisto() metoda. Ova metoda se uvijek vraća nedefiniran.

neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman']
]);
console.log("Veličina objekta karte: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Veličina objekta karte nakon brisanja elemenata: " + mapObj.size);
console.log (mapObj);

Izlaz:

Veličina objekta karte: 2
Karta (2) { 1966 => 'Batman: Film', 1989 => 'Batman' }
Veličina objekta karte nakon brisanja elemenata: 0
Karta (0) {}

4. Izbrišite određeni element s karte

Možete ukloniti određeni element iz objekta karte pomoću izbrisati() metoda. Ova metoda prihvaća ključ elementa za brisanje s karte. Ako ključ postoji, metoda se vraća pravi. Inače se vraća lažno.

neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman']
]);
console.log("Inicijalna karta: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Karta nakon brisanja elementa koji ima ključ kao 1966");
console.log (mapObj);

Izlaz:

Početna karta:
Karta (2) { 1966 => 'Batman: Film', 1989 => 'Batman' }
Karta nakon brisanja elementa koji ima ključ kao 1966
Karta (1) { 1989 => 'Batman' }

5. Provjerite postoji li element na karti

Možete provjeriti postoji li element u objektu Map koristeći ima() metoda. Ova metoda prihvaća ključ elementa kao parametar za testiranje prisutnosti u objektu Map. Ova metoda se vraća pravi ako ključ postoji. Inače se vraća lažno.

neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vraća'],
[1995, 'Batman zauvijek'],
[2005., 'Batman počinje'],
[2008., 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Izlaz:

pravi
lažno

Element s ključem 1966 postoji u objektu Map, pa je metoda vraćena pravi. Ali, budući da nema elementa s ključem 1977 u objektu Map, metoda je vraćena lažno od drugog poziva.

Povezano: Što je JavaScript i kako radi?

6. Pristup vrijednosti za određeni ključ

The dobiti() metoda vraća određeni element iz objekta Map. Ova metoda prihvaća ključ elementa kao parametar. Ako ključ postoji u objektu Map, metoda vraća vrijednost elementa. Inače se vraća nedefiniran.

neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vraća'],
[1995, 'Batman zauvijek'],
[2005., 'Batman počinje'],
[2008., 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Izlaz:

Batman: Film
nedefiniran

Element s ključem 1966 postoji u objektu Map, pa je metoda vratila vrijednost elementa. Nema elementa s ključem 1988 u objektu Map, pa se metoda vratila nedefiniran.

7. Pristupite unosima karte putem iteratora

Prema službeniku MDN web dokumenti:

Metoda entries() vraća novi objekt Iterator koji sadrži parove [ključ, vrijednost] za svaki element u objektu Map u redoslijedu umetanja. U ovom konkretnom slučaju, ovaj objekt iteratora je također iterabilan, tako da se može koristiti for-of petlja. Kada se koristi protokol [Symbol.iterator], on vraća funkciju koja, kada se pozove, vraća sam ovaj iterator.

Možete pristupiti svakom elementu karte pomoću ovog iteratora i a za...od izjava:

neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vraća'],
[1995, 'Batman zauvijek'],
[2005., 'Batman počinje'],
[2008., 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
for (dopusti unos mapObj.entries()) {
console.log (unos);
}

Izlaz:

[1966., 'Batman: Film']
[ 1989, 'Batman' ]
[1992., 'Batman se vraća']
[1995., 'Batman zauvijek']
[ 2005., 'Batman počinje' ]
[ 2008., 'Mračni vitez' ]
[ 2012, 'The Dark Knight Rises' ]

Ili možete koristiti značajku dodjeljivanja uništavanja ES6 za pristup svakom ključu i vrijednosti:

neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vraća'],
[1995, 'Batman zauvijek'],
[2005., 'Batman počinje'],
[2008., 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
za (neka [ključ, vrijednost] mapObj.entries()) {
console.log("Ključ: " + ključ + " Vrijednost: " + vrijednost);
}

Izlaz:

Ključ: 1966. Vrijednost: Batman: Film
Ključ: 1989. Vrijednost: Batman
Ključ: 1992. Vrijednost: Batman se vraća
Ključ: 1995. Vrijednost: Batman zauvijek
Ključ: 2005. Vrijednost: Batman počinje
Ključ: 2008. Vrijednost: Mračni vitez
Ključ: 2012. Vrijednost: The Dark Knight Rises

8. Kako iterirati vrijednosti karte

The vrijednosti() metoda vraća an Iterator objekt koji sadrži sve vrijednosti u karti i to radi redoslijedom umetanja.

neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vraća']
]);
const iteratorObj = mapObj.values();
za (neka vrijednost iteratorObj) {
console.log (vrijednost);
}

Izlaz:

Batman: Film
Batman
Batman se vraća

9. Iterirajte preko tipki karte

The tipke() metoda vraća an Iterator objekt koji sadrži sve ključeve u karti i to čini redoslijedom umetanja.

neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vraća']
]);
const iteratorObj = mapObj.keys();
za (neka ključ iteratorObj) {
console.log (ključ);
}

Izlaz:

1966
1989
1992

Povezano: Funkcije sa strelicama JavaScript mogu vas učiniti boljim programerom

10. Iterirajte elemente na karti pomoću povratnog poziva

The za svakoga() metoda poziva funkciju povratnog poziva za svaki element Map objekta. Funkcija povratnog poziva uzima dva parametra: ključ i vrijednost.

funkcija printKeyValue (ključ, vrijednost) {
console.log("Ključ: " + ključ + " Vrijednost: " + vrijednost);
}
neka mapObj = nova karta([
[1966., 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman se vraća']
]);
mapObj.forEach (printKeyValue);

Izlaz:

Ključ: Batman: Vrijednost filma: 1966
Ključ: Batman Vrijednost: 1989
Ključ: Batman Povratna vrijednost: 1992

Sada znate o Kartama u JavaScriptu

Sada imate dovoljno znanja da savladate koncept karata u JavaScriptu. Struktura podataka karte naširoko se koristi u mnogim programskim zadacima. Nakon što ga svladate, možete prijeći na druge izvorne JavaScript objekte kao što su skupovi, nizovi i tako dalje.

15 metoda JavaScript polja koje biste trebali savladati danas

Želite razumjeti JavaScript nizove, ali ne možete se uhvatiti ukoštac s njima? Pogledajte naše primjere JavaScript polja za smjernice.

Pročitajte dalje

O autoru