JavaScript térképek

Tartalomjegyzék

Tartalomjegyzék megjelenítése

A térkép kulcs-érték párokat tartalmaz, ahol a kulcsok bármilyen adattípusúak lehetnek.

A térkép megjegyzi a kulcsok eredeti beillesztési sorrendjét.

A térképnek van egy tulajdonsága, amely a térkép méretét reprezentálja.

Térkép módszerek

new Map(): Új térképobjektumot hoz létre
set(): Beállítja egy kulcs értékét a térképen
get(): Lekéri egy kulcs értékét a térképen
clear(): Eltávolítja az összes elemet a térképről
delete(): Eltávolítja a kulcs által meghatározott térképelemet
has(): Igaz értéket ad vissza, ha van kulcs a térképen
forEach(): Visszahívást hív meg minden egyes kulcs/érték párhoz a térképen
entries(): Egy iterátor objektumot ad vissza a [kulcs, érték] párokkal a térképen
keys(): Egy iterátor objektumot ad vissza a kulcsokkal a térképen
values(): Egy iterátor objektumot ad vissza a térképen lévő értékekből

size: A térképelemek számát adja vissza

Hogyan készítsünk térképet

JavaScript-térképet a következő módon hozhat létre:

Tömb átadása az new Map()-nak
Hozzon létre egy térképet, és használja a Map.set() parancsot

`új térkép()`

Létrehozhat egy térképet, ha átad egy tömböt az új Map() konstruktornak:

Példa

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

Próbálja ki Ön is →

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

A térképhez elemeket adhat hozzá a set() metódussal:

Példa

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

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

Próbálja ki Ön is →

<!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>

A set() metódus a meglévő térképértékek módosítására is használható:

Példa

fruits.set("apples", 500);

Próbálja ki Ön is →

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

A get() metódus lekéri egy kulcs értékét a térképen:

Példa

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

Próbálja ki Ön is →

<!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`

A size tulajdonság a térkép elemeinek számát adja vissza:

Példa

fruits.size;

Próbálja ki Ön is →

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

A delete() metódus eltávolít egy térképelemet:

Példa

fruits.delete("apples");

Próbálja ki Ön is →

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

A clear() metódus eltávolítja az összes elemet a térképről:

Példa

fruits.clear();

Próbálja ki Ön is →

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

A has() metódus igazat ad vissza, ha egy kulcs létezik a térképen:

Példa

fruits.has("apples");

Próbálja ki Ön is →

<!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>

Próbáld ezt:

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

Próbálja ki Ön is →

<!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>

A térképek objektumok

A typeof objektumot adja vissza:

Példa

// Returns object:
typeof fruits;

Próbálja ki Ön is →

<!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>

Az példány Map értéke true:

Példa

// Returns true:
fruits instanceof Map;

Próbálja ki Ön is →

<!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>

JavaScript objektumok vs Maps

A JavaScript objektumok és a térképek közötti különbségek:

Not directly iterable: Közvetlenül iterálható
Do not have a size property: Legyen méretű tulajdonsága
Keys must be Strings (or Symbols): A kulcsok bármilyen adattípusúak lehetnek
Keys are not well ordered: A kulcsok sorrendje behelyezéssel történik
Have default keys: Nincsenek alapértelmezett kulcsai

`Map.forEach()`

A forEach() metódus egy visszahívást hív meg a Map minden egyes kulcs/érték párjához:

Példa

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

Próbálja ki Ön is →

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

Az entries() metódus egy iterátor objektumot ad vissza a [kulcs,értékek] térképen:

Példa

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

Próbálja ki Ön is →

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

A keys() metódus egy iterátor objektumot ad vissza a kulcsokkal a térképen:

Példa

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

Próbálja ki Ön is →

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

A values() metódus egy iterátor objektumot ad vissza a térképen szereplő értékekkel:

Példa

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

Próbálja ki Ön is →

<!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>

A values() metódus segítségével összegezheti az értékeket a térképen:

Példa

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

Próbálja ki Ön is →

<!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>

Objektumok kulcsként

Az objektumok kulcsként való használatának lehetősége a térkép fontos funkciója.

Példa

// 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);

Próbálja ki Ön is →

<!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>

Ne feledje: A kulcs egy objektum (almák), nem egy karakterlánc ("almák"):

Példa

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

Próbálja ki Ön is →

<!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>

Böngésző támogatás

A JavaScript térképeket minden böngésző támogatja, kivéve az Internet Explorert:


Chrome	Edge	Firefox	Safari	Opera