10 „JavaScript“ žemėlapio metodų, kuriuos turėtumėte išmokti šiandien

„JavaScript“ žemėlapis yra rinkinys, kuriame kiekvienas jo elementas saugomas kaip rakto ir vertės pora. Šis duomenų tipas taip pat vadinamas asociatyviniu masyvu arba žodynu.

Kaip raktą arba reikšmę galite naudoti bet kokį duomenų tipą (primityvus ir objektus). Žemėlapio objektas atsimena pradinę įterpimo tvarką, nors paprastai reikšmes pasieksite pagal jų raktą.

Šiame straipsnyje sužinosite apie dešimt „JavaScript“ žemėlapio metodų, kuriuos turėtumėte išmokti šiandien.

1. Kaip sukurti naują žemėlapį „JavaScript“.

Galite sukurti naują žemėlapio objektą naudodami Žemėlapis () konstruktorius. Šis konstruktorius priima vieną parametrą: kartojamą objektą, kurio elementai yra raktų ir reikšmių poros.

tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“],
[1992, „Betmenas sugrįžta“],
[1995, „Betmenas amžinai“],
[2005, „Betmenas prasideda“],
[2008 m., „Tamsos riteris“],
[2012 m., „Tamsos riteris kyla“]
]);
console.log (mapObj);

Išvestis:

Žemėlapis (7) {
1966 => "Betmenas: filmas",





instagram viewer


1989 => "Betmenas",
1992 => „Betmenas sugrįžta“,
1995 => „Betmenas amžinai“,
2005 => „Betmenas prasideda“,
2008 => „Tamsos riteris“,
2012 => „Tamsos riteris prisikelia“
}

Jei nepateiksite parametro, „JavaScript“ sukurs naują tuščią žemėlapį.

tegul mapObj = naujas žemėlapis();
console.log (mapObj);

Išvestis:

Žemėlapis (0) {}

Jei bandysite sukurti žemėlapį su pasikartojančiais klavišais, kiekvienas kartojamas klavišas perrašys ankstesnę reikšmę nauja reikšme.

tegul mapObj = naujas žemėlapis([
['key1', 'value1'],
['key2', 'value2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Išvestis:

Žemėlapis (2) {
'key1' => 'value1',
'key2' => 'newValue2'
}

Čia vertė saugoma prieš raktas2 raktas yra newValue2, ne anksčiau vertė2.

Taip pat galite sukurti žemėlapio objektą, kuriame yra raktų ir reikšmių poros, naudodami mišrius duomenų tipus.

tegul mapObj = naujas žemėlapis([
["string1", 1],
[2, "string2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Išvestis:

Žemėlapis (4) {
'string1' => 1,
2 => 'string2',
'string3' => 433.234,
23.56 => 45
}

2. Pridėkite naujų elementų prie žemėlapio objekto

Galite pridėti naują elementą prie žemėlapio objekto naudodami rinkinys () metodas. Šis metodas priima raktą ir reikšmę, tada į žemėlapio objektą prideda naują elementą. Tada metodas grąžina naują žemėlapio objektą su pridėtine verte. Jei raktas jau yra žemėlapyje, nauja reikšmė pakeis esamą reikšmę.

tegul mapObj = naujas žemėlapis();
mapObj.set (1966 m., „Betmenas: filmas“);
mapObj.set (1989, „Betmenas“);
mapObj.set (1992, „Betmeno sugrįžimas“);
mapObj.set (1995, „Betmenas amžinai“);
console.log (mapObj);

Išvestis:

Žemėlapis (4) {
1966 => "Betmenas: filmas",
1989 => "Betmenas",
1992 => „Betmenas sugrįžta“,
1995 => „Betmenas amžinai“
}

Taip pat galite naudoti kintamuosius arba konstantas kaip raktus arba reikšmes:

const metai1 = 1966;
const movieName1 = 'Betmenas: filmas';
tegul metai2 = 1989;
var movieName2 = 'Betmenas';
tegul mapObj = naujas žemėlapis();
mapObj.set (year1, movieName1);
mapObj.set (2 metai, filmo pavadinimas2);
console.log (mapObj);

Išvestis:

Žemėlapis (2) {
1966 => "Betmenas: filmas",
1989 => "Betmenas"
}

The rinkinys () metodas palaiko grandinėjimą.

tegul mapObj = naujas žemėlapis();
mapObj.set (1966 m., „Betmenas: filmas“)
.set (1989 m., „Betmenas“)
.set (1992 m., „Betmeno sugrįžimas“)
.set (1995, „Betmenas amžinai“);
console.log (mapObj);

Išvestis:

Žemėlapis (4) {
1966 => "Betmenas: filmas",
1989 => "Betmenas",
1992 => „Betmenas sugrįžta“,
1995 => „Betmenas amžinai“
}

3. Pašalinkite visus elementus iš žemėlapio objekto

Galite pašalinti visus žemėlapio objekto elementus naudodami aišku () metodas. Šis metodas visada grįžta neapibrėžtas.

tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“]
]);
console.log("Žemėlapio objekto dydis: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Žemėlapio objekto dydis išvalius elementus: " + mapObj.size);
console.log (mapObj);

Išvestis:

Žemėlapio objekto dydis: 2
Žemėlapis (2) { 1966 => "Betmenas: filmas", 1989 => "Betmenas" }
Žemėlapio objekto dydis išvalius elementus: 0
Žemėlapis (0) {}

4. Ištrinkite konkretų elementą iš žemėlapio

Galite pašalinti konkretų elementą iš žemėlapio objekto naudodami Ištrinti() metodas. Šis metodas priima elemento raktą, kurį reikia ištrinti iš žemėlapio. Jei raktas yra, metodas grąžinamas tiesa. Priešingu atveju jis grįžta klaidinga.

tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“]
]);
console.log("Pradinis žemėlapis: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Žemėlapis ištrynus elementą, kurio raktas yra 1966");
console.log (mapObj);

Išvestis:

Pradinis žemėlapis:
Žemėlapis (2) { 1966 => "Betmenas: filmas", 1989 => "Betmenas" }
Žemėlapis ištrynus elementą, kurio raktas yra 1966 m
Žemėlapis (1) { 1989 => 'Betmenas' }

5. Patikrinkite, ar elementas yra žemėlapyje

Galite patikrinti, ar žemėlapio objekte yra elementas, naudodami turi () metodas. Šis metodas elemento raktą priima kaip parametrą, kuriuo tikrinamas buvimas žemėlapio objekte. Šis metodas grįžta tiesa jei raktas yra. Priešingu atveju jis grįžta klaidinga.

tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“],
[1992, „Betmenas sugrįžta“],
[1995, „Betmenas amžinai“],
[2005, „Betmenas prasideda“],
[2008 m., „Tamsos riteris“],
[2012 m., „Tamsos riteris kyla“]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Išvestis:

tiesa
klaidinga

Elementas su raktu 1966 Žemėlapio objekte egzistuoja, todėl metodas grąžintas tiesa. Bet kadangi nėra elemento su raktu 1977 Žemėlapio objekte metodas grąžintas klaidinga nuo antro skambučio.

Susijęs: Kas yra JavaScript ir kaip jis veikia?

6. Prieiga prie konkretaus rakto vertės

The gauti () metodas grąžina konkretų elementą iš žemėlapio objekto. Šis metodas priima elemento raktą kaip parametrą. Jei raktas yra žemėlapio objekte, metodas grąžina elemento reikšmę. Priešingu atveju jis grįžta neapibrėžtas.

tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“],
[1992, „Betmenas sugrįžta“],
[1995, „Betmenas amžinai“],
[2005, „Betmenas prasideda“],
[2008 m., „Tamsos riteris“],
[2012 m., „Tamsos riteris kyla“]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Išvestis:

Betmenas: filmas
neapibrėžtas

Elementas su raktu 1966 yra Žemėlapio objekte, todėl metodas grąžino elemento vertę. Nėra elemento su raktu 1988 Žemėlapio objekte, todėl metodas grįžo neapibrėžtas.

7. Pasiekite žemėlapio įrašus naudodami iteratorių

Pasak pareigūno MDN žiniatinklio dokumentai:

Metodas įrašai() grąžina naują Iteratoriaus objektą, kuriame yra [raktas, reikšmė] poros kiekvienam žemėlapio objekto elementui įterpimo tvarka. Šiuo konkrečiu atveju šis iteratoriaus objektas taip pat yra kartojamas, todėl galima naudoti for-of kilpą. Kai naudojamas protokolas [Symbol.iterator], jis grąžina funkciją, kuri iškvietus grąžina patį iteratorių.

Galite pasiekti kiekvieną žemėlapio elementą naudodami šį iteratorių ir a už...iš pareiškimas:

tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“],
[1992, „Betmenas sugrįžta“],
[1995, „Betmenas amžinai“],
[2005, „Betmenas prasideda“],
[2008 m., „Tamsos riteris“],
[2012 m., „Tamsos riteris kyla“]
]);
for (įveskite mapObj.entries()) {
console.log (įrašas);
}

Išvestis:

[1966 m., "Betmenas: filmas"]
[1989, „Betmenas“]
[1992, „Betmeno sugrįžimas“]
[1995, „Betmenas amžinai“]
[2005, „Betmenas prasideda“]
[2008 m., „Tamsos riteris“]
[2012 m., „Tamsos riteris prisikelia“]

Arba galite naudoti ES6 naikinimo priskyrimo funkciją, kad pasiektumėte kiekvieną raktą ir reikšmę:

tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“],
[1992, „Betmenas sugrįžta“],
[1995, „Betmenas amžinai“],
[2005, „Betmenas prasideda“],
[2008 m., „Tamsos riteris“],
[2012 m., „Tamsos riteris kyla“]
]);
for (tegul [key, value] of mapObj.entries()) {
console.log("Raktas: " + raktas + " Reikšmė: " + reikšmė);
}

Išvestis:

Raktas: 1966 vertė: Betmenas: filmas
Raktas: 1989 Vertė: Betmenas
Raktas: 1992 m. Vertė: Betmeno sugrįžimas
Raktas: 1995 m. Vertė: Betmenas amžinai
Raktas: 2005 Vertė: Betmenas prasideda
Raktas: 2008 Vertė: Tamsos riteris
Key: 2012 Value: The Dark Knight Rises

8. Kaip kartoti žemėlapio vertes

The reikšmės () metodas grąžina an Iteratorius objektas, kuriame yra visos žemėlapio reikšmės, ir tai daro įterpimo tvarka.

tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“],
[1992 m., „Betmeno sugrįžimas“]
]);
const iteratorObj = mapObj.values();
for (tegul iteratorObj vertė) {
console.log (vertė);
}

Išvestis:

Betmenas: filmas
Betmenas
Betmeno sugrįžimas

9. Kartokite per žemėlapio klavišus

The raktai() metodas grąžina an Iteratorius objektas, kuriame yra visi žemėlapio raktai, ir tai daro įterpimo tvarka.

tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“],
[1992 m., „Betmeno sugrįžimas“]
]);
const iteratorObj = mapObj.keys();
for (leisk iteratorObj klavišą) {
console.log (raktas);
}

Išvestis:

1966
1989
1992

Susijęs: „JavaScript“ rodyklės funkcijos gali padaryti jus geresniu kūrėju

10. Pakartokite žemėlapio elementus naudodami atgalinį skambutį

The kiekvienam() metodas iškviečia atšaukimo funkciją kiekvienam žemėlapio objekto elementui. Atgalinio skambinimo funkcija turi du parametrus: raktą ir reikšmę.

function printKeyValue (raktas, reikšmė) {
console.log("Raktas: " + raktas + " Reikšmė: " + reikšmė);
}
tegul mapObj = naujas žemėlapis([
[1966 m., „Betmenas: filmas“],
[1989 m., „Betmenas“],
[1992 m., „Betmeno sugrįžimas“]
]);
mapObj.forEach (printKeyValue);

Išvestis:

Raktas: Betmenas: filmo vertė: 1966 m
Raktas: Betmenas Vertė: 1989 m
Raktas: Betmeno grąžinimas Vertė: 1992 m

Dabar jūs žinote apie „JavaScript“ žemėlapius

Dabar turite pakankamai žinių, kad įsisavintumėte „JavaScript“ žemėlapių koncepciją. Žemėlapio duomenų struktūra plačiai naudojama daugelyje programavimo užduočių. Įvaldę jį, galite pereiti prie kitų vietinių „JavaScript“ objektų, pvz., rinkinių, masyvų ir pan.

15 „JavaScript“ masyvo metodų, kuriuos turėtumėte išmokti šiandien

Norite suprasti „JavaScript“ masyvus, bet negalite su jais susitvarkyti? Peržiūrėkite „JavaScript“ masyvo pavyzdžius.

Skaitykite toliau

Apie autorių