Map und Set
Dauer: 20 Minuten
- Map als Alternative zu Objekten
- Set anstatt Array verhindert doppelte Werte
Ziel: Datenstrukturen Map und Set als Ergänzung
Hier werden zwei weitere Datenstrukturen in
JavaScript vorgestellt: Map
und Set
.
Map
stellt im Prinzip eine „Erweiterung“ von
JavaScript-Objekten mit nützlichen Hilfsmethoden
dar. Set
kann als
Alternative zu Arrays hilfreich sein, wenn jeder
Eintrag nur höchstens einmal vorkommen darf
(wie bei einer Menge in der Mathematik).
Map
Mit Map
steht eine Alternative zu
JavaScript-Objekten zur Verfügung. Es gibt
einige Unterschiede zwischen Map
und Objekte,
wie hier in MDN beschrieben.
Insbesondere hat Map
eine optimierte Performance,
und es gibt einige Hilfsmethoden in Map
. Eine
Map
wird mit new Map()
erzeugt und mit
get
und set
stehen Methoden zum Setzen und
Auslesen von Werten bereit:
const cities = new Map();
cities.set('FR', 'Freiburg');
cities.set('OG', 'Offenburg');
cities.set('LÖ', 'Lörrach');
console.log(cities.get('OG')); // Offenburg
console.log("Anzahl Städte: " + cities.size);
map.size
(keine Methode!) ergibt die
Anzahl der Einträge.
Eine Map
kann auf unterschiedliche Arten
durchlaufen werden:
// nur die Schlüssel
for (let cityCode of cities.keys()) {
console.log(cityCode);
// FR, OG, LÖ
}
// nur die Werte
for (let cityName of cities.values()) {
console.log(cityName);
// Freiburg, Offenburg, Lörrach
}
// alle Schlüssel/Wert-Paare
for (let entry of cities) {
console.log(entry);
// [ 'FR', 'Freiburg' ]
// [ 'OG', 'Offenburg' ]
// [ 'LÖ', 'Lörrach' ]
}
Hilfreich sind u.a. diese Map
-Methoden:
map.delete(key)
— löscht einen Eintragmap.clear()
— löscht alle Einträge
Leider funktioniert eine Map
nicht direkt
mit JSON (stringify
, parse
) wie es bei
Objekten der Fall ist. Mehr Infos zum Umgang
mit JSON bei einer Map
hier:
https://stackoverflow.com/questions/29085197/how-do-you-json-stringify-an-es6-map
Set
Falls eine Liste erstellt werden soll, die
keine doppelten Einträge enthalten darf, dann
ist Set
eine passende Alternative zu einem
Array. Erstellt wird ein Set
mit new Set()
und das Hinzufügen erfolgt mit add()
:
const cities = new Set();
cities.add('Freiburg');
cities.add('Karlsruhe');
cities.add('Basel');
Ein Set
kann mit for
durchlaufen werden:
for (let city of cities) {
console.log(city);
// Freiburg
// Karlsruhe
// Basel
}
Mit has()
kann überprüft werden, ob ein
Eintrag bereits vorhanden ist. Doppelte
Einträge werden vermieden:
console.log(cities.has('Karlsruhe')); // true
console.log(cities.size); // --> 3
cities.add('Karlsruhe');
console.log(cities.size); // --> 3
Hilfreich sind u.a. diese Set
-Methoden:
set.delete(value)
— löscht einen Eintragset.clear()
— löscht alle Einträge
Soll ein Set
im JSON-Format ausgegeben werden,
dann kann ein Set
zunächst in ein gewöhnliches
Array
umgewandelt werden. Dazu steht eine Methode
Array.from(mySet)
bereit. Mit JSON.stringify()
kann das Array
nun wie gewohnt als JSON
verarbeitet werden. Umgekehrt kann mit
new Set(myArray)
aus einem Array
wieder ein
Set
erzeugt werden:
const citiesSet = new Set();
citiesSet.add('Freiburg');
citiesSet.add('Karlsruhe');
citiesSet.add('Basel');
const citiesArray = Array.from(citiesSet);
console.log(citiesArray);
// [ 'Freiburg', 'Karlsruhe', 'Basel' ]
const newCitySet = new Set(citiesArray);
console.log(newCitySet);
// Set { 'Freiburg', 'Karlsruhe', 'Basel' }
Vertiefendes Material