10 JavaScriptových mapových metód, ktoré by ste dnes mali ovládať

Mapa JavaScript je kolekcia, ktorá ukladá každý zo svojich prvkov ako pár kľúč – hodnota. Tento typ údajov sa tiež označuje ako asociatívne pole alebo slovník.

Ako kľúč alebo hodnotu môžete použiť ľubovoľný typ údajov (primitíva a objekty). Objekt Mapa si pamätá pôvodné poradie vkladania, hoci k hodnotám zvyčajne pristupujete podľa ich kľúča.

V tomto článku sa dozviete o desiatich metódach mapy JavaScript, ktoré by ste dnes mali ovládať.

1. Ako vytvoriť novú mapu v JavaScripte

Môžete vytvoriť nový objekt mapy pomocou mapa() konštruktér. Tento konštruktor akceptuje jeden parameter: iterovateľný objekt, ktorého prvky sú páry kľúč – hodnota.

nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman začína'],
[2008, 'Temný rytier'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj);

Výkon:

Mapa (7) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman sa vracia',
1995 => 'Batman navždy',
2005 => 'Batman začína',
2008 => 'Temný rytier',
2012 => „Temný rytier povstal“
}

Ak parameter nezadáte, JavaScript vytvorí novú prázdnu mapu.

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

Výkon:

Mapa (0) {}

Ak sa pokúsite vytvoriť mapu s duplicitnými kľúčmi, každý opakovaný kľúč prepíše predchádzajúcu hodnotu novou hodnotou.

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

Výkon:

Mapa (2) {
'key1' => 'value1',
'key2' => 'newValue2'
}

Tu je hodnota uložená oproti kľúč2 kľúč je newValue2, nie skôr hodnota2.

Môžete tiež vytvoriť objekt mapy, ktorý obsahuje páry kľúč – hodnota pomocou zmiešaných typov údajov.

nech mapObj = new Map([
["reťazec1", 1],
[2, "reťazec2"],
["reťazec3", 433,234],
[23.56, 45]
]);
console.log (mapObj);

Výkon:

Mapa (4) {
'reťazec1' => 1,
2 => 'reťazec2',
'string3' => 433,234,
23.56 => 45
}

2. Pridajte nové prvky do objektu mapy

Do objektu mapy môžete pridať nový prvok pomocou set() metóda. Táto metóda akceptuje kľúč a hodnotu a potom pridá nový prvok do objektu mapy. Metóda potom vráti nový objekt mapy s pridanou hodnotou. Ak kľúč už na mape existuje, nová hodnota nahradí existujúcu hodnotu.

nech mapObj = new Map();
mapObj.set (1966, 'Batman: Film');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman sa vracia');
mapObj.set (1995, 'Batman navždy');
console.log (mapObj);

Výkon:

Mapa (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman sa vracia',
1995 => 'Batman navždy'
}

Premenné alebo konštanty môžete použiť aj ako kľúče alebo hodnoty:

stály rok 1 = 1966;
const movieName1 = 'Batman: The Movie';
nech rok2 = 1989;
var movieName2 = 'Batman';
nech mapObj = new Map();
mapObj.set (rok1, názov filmu1);
mapObj.set (rok2, názov filmu2);
console.log (mapObj);

Výkon:

Mapa (2) {
1966 => 'Batman: The Movie',
1989 => 'Batman'
}

The set() metóda podporuje reťazenie.

nech mapObj = new Map();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, 'Batman Returns')
.set (1995, 'Batman navždy');
console.log (mapObj);

Výkon:

Mapa (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman sa vracia',
1995 => 'Batman navždy'
}

3. Odstráňte všetky prvky z objektu mapy

Všetky prvky z objektu mapy môžete odstrániť pomocou jasný() metóda. Táto metóda sa vždy vráti nedefinované.

nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Veľkosť objektu mapy: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Veľkosť objektu mapy po vymazaní prvkov: " + mapObj.size);
console.log (mapObj);

Výkon:

Veľkosť objektu mapy: 2
Mapa (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Veľkosť objektu mapy po odstránení prvkov: 0
Mapa (0) {}

4. Odstrániť konkrétny prvok z mapy

Môžete odstrániť konkrétny prvok z objektu mapy pomocou vymazať () metóda. Táto metóda akceptuje kľúč prvku, ktorý sa má odstrániť z mapy. Ak kľúč existuje, metóda sa vráti pravda. V opačnom prípade sa vráti falošné.

nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Úvodná mapa: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Mapa po odstránení prvku s kľúčom 1966");
console.log (mapObj);

Výkon:

Úvodná mapa:
Mapa (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Mapa po odstránení prvku s kľúčom 1966
Mapa (1) { 1989 => 'Batman' }

5. Skontrolujte, či prvok na mape existuje

Môžete skontrolovať, či prvok existuje v objekte mapy pomocou má() metóda. Táto metóda akceptuje kľúč prvku ako parameter na testovanie prítomnosti v objekte mapy. Táto metóda sa vracia pravda ak kľúč existuje. V opačnom prípade sa vráti falošné.

nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman začína'],
[2008, 'Temný rytier'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Výkon:

pravda
falošné

Prvok s kľúčom 1966 existuje v objekte Mapa, takže metóda sa vrátila pravda. Ale keďže tu nie je žiadny prvok s kľúčom 1977 v objekte Mapa sa metóda vrátila falošné z druhého hovoru.

Súvisiace: Čo je JavaScript a ako funguje?

6. Prístup k hodnote pre konkrétny kľúč

The dostať () metóda vráti konkrétny prvok z objektu mapy. Táto metóda akceptuje kľúč prvku ako parameter. Ak kľúč v objekte mapy existuje, metóda vráti hodnotu prvku. V opačnom prípade sa vráti nedefinované.

nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman začína'],
[2008, 'Temný rytier'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Výkon:

Batman: Film
nedefinované

Prvok s kľúčom 1966 existuje v objekte Mapa, takže metóda vrátila hodnotu prvku. Neexistuje žiadny prvok s kľúčom 1988 v objekte Mapa, takže metóda sa vrátila nedefinované.

7. Prístup k záznamom mapy cez iterátor

Podľa úradníka Webové dokumenty MDN:

Metóda entries() vracia nový objekt Iterator, ktorý obsahuje páry [kľúč, hodnota] pre každý prvok v objekte Map v poradí vloženia. V tomto konkrétnom prípade je tento objekt iterátora tiež iterovateľný, takže je možné použiť cyklus for-of. Keď sa použije protokol [Symbol.iterator], vráti funkciu, ktorá po vyvolaní vráti tento iterátor samotný.

Ku každému prvku mapy môžete pristupovať pomocou tohto iterátora a a pre...z vyhlásenie:

nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman začína'],
[2008, 'Temný rytier'],
[2012, 'The Dark Knight Rises']
]);
for (nech vstup z mapObj.entries()) {
console.log (záznam);
}

Výkon:

[ 1966, 'Batman: The Movie']
[1989, 'Batman']
[1992, 'Batman Returns']
[1995, 'Batman navždy']
[2005, 'Batman začína']
[2008, 'Temný rytier']
[2012, 'The Dark Knight Rises']

Alebo môžete použiť funkciu deštrukčného priradenia ES6 na prístup ku každému kľúču a hodnote:

nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman začína'],
[2008, 'Temný rytier'],
[2012, 'The Dark Knight Rises']
]);
for (nech [kľúč, hodnota] funkcie mapObj.entries()) {
console.log("Kľúč: " + kľúč + " Hodnota: " + hodnota);
}

Výkon:

Kľúč: 1966 Hodnota: Batman: The Movie
Kľúč: 1989 Hodnota: Batman
Kľúč: 1992 Value: Batman Returns
Kľúč: 1995 Hodnota: Batman navždy
Kľúč: Hodnota 2005: Batman začína
Kľúč: 2008 Hodnota: Temný rytier
Kľúč: 2012 Value: The Dark Knight Rises

8. Ako iterovať cez hodnoty mapy

The hodnoty() metóda vracia an Iterátor objekt, ktorý obsahuje všetky hodnoty v mape, a to v poradí vloženia.

nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman sa vracia']
]);
const iteratorObj = mapObj.values();
for (nech hodnota iteratorObj) {
console.log (hodnota);
}

Výkon:

Batman: Film
Batman
Batman sa vracia

9. Iterujte cez klávesy mapy

The kľúče () metóda vracia an Iterátor objekt, ktorý obsahuje všetky kľúče v mape, a robí to v poradí vloženia.

nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman sa vracia']
]);
const iteratorObj = mapObj.keys();
for (nech kľúč iteratorObj) {
console.log (kľúč);
}

Výkon:

1966
1989
1992

Súvisiace: Funkcie šípok JavaScript z vás môžu urobiť lepšieho vývojára

10. Iterujte cez prvky na mape pomocou spätného volania

The pre každý() metóda vyvolá funkciu spätného volania pre každý prvok objektu mapy. Funkcia spätného volania má dva parametre: kľúč a hodnotu.

function printKeyValue (kľúč, hodnota) {
console.log("Kľúč: " + kľúč + " Hodnota: " + hodnota);
}
nech mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman sa vracia']
]);
mapObj.forEach (printKeyValue);

Výkon:

Kľúč: Batman: Hodnota filmu: 1966
Kľúč: Batman Hodnota: 1989
Kľúč: Batman Returns Value: 1992

Teraz viete o Mapách v JavaScripte

Teraz máte dostatok vedomostí na to, aby ste si osvojili koncept máp v JavaScripte. Štruktúra údajov mapy je široko používaná v mnohých programovacích úlohách. Keď si to osvojíte, môžete prejsť na ďalšie natívne objekty JavaScript, ako sú sady, polia atď.

15 metód JavaScriptového poľa, ktoré by ste mali dnes ovládať

Chcete porozumieť poliam JavaScript, ale neviete sa s nimi vysporiadať? Pokyny nájdete v našich príkladoch poľa JavaScript.

Prečítajte si ďalej

O autorovi