10 JavaScript-térképezési módszer, amelyet még ma el kell sajátítania

A JavaScript-térkép egy olyan gyűjtemény, amely minden elemét kulcs-érték párként tárolja. Ezt az adattípust asszociatív tömbnek vagy szótárnak is nevezik.

Bármilyen adattípust (primitívek és objektumok) használhat kulcsként vagy értékként. A Map objektum megjegyzi a beillesztés eredeti sorrendjét, bár az értékeket általában a kulcsukkal éri el.

Ebből a cikkből tíz JavaScript-térkép-módszert ismerhet meg, amelyeket ma érdemes elsajátítania.

1. Új térkép létrehozása JavaScriptben

Új térképobjektumot hozhat létre a Térkép() konstruktőr. Ez a konstruktor egy paramétert fogad el: egy iterálható objektumot, amelynek elemei kulcs-érték párok.

let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"],
[1992, "Batman visszatér"],
[1995, "Batman Forever"],
[2005, "Batman kezdődik"],
[2008, "The Dark Knight"],
[2012, "A sötét lovag felemelkedése"]
]);
console.log (mapObj);

Kimenet:

Térkép (7) {
1966 => 'Batman: A film',
1989 => 'Batman',
1992 => 'Batman visszatér',
1995 => 'Batman Forever',
2005 => 'Batman kezdődik',
2008 => 'The Dark Knight',
2012 => "A sötét lovag felemelkedése"
}

Ha nem adja meg a paramétert, a JavaScript új üres térképet hoz létre.

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

Kimenet:

Térkép (0) {}

Ha megpróbál létrehozni egy térképet duplikált kulcsokkal, minden ismételt billentyű felülírja az előző értéket az új értékkel.

let mapObj = new Map([
['kulcs1', 'érték1'],
['kulcs2', 'érték2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Kimenet:

térkép (2) {
'key1' => 'érték1',
'key2' => 'újÉrték2'
}

Itt a tárolt érték ellen kulcs2 kulcs az újÉrték2, nem a korábbi érték2.

Létrehozhat olyan Map objektumot is, amely kulcs-érték párokat tartalmaz vegyes adattípusok használatával.

let mapObj = new Map([
["karakterlánc1", 1],
[2, "karakterlánc2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Kimenet:

Térkép (4) {
'string1' => 1,
2 => 'string2',
'string3' => 433.234,
23.56 => 45
}

2. Új elemek hozzáadása egy térképobjektumhoz

Új elemet adhat a Térkép objektumhoz a segítségével készlet() módszer. Ez a metódus elfogad egy kulcsot és egy értéket, majd új elemet ad a Map objektumhoz. A metódus ezután visszaadja az új térképobjektumot a hozzáadott értékkel. Ha a kulcs már létezik a Térképen, az új érték a meglévő érték helyébe lép.

let mapObj = new Map();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, „Batman”);
mapObj.set (1992, „Batman visszatér”);
mapObj.set (1995, „Batman Forever”);
console.log (mapObj);

Kimenet:

Térkép (4) {
1966 => 'Batman: A film',
1989 => 'Batman',
1992 => 'Batman visszatér',
1995 => 'Batman Forever'
}

Kulcsként vagy értékként változókat vagy állandókat is használhat:

const year1 = 1966;
const movieName1 = 'Batman: A film';
legyen év2 = 1989;
var movieName2 = 'Batman';
let mapObj = new Map();
mapObj.set (év1, filmnév1);
mapObj.set (év2, filmnév2);
console.log (mapObj);

Kimenet:

térkép (2) {
1966 => 'Batman: A film',
1989 => 'Batman'
}

Az készlet() módszer támogatja a láncolást.

let mapObj = new Map();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, „Batman”)
.set (1992, „Batman visszatér”)
.set (1995, 'Batman Forever');
console.log (mapObj);

Kimenet:

Térkép (4) {
1966 => 'Batman: A film',
1989 => 'Batman',
1992 => 'Batman visszatér',
1995 => 'Batman Forever'
}

3. Távolítsa el az összes elemet egy térképobjektumból

Az összes elemet eltávolíthatja egy térképobjektumból a egyértelmű() módszer. Ez a módszer mindig visszatér határozatlan.

let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"]
]);
console.log("A térképobjektum mérete: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("A térképobjektum mérete az elemek törlése után: " + mapObj.size);
console.log (mapObj);

Kimenet:

A térképobjektum mérete: 2
Térkép (2) { 1966 => 'Batman: A film', 1989 => 'Batman' }
A térképobjektum mérete az elemek törlése után: 0
Térkép (0) {}

4. Adott elem törlése a térképről

Egy adott elemet eltávolíthat egy térképobjektumból a segítségével töröl() módszer. Ez a módszer elfogadja a térképről törölni kívánt elem kulcsát. Ha a kulcs létezik, a metódus visszatér igaz. Ellenkező esetben visszatér hamis.

let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"]
]);
console.log("Kezdeti leképezés: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Térkép az 1966-os kulcsú elem törlése után");
console.log (mapObj);

Kimenet:

Kezdeti térkép:
Térkép (2) { 1966 => 'Batman: A film', 1989 => 'Batman' }
Térkép az 1966-os kulcsú elem törlése után
Térkép (1) { 1989 => 'Batman' }

5. Ellenőrizze, hogy létezik-e elem a térképen

A segítségével ellenőrizheti, hogy létezik-e elem egy térképobjektumban van() módszer. Ez a módszer elfogadja az elem kulcsát paraméterként a térképobjektumban való jelenlét teszteléséhez. Ez a metódus visszatér igaz ha a kulcs létezik. Ellenkező esetben visszatér hamis.

let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"],
[1992, "Batman visszatér"],
[1995, "Batman Forever"],
[2005, "Batman kezdődik"],
[2008, "The Dark Knight"],
[2012, "A sötét lovag felemelkedése"]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Kimenet:

igaz
hamis

Kulcsos elem 1966 létezik a Map objektumban, így a metódus visszatért igaz. De mivel nincs kulcsos elem 1977 a Map objektumban a metódus tért vissza hamis a második hívástól.

Összefüggő: Mi az a JavaScript és hogyan működik?

6. Egy adott kulcs értékének elérése

Az kap() metódus egy adott elemet ad vissza a Map objektumból. Ez a metódus elfogadja az elem kulcsát paraméterként. Ha a kulcs létezik a Map objektumban, akkor a metódus az elem értékét adja vissza. Ellenkező esetben visszatér határozatlan.

let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"],
[1992, "Batman visszatér"],
[1995, "Batman Forever"],
[2005, "Batman kezdődik"],
[2008, "The Dark Knight"],
[2012, "A sötét lovag felemelkedése"]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Kimenet:

Batman: A film
határozatlan

Kulcsos elem 1966 létezik a Map objektumban, így a metódus az elem értékét adta vissza. Nincs kulcsos elem 1988 a Map objektumban, így a metódus visszatért határozatlan.

7. Hozzáférés a térképbejegyzésekhez egy iterátoron keresztül

Az illetékes szerint MDN Web Docs:

Az entries() metódus egy új Iterator objektumot ad vissza, amely tartalmazza a [kulcs, érték] párokat a Map objektum minden eleméhez beillesztési sorrendben. Ebben a konkrét esetben ez az iterátor objektum is iterálható, így a for-of ciklus használható. A [Symbol.iterator] protokoll használatakor egy függvényt ad vissza, amely meghívásakor magát ezt az iterátort adja vissza.

A térkép minden elemét elérheti ezzel az iterátorral és a mert... of nyilatkozat:

let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"],
[1992, "Batman visszatér"],
[1995, "Batman Forever"],
[2005, "Batman kezdődik"],
[2008, "The Dark Knight"],
[2012, "A sötét lovag felemelkedése"]
]);
for (engedjük be a mapObj.entries() bejegyzését) {
console.log (bejegyzés);
}

Kimenet:

[ 1966, "Batman: A film"]
[ 1989, 'Batman']
[1992, "Batman visszatér"]
[1995, "Batman Forever"]
[2005, "Batman kezdődik"]
[2008, "A sötét lovag"]
[2012, "A sötét lovag felemelkedése"]

Vagy használhatja az ES6 megsemmisítő hozzárendelés funkciót az egyes kulcsok és értékek eléréséhez:

let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"],
[1992, "Batman visszatér"],
[1995, "Batman Forever"],
[2005, "Batman kezdődik"],
[2008, "The Dark Knight"],
[2012, "A sötét lovag felemelkedése"]
]);
for (legyen [kulcs, értéke] of mapObj.entries()) {
console.log("Kulcs: " + kulcs + " Érték: " + érték);
}

Kimenet:

Kulcs: 1966 Érték: Batman: A film
Kulcs: 1989 Érték: Batman
Kulcs: 1992 Érték: Batman visszatér
Kulcs: 1995 Értéke: Batman Forever
Kulcs: 2005 Érték: Batman kezdődik
Kulcs: 2008 Érték: A sötét lovag
Kulcs: 2012 Érték: The Dark Knight Rises

8. Hogyan iterálhatjuk át a térkép értékeit

Az értékek() metódus egy Iterátor objektum, amely a térkép összes értékét tartalmazza, és ezt a beillesztési sorrendben teszi.

let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"],
[1992, "Batman visszatér"]
]);
const iteratorObj = mapObj.values();
for (legyen az iteratorObj értéke) {
console.log (érték);
}

Kimenet:

Batman: A film
Denevérember
Batman visszatér

9. Iteráljon a térkép billentyűi felett

Az kulcsok() metódus egy Iterátor objektum, amely a térkép összes kulcsát tartalmazza, és ezt a beillesztési sorrendben teszi.

let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"],
[1992, "Batman visszatér"]
]);
const iteratorObj = mapObj.keys();
for (legyen az iteratorObj kulcsa) {
console.log (kulcs);
}

Kimenet:

1966
1989
1992

Összefüggő: A JavaScript nyíl funkciói jobb fejlesztővé tehetik Önt

10. Ismételje meg a térkép elemeit visszahívással

Az az egyes() metódus meghív egy visszahívási függvényt a Map objektum minden eleméhez. A visszahívási függvénynek két paramétere van: a kulcs és az érték.

function printKeyValue (kulcs, érték) {
console.log("Kulcs: " + kulcs + " Érték: " + érték);
}
let mapObj = new Map([
[1966, "Batman: The Movie"],
[1989, "Batman"],
[1992, "Batman visszatér"]
]);
mapObj.forEach (printKeyValue);

Kimenet:

Kulcs: Batman: A film Értéke: 1966
Kulcs: Batman Érték: 1989
Kulcs: Batman Returns Érték: 1992

Most már ismeri a térképeket JavaScriptben

Most már elegendő tudással rendelkezik ahhoz, hogy elsajátítsa a Térkép fogalmát JavaScriptben. A Map adatszerkezetet széles körben használják számos programozási feladatban. Miután elsajátította, áttérhet más natív JavaScript-objektumokra, például a készletekre, tömbökre és így tovább.

15 JavaScript-tömb módszer, amelyet ma el kell sajátítania

Meg akarja érteni a JavaScript tömböket, de nem tud megbirkózni velük? Útmutatásért tekintse meg JavaScript-tömb példáinkat.

Olvassa el a következőt

A szerzőről