10 JavaScriptových mapových metod, které byste dnes měli zvládnout

Mapa JavaScriptu je kolekce, která ukládá každý ze svých prvků jako pár klíč–hodnota. Tento datový typ se také nazývá asociativní pole nebo slovník.

Jako klíč nebo hodnotu můžete použít jakýkoli datový typ (primitiva a objekty). Objekt Map si pamatuje původní pořadí vložení, i když k hodnotám obvykle přistupujete pomocí jejich klíče.

V tomto článku se dozvíte o deseti metodách JavaScript Map, které byste dnes měli ovládat.

1. Jak vytvořit novou mapu v JavaScriptu

Můžete vytvořit nový objekt mapy pomocí Mapa() konstruktér. Tento konstruktor přijímá jeden parametr: iterovatelný objekt, jehož prvky jsou páry klíč–hodnota.

let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman se vrací'],
[1995, 'Batman Forever'],
[2005, 'Batman začíná'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj);

Výstup:

Mapa (7) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman se vrací',
1995 => 'Batman navždy',
2005 => 'Batman začíná',
2008 => 'Temný rytíř',
2012 => 'The Dark Knight Rises'
}

Pokud parametr nezadáte, JavaScript vytvoří novou prázdnou mapu.

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

Výstup:

Mapa (0) {}

Pokud se pokusíte vytvořit mapu s duplicitními klíči, každý opakovaný klíč přepíše předchozí hodnotu novou hodnotou.

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

Výstup:

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

Zde je hodnota uložená proti klíč2 klíč je newValue2, ne dříve hodnota2.

Můžete také vytvořit objekt Map, který obsahuje páry klíč–hodnota pomocí smíšených datových typů.

let mapObj = new Map([
["řetězec1", 1],
[2, "řetězec2"],
["řetězec3", 433,234],
[23.56, 45]
]);
console.log (mapObj);

Výstup:

Mapa (4) {
'řetězec1' => 1,
2 => 'řetězec2',
'string3' => 433,234,
23.56 => 45
}

2. Přidejte nové prvky do objektu mapy

K objektu mapy můžete přidat nový prvek pomocí soubor() metoda. Tato metoda přijímá klíč a hodnotu a poté do objektu Map přidá nový prvek. Metoda pak vrátí nový objekt Map s přidanou hodnotou. Pokud klíč již v mapě existuje, nová hodnota nahradí stávající hodnotu.

let mapObj = new Map();
mapObj.set (1966, 'Batman: Film');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman se vrací');
mapObj.set (1995, 'Batman navždy');
console.log (mapObj);

Výstup:

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

Jako klíče nebo hodnoty můžete také použít proměnné nebo konstanty:

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

Výstup:

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

The soubor() metoda podporuje řetězení.

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

Výstup:

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

3. Odstraňte všechny prvky z objektu mapy

Všechny prvky z objektu mapy můžete odstranit pomocí Průhledná() metoda. Tato metoda se vždy vrátí nedefinováno.

let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Velikost objektu mapy: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Velikost objektu Map po vymazání prvků: " + mapObj.size);
console.log (mapObj);

Výstup:

Velikost objektu mapy: 2
Mapa (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Velikost objektu mapy po vymazání prvků: 0
Mapa (0) {}

4. Odstranit konkrétní prvek z mapy

Můžete odstranit konkrétní prvek z objektu mapy pomocí vymazat() metoda. Tato metoda přijímá klíč prvku, který se má z mapy odstranit. Pokud klíč existuje, metoda se vrátí skutečný. Jinak se to vrací Nepravdivé.

let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Počáteční mapa: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Mapa po smazání prvku s klíčem 1966");
console.log (mapObj);

Výstup:

Počáteční mapa:
Mapa (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Mapa po smazání prvku s klíčem 1966
Mapa (1) { 1989 => 'Batman' }

5. Zkontrolujte, zda prvek na mapě existuje

Můžete zkontrolovat, zda prvek v objektu mapy existuje pomocí má() metoda. Tato metoda přijímá klíč prvku jako parametr pro testování přítomnosti v objektu Map. Tato metoda se vrací skutečný pokud klíč existuje. Jinak se to vrací Nepravdivé.

let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman se vrací'],
[1995, 'Batman Forever'],
[2005, 'Batman začíná'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Výstup:

skutečný
Nepravdivé

Prvek s klíčem 1966 existuje v objektu Map, takže metoda vrátila skutečný. Ale protože tam není žádný prvek s klíčem 1977 v objektu Map se metoda vrátila Nepravdivé z druhého hovoru.

Příbuzný: Co je JavaScript a jak funguje?

6. Přístup k hodnotě pro konkrétní klíč

The dostat() metoda vrací konkrétní prvek z objektu Map. Tato metoda přijímá klíč prvku jako parametr. Pokud klíč v objektu Map existuje, metoda vrátí hodnotu prvku. Jinak se to vrací nedefinováno.

let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman se vrací'],
[1995, 'Batman Forever'],
[2005, 'Batman začíná'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Výstup:

Batman: Film
nedefinováno

Prvek s klíčem 1966 existuje v objektu Map, takže metoda vrátila hodnotu prvku. Není zde žádný prvek s klíčem 1988 v objektu Mapa, takže metoda vrátila nedefinováno.

7. Přístup k záznamům mapy prostřednictvím iterátoru

Podle úředníka Webové dokumenty MDN:

Metoda entries() vrací nový objekt Iterator, který obsahuje páry [klíč, hodnota] pro každý prvek v objektu Map v pořadí vložení. V tomto konkrétním případě je tento objekt iterátoru také iterovatelný, takže lze použít smyčku for-of. Když je použit protokol [Symbol.iterator], vrací funkci, která při vyvolání vrací tento iterátor samotný.

Ke každému prvku mapy můžete přistupovat pomocí tohoto iterátoru a a pro...z tvrzení:

let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman se vrací'],
[1995, 'Batman Forever'],
[2005, 'Batman začíná'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
for (nechte položku mapObj.entries()) {
console.log (záznam);
}

Výstup:

[1966, 'Batman: The Movie']
[1989, 'Batman']
[1992, 'Batman se vrací']
[1995, 'Batman navždy']
[2005, 'Batman začíná']
[2008, 'The Dark Knight']
[2012, 'The Dark Knight Rises']

Nebo můžete použít funkci destruktivního přiřazení ES6 pro přístup ke každému klíči a hodnotě:

let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman se vrací'],
[1995, 'Batman Forever'],
[2005, 'Batman začíná'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
for (let [klíč, hodnota] z mapObj.entries()) {
console.log("Klíč: " + klíč + " Hodnota: " + hodnota);
}

Výstup:

Klíč: 1966 Hodnota: Batman: The Movie
Klíč: 1989 Hodnota: Batman
Klíč: 1992 Value: Batman Returns
Klíč: 1995 Hodnota: Batman navždy
Klíč: 2005 Value: Batman Begins
Klíč: 2008 Hodnota: Temný rytíř
Klíč: 2012 Value: The Dark Knight Rises

8. Jak iterovat hodnoty mapy

The hodnoty() metoda vrací an Iterátor objekt, který obsahuje všechny hodnoty v mapě, a to v pořadí vložení.

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

Výstup:

Batman: Film
Bat-man
Batman se vrací

9. Iterujte přes klávesy mapy

The klíče() metoda vrací an Iterátor objekt, který obsahuje všechny klíče v mapě, a to v pořadí vložení.

let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman se vrací']
]);
const iteratorObj = mapObj.keys();
for (nechte klíč iteratorObj) {
console.log (klíč);
}

Výstup:

1966
1989
1992

Příbuzný: Funkce šipek JavaScriptu z vás mohou udělat lepšího vývojáře

10. Iterujte přes prvky v mapě pomocí zpětného volání

The pro každého() metoda vyvolá funkci zpětného volání pro každý prvek objektu Map. Funkce zpětného volání má dva parametry: klíč a hodnotu.

function printKeyValue (klíč, hodnota) {
console.log("Klíč: " + klíč + " Hodnota: " + hodnota);
}
let mapObj = new Map([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman se vrací']
]);
mapObj.forEach (printKeyValue);

Výstup:

Klíč: Batman: The Movie Value: 1966
Klíč: Batman Hodnota: 1989
Klíč: Batman Returns Value: 1992

Nyní víte o Mapách v JavaScriptu

Nyní máte dostatek znalostí, abyste zvládli koncept Map v JavaScriptu. Struktura dat mapy je široce používána v mnoha programovacích úlohách. Jakmile to zvládnete, můžete přejít k dalším nativním objektům JavaScriptu, jako jsou sady, pole a tak dále.

15 metod JavaScript Array, které byste dnes měli zvládnout

Chcete porozumět polím JavaScript, ale nemůžete se s nimi vypořádat? Pokyny naleznete v našich příkladech pole JavaScript.

Přečtěte si další

O autorovi