Javascript Map () – ES6

Javascript Map vs Object

Im Unterschied zu Object hat eine Javascript Map per Vorgabe keine Schlüssel (keys). Schlüssel müssen in der Map gesetzt werden.

map() Keys

new Map erzeugt ein neues Map-Objekt. "Der Schlüssel muss also kein String sein" – ein Key kann alles sein: ein String, ein Object oder ein Array, eine Zahl oder eine Funktion, und selbst ein Emoji als Key funktioniert ohne Weiteres.

Objekte hingegen können nur Integer, Strings oder Symbole als Keys nutzen.

Die Schlüssel-Wert-Paare können wie bei einem normalen Array direkt in der Map angelegt werden.

const fruits = new Map ();

fruits.set ("🥝", "Kiwi");
fruits.set ("🍎", "Apfel");
fruits.set ("🍒", "Kirsche");
fruits.set ("🍉", "Melone");
fruits.set ("🍋", "Zitrone");

Im Unterschied zu Objekten hat map eine Eigenschaft size. size gibt die Zahl der Schlüssel-Wert-Paare zurück.

const mapSize = fruits.size // 5

Bei einer Iteration gibt map die Schlüssel-Wert-Paare in der Reihenfolge zurück, in der sie eingefügt wurden.

map.set ()

Maps können sowohl einfache Werte als auch Objekte enthalten. Die dot-Notation wie in einem herkömmlichen Javascript Object gibt es nicht, dafür semester.get mit dem Schlüssel.

const semester = new Map ();
semester.set ("color management", { excerpt: "Gammut"});
semester.set ("color spaces", {excerpt: AdobeRGB});

Safari
Map {"color management" => {excerpt: "Gammut"}, "color spaces" => {excerpt: "AdobeRGB"}}

Chrome
Map(2)
[[Entries]]
0: {"color management" => Object}
1: {"color spaces" => Object}
size: (...)
__proto__: Map

const exercises = new Map (
	[[new Date (), "heute"],
	['items', [1,2]]]
)
console.log (exercises.size);

exercises.forEach (function (item) {
	console.log (item);
})

2
heute
(2) [1, 2]0: 11: 2length: 2__proto__: Array(0)

map.get ()

get gibt den Wert eines Schlüssel-Wert-Paares zurück. Wenn der Schlüssel nicht existiert, gibt map.get() undefined zurück.

console.log (fruits.get("🥝"));
console.log(fruits.get("🍋"));
console.log(fruits.get("🐡"));

gibt aus

map.has ()

Die Methode map.has () gibt true oder false zurück, je nachdem, ob der Wert in der map existiert oder nicht.

console.log (fruits.has("🥝"));
console.log (fruits.has("🍋"));
console.log (fruits.has("🌹"));

Delete / Clear

delete: Den Schlüssel übergeben, gibt true zurück, wenn das Schlüssel-Wert-Paar gelöscht wurde, sonst false. clear löscht alle Elemente oder Schlüssel-Wert-Paare der Map. Der Rückgabewert ist undefined.

const noCitrus = fruits.delete ("🍋");	// true
const noCats = fruits.delete ("🌹");		// false

fruits.clear ();
console.log (fruits.size) // gibt 0 aus

Entries, Keys und Values

Weder Javascript Map noch Set haben eine Literale Notation. Wir müssen ihren Konstruktor (typischer Weise ein literales Array – alle Schlüssel-Wert-Paare kapseln) nutzen, um ihre Elemente in literaler Schreibweise zu übergeben.

const zoo = new Map ([
	["🐋", "Wal"],
	["🐡", "Kugelfisch"],
	["🐢", "Schildkröte"],
	["🐙", "Oktupus"],
	["🐬", "Delfin"]
]);

const keys = zoo.keys();
console.log (keys);

const firstKey = keys.next().value;
console.log ("firstKey " + firstKey)

const zooValues = zoo.values();
const firstValue = zooValues.next().value;

const animals = zoo.entries();
const first

Map() forEach

forEach arbeitet mit einer Callback-Funktion für jedes Schlüssel-Wert-Paar der Map-Liste.

	map.forEach (value, key, map, thisArg)

zoo.forEach ((value, key) => {
	console.log (`${value} hat das Emoji ${key} `);
	if (key === "🐙") {
		console.log (`${value} wird um 12 Uhr gefüttert*`);
	}
});

Browser-Support

Alle modernen Browser und – siehe da! – IE11, wenn auch nur eingeschränkt.