10 JavaScripti kaardimeetodit, mida peaksite juba täna valdama

JavaScripti kaart on kogu, mis salvestab iga selle elemendi võtme-väärtuse paarina. Seda andmetüüpi nimetatakse ka assotsiatiivseks massiiviks või sõnastikuks.

Võtme või väärtusena saate kasutada mis tahes andmetüüpi (primitiive ja objekte). Kaardiobjekt jätab algse sisestamise järjekorra meelde, kuigi tavaliselt pääsete väärtustele juurde nende võtme abil.

Sellest artiklist saate teada kümne JavaScripti kaardi meetodi kohta, mida peaksite täna valdama.

1. Kuidas luua JavaScriptis uut kaarti

Saate luua uue kaardiobjekti kasutades Kaart () konstruktor. See konstruktor aktsepteerib ühte parameetrit: itereeritav objekt, mille elemendid on võtme-väärtuse paarid.

let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"],
[1992, "Batmani tagasitulek"],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "Pimeduse rüütel"],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj);

Väljund:

Kaart (7) {
1966 => "Batman: film",
1989 => 'Batman',
1992 => 'Batmani tagasitulek',
1995 => "Batman igavesti",
2005 => 'Batman algab',
2008 => "Pimeduse rüütel",
2012 => "Pimeduse rüütel tõuseb"
}

Kui te parameetrit ei sisesta, loob JavaScript uue tühja kaardi.

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

Väljund:

Kaart (0) {}

Kui proovite luua kaarti dubleerivate võtmetega, kirjutab iga korduv klahv eelmise väärtuse uue väärtusega üle.

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

Väljund:

Kaart (2) {
'key1' => 'väärtus1',
'key2' => 'uusValue2'
}

Siin on väärtus salvestatud vastu võti2 võti on uusVäärtus2, mitte varasem väärtus2.

Segaandmetüüpe kasutades saate luua ka kaardiobjekti, mis sisaldab võtme-väärtuse paare.

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

Väljund:

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

2. Lisage kaardiobjektile uusi elemente

Saate lisada kaardiobjektile uue elemendi, kasutades set() meetod. See meetod aktsepteerib võtme ja väärtuse ning lisab seejärel kaardiobjektile uue elemendi. Seejärel tagastab meetod uue kaardiobjekti koos lisandväärtusega. Kui võti on kaardil juba olemas, asendab uus väärtus olemasoleva väärtuse.

let mapObj = new Map();
mapObj.set (1966, "Batman: The Movie");
mapObj.set (1989, "Batman");
mapObj.set (1992, "Batmani tagasitulek");
mapObj.set (1995, "Batman Forever");
console.log (mapObj);

Väljund:

Kaart (4) {
1966 => "Batman: film",
1989 => 'Batman',
1992 => 'Batmani tagasitulek',
1995 => "Batman igavesti"
}

Võtmete või väärtustena saate kasutada ka muutujaid või konstante:

põhiaasta1 = 1966;
const movieName1 = 'Batman: film';
olgu aasta2 = 1989;
var movieName2 = 'Batman';
let mapObj = new Map();
mapObj.set (aasta1, filminimi1);
mapObj.set (aasta2, filminimi2);
console.log (mapObj);

Väljund:

Kaart (2) {
1966 => "Batman: film",
1989 => 'Batman'
}

The set() meetod toetab aheldamist.

let mapObj = new Map();
mapObj.set (1966, "Batman: The Movie")
.set (1989, "Batman")
.set (1992, "Batmani tagasitulek")
.set (1995, 'Batman Forever');
console.log (mapObj);

Väljund:

Kaart (4) {
1966 => "Batman: film",
1989 => 'Batman',
1992 => 'Batmani tagasitulek',
1995 => "Batman igavesti"
}

3. Eemaldage kaardiobjektilt kõik elemendid

Kaardiobjektilt saate eemaldada kõik elemendid, kasutades selge () meetod. See meetod naaseb alati määratlemata.

let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"]
]);
console.log("Kaardiobjekti suurus: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Kaardiobjekti suurus pärast elementide puhastamist: " + mapObj.size);
console.log (mapObj);

Väljund:

Kaardiobjekti suurus: 2
Kaart (2) { 1966 => 'Batman: film', 1989 => 'Batman' }
Kaardiobjekti suurus pärast elementide kustutamist: 0
Kaart (0) {}

4. Konkreetse elemendi kustutamine kaardilt

Saate eemaldada kaardiobjektilt konkreetse elemendi, kasutades kustuta() meetod. See meetod aktsepteerib kaardilt kustutatava elemendi võtme. Kui võti on olemas, naaseb meetod tõsi. Vastasel juhul naaseb vale.

let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"]
]);
console.log("Esialgne kaart: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Kaart pärast elemendi kustutamist, mille võti on 1966");
console.log (mapObj);

Väljund:

Esialgne kaart:
Kaart (2) { 1966 => 'Batman: film', 1989 => 'Batman' }
Kaart pärast elemendi kustutamist, mille võti on 1966
Kaart (1) { 1989 => 'Batman' }

5. Kontrollige, kas element on kaardil

Saate kontrollida, kas kaardiobjektis on elementi, kasutades on () meetod. See meetod aktsepteerib elemendi võtit parameetrina, et testida olemasolu kaardiobjektis. See meetod naaseb tõsi kui võti on olemas. Vastasel juhul naaseb vale.

let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"],
[1992, "Batmani tagasitulek"],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "Pimeduse rüütel"],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Väljund:

tõsi
vale

Võtmega element 1966 on kaardiobjektis olemas, nii et meetod tagastati tõsi. Aga kuna võtmega elementi pole 1977 Kaardiobjektis meetod tagastati vale teisest kõnest.

Seotud: Mis on JavaScript ja kuidas see töötab?

6. Juurdepääs konkreetse võtme väärtusele

The saada () meetod tagastab konkreetse elemendi kaardiobjektist. See meetod aktsepteerib parameetrina elemendi võtit. Kui võti on kaardiobjektis olemas, tagastab meetod elemendi väärtuse. Vastasel juhul naaseb määratlemata.

let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"],
[1992, "Batmani tagasitulek"],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "Pimeduse rüütel"],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Väljund:

Batman: film
määratlemata

Võtmega element 1966 on kaardiobjektis olemas, seega tagastas meetod elemendi väärtuse. Võtmega elementi pole 1988 objektis Map, nii et meetod tagastati määratlemata.

7. Juurdepääs kaardi kirjetele iteraatori kaudu

Ametniku sõnul MDN-i veebidokumendid:

Meetod entries() tagastab uue iteraatori objekti, mis sisaldab sisestusjärjekorras kaardiobjekti iga elemendi [võti, väärtus] paare. Sel konkreetsel juhul on see iteraatori objekt samuti itereeritav, seega saab kasutada for-of-silmust. Protokolli [Symbol.iterator] kasutamisel tagastab see funktsiooni, mis käivitamisel tagastab selle iteraatori enda.

Selle iteraatori ja a abil pääsete juurde igale kaardi elemendile jaoks... kohta avaldus:

let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"],
[1992, "Batmani tagasitulek"],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "Pimeduse rüütel"],
[2012, "The Dark Knight Rises"]
]);
for (lubage kirje mapObj.entries()) {
console.log (kirje);
}

Väljund:

[ 1966, "Batman: film"]
[1989, "Batman"]
[ 1992, "Batmani tagasitulek"]
[1995, "Batman Forever"]
[2005, "Batman alustab"]
[2008, "Pimeduse rüütel"]
[2012, "Pimeduse rüütel tõuseb"]

Või võite kasutada ES6 hävitava määramise funktsiooni, et pääseda juurde igale võtmele ja väärtusele:

let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"],
[1992, "Batmani tagasitulek"],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "Pimeduse rüütel"],
[2012, "The Dark Knight Rises"]
]);
for (olgu [võti, väärtus] of mapObj.entries()) {
console.log("Võti: " + võti + " Väärtus: " + väärtus);
}

Väljund:

Võti: 1966 Väärtus: Batman: The Movie
Võti: 1989 Väärtus: Batman
Võti: 1992 Väärtus: Batmani tagasitulek
Võti: 1995 Väärtus: Batman Forever
Võti: 2005 Väärtus: Batman Begins
Võti: 2008 Väärtus: Pimeduse rüütel
Võti: 2012 Väärtus: Pimeduse rüütel tõuseb

8. Kuidas korrata kaardi väärtusi

The väärtused() meetod tagastab an Iteraator objekt, mis sisaldab kõiki kaardi väärtusi, ja teeb seda sisestamise järjekorras.

let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"],
[1992, "Batmani tagasitulek"]
]);
const iteratorObj = mapObj.values();
for (lase iteratorObj väärtus) {
console.log (väärtus);
}

Väljund:

Batman: film
Batman
Batman naaseb

9. Korrake kaardi klahvide kaudu

The võtmed () meetod tagastab an Iteraator objekt, mis sisaldab kõiki kaardi võtmeid ja teeb seda sisestamise järjekorras.

let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"],
[1992, "Batmani tagasitulek"]
]);
const iteratorObj = mapObj.keys();
for (iteratorObj võti let) {
console.log (võti);
}

Väljund:

1966
1989
1992

Seotud: JavaScripti noolefunktsioonid võivad muuta teid paremaks arendajaks

10. Korrake kaardil elemente, kasutades tagasihelistamist

The igaühele() meetod kutsub iga kaardiobjekti elemendi jaoks välja tagasihelistamise funktsiooni. Tagasihelistamise funktsioon võtab kaks parameetrit: võti ja väärtus.

function printKeyValue (võti, väärtus) {
console.log("Võti: " + võti + " Väärtus: " + väärtus);
}
let mapObj = new Map([
[1966, "Batman: film"],
[1989, "Batman"],
[1992, "Batmani tagasitulek"]
]);
mapObj.forEach (printKeyValue);

Väljund:

Võti: Batman: Filmi väärtus: 1966
Võti: Batmani väärtus: 1989
Võti: Batman Returns Value: 1992

Nüüd teate JavaScripti kaartide kohta

Nüüd on teil piisavalt teadmisi, et omandada JavaScriptis Mapsi kontseptsioon. Kaardi andmestruktuuri kasutatakse laialdaselt paljudes programmeerimisülesannetes. Kui olete selle selgeks õppinud, saate liikuda edasi muude JavaScripti loomulike objektide juurde, nagu komplektid, massiivid ja nii edasi.

15 JavaScripti massiivi meetodit, mida peaksite juba täna valdama

Kas soovite JavaScripti massiive mõista, kuid ei saa nendega hakkama? Juhiste saamiseks vaadake meie JavaScripti massiivi näiteid.

Loe edasi

Autori kohta