JavaScriptové mapy

Obsah

    Zobrazit obsah

Mapa obsahuje páry klíč-hodnota, kde klíče mohou být libovolného datového typu.

Mapa si pamatuje původní pořadí vložení klíčů.

Základní mapové metody

new Map()

Vytvoří novou mapu

set()

Nastavuje hodnotu klíče v mapě

get()

Získá hodnotu klíče v mapě

delete()

Odebere prvek mapy určený klíčem

has()

Vrátí hodnotu true, pokud v mapě existuje klíč

forEach()

Volá funkci pro každý pár klíč/hodnota v mapě

entries()

Vrátí iterátor s páry [klíč, hodnota] v mapě

size

Vrátí počet prvků v mapě

Jak vytvořit mapu

Mapu JavaScript můžete vytvořit takto:

  • Předání pole do nové Map()

  • Vytvořte mapu a použijte Map.set()

Metoda new Map()

Mapu můžete vytvořit předáním pole konstruktoru new Map():

Příklad

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Metoda set()

Prvky do mapy můžete přidat pomocí metody set():

Příklad

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Metodu set() lze také použít ke změně stávajících hodnot mapy:

Příklad

fruits.set("apples", 200);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

fruits.set("apples", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Metoda get()

Metoda get() získává hodnotu klíče v mapě:

Příklad

fruits.get("apples");    // Returns 500

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Vlastnost size

Vlastnost size vrací počet prvků v mapě:

Příklad

fruits.size;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

Metoda delete()

Metoda delete() odstraní prvek mapy:

Příklad

fruits.delete("apples");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

Metoda has()

Metoda has() vrátí hodnotu true, pokud v mapě existuje klíč:

Příklad

fruits.has("apples");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

Zkuste to:

fruits.delete("apples");
fruits.has("apples");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

Objekty JavaScript vs mapy

Rozdíly mezi objekty JavaScriptu a mapami:

Objekt

Iterovatelný: Není přímo iterovatelný

Velikost: Nemejte vlastnost size

Typy klíčů: Klíče musí být řetězce (nebo symboly)

Pořadí klíčů: Klíče nejsou dobře seřazeny

Výchozí: Mají výchozí klíče

Mapa

Iterovatelný: Přímo iterovatelný

Velikost: Mějte vlastnost size

Typy klíčů: Klíče mohou být libovolného datového typu

Pořadí klíčů: Klíče jsou seřazeny podle vložení

Výchozí: Nemáte výchozí klíče

Metoda forEach()

Metoda forEach() volá funkci pro každý pár klíč/hodnota v mapě:

Příklad

// List all entries
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Metoda entries()

Metoda entries() vrací objekt iterátoru s [klíč, hodnoty] v mapě:

Příklad

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.entries()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Podpora prohlížeče

Mapy JavaScript jsou podporovány ve všech prohlížečích kromě Internet Exploreru:

Chrome Edge Firefox Safari Opera