Javascript Map – Äquivalent zu assoziativen Arrays

Javascript Map vs Object

Im Unterschied zu Object hat eine Javascript Map per Vorgabe keine Schlüssel (key). 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 einwohner = new Map([
	["Berlin", 3902645],
	["Düsseldorf", 618700],
	["Köln",  1024621],
	["Hamburg", 1862565]
]);

console.log(einwohner.get("Berlin"));// 3902645
console.log(einwohner.get("Köln"));  // 1024621

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

console.log(einwohner.size);         // 4

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 einwohner.get mit dem Schlüssel. einwohner.set(key, value) fügt ein neues Schlüssel-Wert-Paar hinzu oder überschreibt den Wert, falls der Key schon existiert.

einwohner.set("München", 1605094) 

Map und Iteration – eine Map durchlaufen

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

<table id="mapTable">
	<thead>
		<tr>
			<th>Key</th>
			<th>Value</th>
		</tr>
	</thead>
	<tbody>
		<!-- Zeilen einfügen -->
	</tbody>
</table>

const tbody = document.querySelector("#mapTable tbody");

// Map durchlaufen und Zeilen erzeugen
for (const [key, value] of einwohner) {
	const tr = document.createElement("tr");

	const tdKey = document.createElement("td");
	tdKey.textContent = key;
	tr.appendChild(tdKey);

	const tdValue = document.createElement("td");
	tr.appendChild(tdValue);

	tbody.appendChild(tr);
}

Sowohl for (const [key,value]) als auch forEach() funktionieren bei der Iteration über eine JavaScript Map.

for (const [key, value] of einwohner) {
  console.log(key, value);
  document.querySelector(".ew").textContent = 
}

einwohner.forEach((value, key) => {
  console.log(key, value);
});

map.has ()

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

document.querySelector("#einw").innerHTML += 
	`Frankfurt ist in der Map ${einwohner.has("Frankfurt")} \n`;

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 munch = einwohner.delete("München");	// true

console.log (einwohner.size) // gibt 4 aus

JavaScript Map und JSON

Maps sind keine Objekte, man kann sie nicht direkt JSON.stringify-en. Aber über Array-Konvertierung geht’s dann doch:

console.log("Array", Array.from(einwohner));
console.log(JSON.stringify(Array.from(einwohner)));