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íčů.

Mapa má vlastnost, která představuje velikost mapy.

Mapové metody

new Map(): Vytvoří nový objekt mapy
set(): Nastavuje hodnotu klíče v mapě
get(): Získá hodnotu klíče v mapě
clear(): Odstraní všechny prvky z mapy
delete(): Odstraní prvek mapy určený klíčem
has(): Vrátí hodnotu true, pokud v mapě existuje klíč
forEach(): Vyvolá zpětné volání pro každý pár klíč/hodnota v mapě
entries(): Vrátí objekt iterátoru s páry [klíč, hodnota] v mapě
keys(): Vrátí objekt iterátoru s klíči v mapě
values(): Vrátí objekt iterátoru hodnot v mapě

size: Vrátí počet prvků mapy

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()

`nová mapa()`

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>

`Map.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", 500);

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>

`Map.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>

`Map.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>

`Map.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>

`Map.clear()`

Metoda clear() odstraní z mapy všechny prvky:

Příklad

fruits.clear();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Clearing a Map:</p>

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

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

// Clear the Map
fruits.clear();

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

</body>
</html>

`Map.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>

Mapy jsou objekty

typeof vrací objekt:

Příklad

// Returns object:
typeof fruits;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map typeof:</p>

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

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

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

</body>
</html>

instanceof Mapa vrátí hodnotu true:

Příklad

// Returns true:
fruits instanceof Map;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map instanceof:</p>

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

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

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

</body>
</html>

Objekty JavaScript vs mapy

Rozdíly mezi objekty JavaScriptu a mapami:

Not directly iterable: Přímo iterovatelné
Do not have a size property: Mít vlastnost velikosti
Keys must be Strings (or Symbols): Klíče mohou být libovolného datového typu
Keys are not well ordered: Klíče se objednávají vložením
Have default keys: Nemáte výchozí klíče

`Map.forEach()`

Metoda forEach() vyvolá zpětné volání 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>

`Map.entries()`

Metoda entries() vrací objekt iterátoru s [key,values] 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>

`Map.keys()`

Metoda keys() vrací objekt iterátoru s klíči v mapě:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.keys():</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.keys()) {
  text += x + "<br>";
}

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

</body>
</html>

`Map.values()`

Metoda values() vrací objekt iterátoru s hodnotami v mapě:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</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.values()) {
  text += x + "<br>";
}

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

</body>
</html>

K sečtení hodnot v mapě můžete použít metodu values():

Příklad

// Sum all values
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Zkuste to sami →

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

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

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

let total = 0;
for (const x of fruits.values()) {
  total += x;
}

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

</body>
</html>

Objekty jako klíče

Schopnost používat objekty jako klíče je důležitou funkcí mapy.

Příklad

// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add new Elements to the Map
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>Being able to use objects as keys is an important Map feature:</p>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add the Objects to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

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

</body>
</html>

Pamatujte: Klíč je objekt (jablka), nikoli řetězec ("jablka"):

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</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