10 JavaScript kartes metodes, kuras jums vajadzētu apgūt jau šodien

JavaScript karte ir kolekcija, kurā katrs tās elements tiek saglabāts kā atslēgas-vērtības pāris. Šo datu tipu dēvē arī par asociatīvo masīvu vai vārdnīcu.

Kā atslēgu vai vērtību varat izmantot jebkuru datu tipu (primitīvus un objektus). Kartes objekts atceras sākotnējo ievietošanas secību, lai gan parasti vērtībām piekļūstat, izmantojot to atslēgu.

Šajā rakstā jūs uzzināsit par desmit JavaScript kartes metodēm, kuras jums vajadzētu apgūt jau šodien.

1. Kā izveidot jaunu karti JavaScript

Varat izveidot jaunu kartes objektu, izmantojot Karte () konstruktors. Šis konstruktors pieņem vienu parametru: iterējamu objektu, kura elementi ir atslēgu un vērtību pāri.

let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"],
[1992, "Betmens atgriežas"],
[1995, "Betmens uz visiem laikiem"],
[2005, "Betmens sāk"],
[2008, "Tumšais bruņinieks"],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj);

Izvade:

Karte (7) {
1966 => 'Betmens: filma',
1989 => 'Betmens',
1992 => 'Betmens atgriežas',
1995 => 'Betmens uz visiem laikiem',





instagram viewer


2005 => 'Betmens sākas',
2008 => "Tumšais bruņinieks",
2012 => "Tumšais bruņinieks pieaug"
}

Ja nenorādīsit parametru, JavaScript izveidos jaunu tukšu karti.

let mapObj = new Map();
console.log (mapObj);

Izvade:

Karte (0) {}

Ja mēģināt izveidot karti ar dublētiem taustiņiem, katra atkārtotā atslēga pārrakstīs iepriekšējo vērtību ar jauno vērtību.

let mapObj = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Izvade:

Karte (2) {
'key1' => 'vērtība1',
'key2' => 'newValue2'
}

Šeit vērtība tiek glabāta pret atslēga2 atslēga ir newValue2, nevis agrāk vērtība2.

Varat arī izveidot kartes objektu, kurā ir atslēgu un vērtību pāri, izmantojot jauktus datu tipus.

let mapObj = new Map([
["string1", 1],
[2, "virkne2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Izvade:

Karte (4) {
'string1' => 1,
2 => 'virkne2',
'string3' => 433,234,
23.56 => 45
}

2. Pievienojiet jaunus elementus kartes objektam

Kartes objektam var pievienot jaunu elementu, izmantojot set() metodi. Šī metode pieņem atslēgu un vērtību, pēc tam pievieno jaunu elementu kartes objektam. Pēc tam metode atgriež jauno kartes objektu ar pievienoto vērtību. Ja atslēga jau pastāv kartē, jaunā vērtība aizstās esošo vērtību.

let mapObj = new Map();
mapObj.set (1966, "Betmens: filma");
mapObj.set (1989, "Betmens");
mapObj.set (1992, "Betmens atgriežas");
mapObj.set (1995, "Batman Forever");
console.log (mapObj);

Izvade:

Karte (4) {
1966 => 'Betmens: filma',
1989 => 'Betmens',
1992 => 'Betmens atgriežas',
1995 => 'Betmens uz visiem laikiem'
}

Varat arī izmantot mainīgos vai konstantes kā atslēgas vai vērtības:

const year1 = 1966;
const movieName1 = 'Betmens: filma';
lai gads2 = 1989;
var movieName2 = 'Betmens';
let mapObj = new Map();
mapObj.set (year1, movieName1);
mapObj.set (year2, movieName2);
console.log (mapObj);

Izvade:

Karte (2) {
1966 => 'Betmens: filma',
1989 => "Betmens"
}

The set() metode atbalsta ķēdi.

let mapObj = new Map();
mapObj.set (1966, "Betmens: filma")
.set (1989, "Betmens")
.set (1992, "Betmens atgriežas")
.set (1995, "Batman Forever");
console.log (mapObj);

Izvade:

Karte (4) {
1966 => 'Betmens: filma',
1989 => 'Betmens',
1992 => 'Betmens atgriežas',
1995 => 'Betmens uz visiem laikiem'
}

3. Noņemiet visus elementus no kartes objekta

Varat noņemt visus elementus no kartes objekta, izmantojot skaidrs () metodi. Šī metode vienmēr atgriežas nenoteikts.

let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"]
]);
console.log("Kartes objekta izmērs: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Kartes objekta izmērs pēc elementu dzēšanas: " + mapObj.size);
console.log (mapObj);

Izvade:

Kartes objekta izmērs: 2
Karte (2) { 1966 => 'Betmens: filma', 1989 => 'Betmens' }
Kartes objekta izmērs pēc elementu dzēšanas: 0
Karte (0) {}

4. Konkrēta elementa dzēšana no kartes

Varat noņemt noteiktu elementu no kartes objekta, izmantojot dzēst() metodi. Šī metode akceptē elementa atslēgu, ko dzēst no kartes. Ja atslēga pastāv, metode atgriežas taisnība. Pretējā gadījumā tas atgriežas viltus.

let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"]
]);
console.log("Sākotnējā karte: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Karte pēc elementa dzēšanas, kura atslēga ir 1966");
console.log (mapObj);

Izvade:

Sākotnējā karte:
Karte (2) { 1966 => 'Betmens: filma', 1989 => 'Betmens' }
Karte pēc elementa, kura atslēga ir 1966, dzēšanas
Karte (1) { 1989 => 'Betmens'}

5. Pārbaudiet, vai kartē nepastāv elements

Varat pārbaudīt, vai kartes objektā eksistē elements, izmantojot ir () metodi. Šī metode pieņem elementa atslēgu kā parametru, lai pārbaudītu klātbūtni kartes objektā. Šī metode atgriežas taisnība ja atslēga pastāv. Pretējā gadījumā tas atgriežas viltus.

let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"],
[1992, "Betmens atgriežas"],
[1995, "Betmens uz visiem laikiem"],
[2005, "Betmens sāk"],
[2008, "Tumšais bruņinieks"],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Izvade:

taisnība
viltus

Elements ar atslēgu 1966 eksistē Kartes objektā, tāpēc tika atgriezta metode taisnība. Bet, tā kā nav elementa ar atslēgu 1977 Kartes objektā metode atgriezās viltus no otrā zvana.

Saistīts: Kas ir JavaScript un kā tas darbojas?

6. Piekļuve noteiktas atslēgas vērtībai

The gūt() metode atgriež noteiktu elementu no kartes objekta. Šī metode kā parametru pieņem elementa atslēgu. Ja atslēga pastāv objektā Map, metode atgriež elementa vērtību. Pretējā gadījumā tas atgriežas nenoteikts.

let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"],
[1992, "Betmens atgriežas"],
[1995, "Betmens uz visiem laikiem"],
[2005, "Betmens sāk"],
[2008, "Tumšais bruņinieks"],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Izvade:

Betmens: filma
nenoteikts

Elements ar atslēgu 1966 eksistē Kartes objektā, tāpēc metode atgrieza elementa vērtību. Nav neviena elementa ar atslēgu 1988 Kartes objektā, tāpēc metode atgriezās nenoteikts.

7. Piekļūstiet kartes ierakstiem, izmantojot iteratoru

Pēc amatpersonas teiktā MDN tīmekļa dokumenti:

Metode entries() atgriež jaunu iteratora objektu, kas satur [atslēga, vērtība] pārus katram Kartes objekta elementam ievietošanas secībā. Šajā konkrētajā gadījumā arī šis iteratora objekts ir iterējams, tāpēc var izmantot for-of cilpu. Kad tiek izmantots protokols [Symbol.iterator], tas atgriež funkciju, kas, izsaucot, atgriež pašu iteratoru.

Varat piekļūt katram kartes elementam, izmantojot šo iteratoru un a par...no paziņojums, apgalvojums:

let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"],
[1992, "Betmens atgriežas"],
[1995, "Betmens uz visiem laikiem"],
[2005, "Betmens sāk"],
[2008, "Tumšais bruņinieks"],
[2012, "The Dark Knight Rises"]
]);
for (atļaut mapObj.entries() ievadi) {
console.log (ieraksts);
}

Izvade:

[1966, "Betmens: filma"]
[1989, "Betmens"]
[1992, "Betmens atgriežas"]
[1995, "Betmens uz visiem laikiem"]
[2005, "Betmens sākas"]
[2008, "Tumšais bruņinieks"]
[2012, "Tumšais bruņinieks pieaug"]

Vai arī varat izmantot ES6 iznīcināšanas piešķiršanas līdzekli, lai piekļūtu katrai atslēgai un vērtībai:

let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"],
[1992, "Betmens atgriežas"],
[1995, "Betmens uz visiem laikiem"],
[2005, "Betmens sāk"],
[2008, "Tumšais bruņinieks"],
[2012, "The Dark Knight Rises"]
]);
for (atļaujiet [atslēga, vērtība] mapObj.entries()) {
console.log("Atslēga: " + taustiņš + " Vērtība: " + vērtība);
}

Izvade:

Atslēga: 1966 Vērtība: Betmens: Filma
Atslēga: 1989 Vērtība: Betmens
Atslēga: 1992 Vērtība: Betmens atgriežas
Atslēga: 1995 Vērtība: Betmens uz visiem laikiem
Atslēga: 2005 Vērtība: Betmens sāk
Atslēga: 2008 Vērtība: Dark Knight
Key: 2012 Value: The Dark Knight Rises

8. Kā atkārtot kartes vērtības

The vērtības () metode atgriež an Iterators objektu, kurā ir visas kartes vērtības, un tas to dara ievietošanas secībā.

let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"],
[1992, "Betmens atgriežas"]
]);
const iteratorObj = mapObj.values();
for (atļaut iteratorObj vērtību) {
console.log (vērtība);
}

Izvade:

Betmens: filma
sikspārņacilvēks
Betmens atgriežas

9. Atkārtojiet, izmantojot kartes taustiņus

The atslēgas () metode atgriež an Iterators objektu, kurā ir visas kartes atslēgas, un tas to dara ievietošanas secībā.

let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"],
[1992, "Betmens atgriežas"]
]);
const iteratorObj = mapObj.keys();
for (atlaidiet iteratorObj taustiņu) {
console.log (atslēga);
}

Izvade:

1966
1989
1992

Saistīts: JavaScript bultiņu funkcijas var padarīt jūs par labāku izstrādātāju

10. Atkārtojiet elementus kartē, izmantojot atzvanīšanu

The katram() metode izsauc atzvanīšanas funkciju katram Kartes objekta elementam. Atzvanīšanas funkcijai ir divi parametri: atslēga un vērtība.

function printKeyValue (atslēga, vērtība) {
console.log("Atslēga: " + taustiņš + " Vērtība: " + vērtība);
}
let mapObj = new Map([
[1966, "Betmens: filma"],
[1989, "Betmens"],
[1992, "Betmens atgriežas"]
]);
mapObj.forEach (printKeyValue);

Izvade:

Atslēga: Betmens: filmas vērtība: 1966
Atslēga: Betmens Vērtība: 1989. gads
Atslēga: Batman Returns Vērtība: 1992. gads

Tagad jūs zināt par kartēm JavaScript

Tagad jums ir pietiekami daudz zināšanu, lai apgūtu Maps jēdzienu JavaScript. Kartes datu struktūra tiek plaši izmantota daudzos programmēšanas uzdevumos. Kad esat to apguvis, varat pāriet uz citiem vietējiem JavaScript objektiem, piemēram, komplektiem, masīviem un tā tālāk.

15 JavaScript masīva metodes, kuras jums vajadzētu apgūt jau šodien

Vai vēlaties izprast JavaScript masīvus, bet nevarat ar tiem tikt galā? Lai iegūtu norādījumus, skatiet mūsu JavaScript masīvu piemērus.

Lasiet Tālāk

Par autoru