Meta tags:
description=In diesem Kapitel lernen Sie Map und Set in JavaScript kennen – Datenstrukturen, die JavaScript um nützliche Fähigkeiten erweitern.;

Headings (most frequently used words):

map, set, und, ein, javascript, verwenden, vs, object, wann, sollte, man, eine, über, iterieren, array, reales, szenario, worthäufigkeitszähler, methoden, übersicht, übung, einfaches, maps, erstellen, bearbeiten, beliebige, werte, als, schlüssel, zwischen, konvertieren, mit, sets, arbeiten, deduplizieren, der, häufigste, anwendungsfall, vereinigung, schnittmenge, differenz,

Text of the page (most frequently used words):
map (85), set (75), und (74), javascript (34), sie (27), schlüssel (26), let (26), console (25), ein (24), log (24), new (23), eine (21), #object (21), value (19), api (19), dom (19), die (18), key (18), lernen (16), ist (16), array (16), mit (15), methoden (14), der (13), werte (12), verwenden (12), wert (11), size (11), oder (11), for (11), das (10), von (10), einem (10), werden (10), wenn (10), string (10), objects (9), has (9), get (9), run (9), editable (9), html (8), web (8), eines (8), sind (8), foreach (8), können (7), the (7), true (7), name (7), für (6), json (6), tools (6), anzahl (6), eigenschaften (6), entries (6), wie (6), w3docs (5), code (5), sammlung (5), benötigen (5), arrays (5), iterieren (5), duplikate (5), add (5), erstellen (5), keys (5), counts (5), word (5), sets (5), iterable (5), alice (5), prices (5), function (5), nan (5), funktionen (5), events (5), formatter (5), color (5), alle (4), über (4), generator (4), css (4), weakmap (4), weakset (4), was (4), prüfen (4), nicht (4), einer (4), delete (4), entfernen (4), hinzufügen (4), values (4), obj (4), als (4), union (4), intersection (4), difference (4), aber (4), apple (4), banana (4), fruit (4), aus (4), entfernt (4), einen (4), gibt (4), zurück (4), sodass (4), age (4), one (4), einfaches (4), shadow (4), fetch (4), async (4), einführung (4), encoder (3), editor (3), quizze (3), übungen (3), php (3), übung (3), this (3), page (3), iterables (3), keine (3), paaren (3), eindeutiger (3), kann (3), alles (3), bleiben (3), deduplizieren (3), cat (3), unique (3), einfachen (3), filter (3), fruits (3), einfügereihenfolge (3), aufrufe (3), verkettet (3), wann (3), man (3), ohne (3), admin (3), den (3), iteriert (3), user (3), maps (3), benutzerdefinierte (3), strings (3), muster (3), erweitern (3), flag (3), document (3), data (3), browser (3), objekte (3), event (3), and (3), promise (3), objekt (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), übersicht (2), reales (2), szenario (2), worthäufigkeitszähler (2), nur (2), möglich (2), auf (2), element (2), position (2), typ (2), verwendet (2), während (2), einige (2), daten (2), garantierte (2), verkettbar (2), ignoriert (2), operation (2), fromentries (2), auch (2), daher (2), dem (2), spread (2), operator (2), destructuring (2), bietet (2), garbage (2), text (2), sat (2), mat (2), ran (2), count (2), dieses (2), oft (2), jedes (2), wort (2), machen (2), eingebaute (2), cherry (2), numbers (2), häufigste (2), wieder (2), clear (2), vorhanden (2), fügt (2), hinzu (2), erstellt (2), optional (2), arbeiten (2), bei (2), konvertierung (2), zwischen (2), häufig (2), greifen (2), statt (2), sollte (2), backtoobj (2), umgewandelt (2), iterator (2), price (2), standard (2), funktioniert (2), direkt (2), greet (2), number (2), even (2), works (2), beliebige (2), paare (2), paar (2), immer (2), length (2), zahlen (2), kapitel (2), workers (2), file (2), suche (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), microtasks (2), formulare (2), ereignisse (2), styles (2), klassen (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), arrow (2), syntax (2), variablen (2), functions (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, speichert, anhand, seiner, zuzugreifen, beliebigem, sein, zurückzugeben, geordnet, ungeordnet, schlüsseln, häufige, aktualisierungen, reihenfolge, schnellen, zugehörigkeitsprüfungen, andere, einfache, richtigen, werkzeuge, faustregel, lesen, aktualisieren, sowohl, funktionieren, darüber, hinaus, deren, vom, collector, erfasst, mehr, dazu, unserer, seite, info, split, words, beispiel, zeigt, warum, überlegen, wir, zählen, satz, vorkommt, echte, sofort, verfügbar, besteht, kein, risiko, dass, geerbten, eigenschaftsnamen, kollidiert, everything, either, both, but, not, klassische, mengenoperationen, einfach, moderne, engines, bieten, hier, portable, ansatz, vereinigung, schnittmenge, differenz, unterstützen, grund, duplikaten, wandeln, arr, anwendungsfall, duplicate, ignored, beliebigen, indexreihenfolge, beiden, jederzeit, reduce, schnell, gut, lesbar, mal, gesamte, durchsucht, includes, zugehörigkeit, testen, lehnt, automatisch, vor, nie, müssen, eindeutigkeit, wichtig, jeder, einmal, vorkommen, eng, verwandt, indexzugriff, einträgen, konvertieren, default, costs, führt, callback, jeden, eintrag, drei, sowie, john, gegensatz, behält, unverändert, zahl, unterschiedliche, vergleich, per, referenz, zurückgibt, existiert, ruft, undefined, aktualisiert, unterstützt, folgende, bearbeiten, feste, bekannte, struktur, haben, record, serialisierung, stringify, erbt, hat, solchen, eingebauten, niemals, damit, kollidieren, constructor, tostring, prototype, kollisionen, vermeiden, möchten, iterationsreihenfolge, häufiges, einfügen, löschen, optimiert, liefert, wird, benötigt, einträge, symbolen, erlaubt, sogar, ähnlich, wichtigen, unterschieden, vielen, situationen, zur, besseren, wahl, behandelt, zwei, schlüsselsammlungen, modernem, eingeführt, wurden, eindeutige, erfahren, leisten, welche, alltag, tatsächlich, einsetzen, etwa, häufigkeitszählers, anstelle, sollten, diesem, kennen, datenstrukturen, nützliche, fähigkeiten, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, erfassungsgruppen, gierige, faule, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, methode, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, dokument, verändern, attribute, knoteneigenschaften, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, fehler, try, catch, mixins, checking, instanceof, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, alte, var, scope, rest, parameter, rekursion, stack, tojson, datum, uhrzeit, assignment, math, primitiven, types, konstruktor, primitiv, symbol, typen, collection, objektmethoden, kopieren, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
lernen javascript lernen git lernen java lernen php lernen python lernen kurse quizze übungen snippets tools general tools html editor password generator html encoder code diff json beautifier alle 13 color tools color picker color converter color mixer color hex colors hsl alle 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder alle 19 code formatters javascript formatter css formatter html formatter json formatter php formatter w3docs durchsuchen k de english en deutsch de русский ru français fr español es português pt italiano it anmelden javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript map und set in diesem kapitel lernen sie map und set in javascript kennen datenstrukturen die javascript um nützliche fähigkeiten erweitern dieses kapitel behandelt zwei schlüsselsammlungen die in modernem javascript eingeführt wurden map schlüssel wert paare und set eindeutige werte sie erfahren was sie leisten wann sie sie anstelle von einfachen objects und arrays verwenden sollten wie man über sie iteriert und welche muster sie im alltag tatsächlich einsetzen werden etwa das deduplizieren eines array oder das erstellen eines häufigkeitszählers javascript map eine map ist eine sammlung von schlüssel wert paaren ähnlich wie ein einfaches object aber mit wichtigen unterschieden die sie in vielen situationen zur besseren wahl machen map vs einfaches object wann sollte man eine map verwenden greifen sie zu einer map statt eines einfachen object wenn schlüssel keine strings sind object schlüssel werden immer zu strings oder symbolen umgewandelt eine map erlaubt es beliebige werte als schlüssel zu verwenden objects funktionen zahlen oder sogar nan sie häufig einträge hinzufügen und entfernen maps sind für häufiges einfügen und löschen optimiert und map size liefert die anzahl direkt bei objects wird object keys obj length benötigt sie eine garantierte iterationsreihenfolge benötigen eine map iteriert immer in einfügereihenfolge sie prototype kollisionen vermeiden möchten ein einfaches object erbt schlüssel wie tostring und constructor eine map hat keine solchen eingebauten schlüssel sodass benutzerdefinierte schlüssel niemals damit kollidieren können verwenden sie ein einfaches object wenn die daten eine feste bekannte struktur haben ein record oder wenn sie json serialisierung benötigen json stringify funktioniert mit objects nicht aber mit maps maps erstellen und bearbeiten um eine map zu erstellen verwenden sie new map sie unterstützt folgende methoden und eigenschaften map set key value fügt ein schlüssel wert paar hinzu oder aktualisiert es gibt die map zurück sodass aufrufe verkettet werden können map get key ruft den wert für einen schlüssel ab undefined wenn er nicht vorhanden ist map has key gibt true zurück wenn der schlüssel existiert map delete key entfernt ein schlüssel wert paar map clear entfernt alles map size die anzahl der schlüssel wert paare da set die map zurückgibt können aufrufe verkettet werden javascript editable run let map new map set name alice set age 30 set admin true console log map get name alice console log map has age true console log map size 3 beliebige werte als schlüssel verwenden im gegensatz zu objects behält eine map schlüssel unverändert die zahl 1 und der string 1 sind unterschiedliche schlüssel und objects oder funktionen können als schlüssel verwendet werden vergleich per referenz javascript editable run let map new map let user name john function greet map set user is an object key map set greet is a function key map set 1 number one map set 1 string one map set nan even nan works console log map get user is an object key console log map get 1 number one console log map get 1 string one console log map get nan even nan works console log map size 5 über eine map iterieren eine map iteriert in einfügereihenfolge und bietet drei iterator methoden sowie foreach map keys ein iterable der schlüssel map values ein iterable der werte map entries ein iterable von key value paaren das ist der standard daher funktioniert for of map direkt map foreach value key führt einen callback für jeden eintrag aus javascript editable run let prices new map apple 1 2 banana 0 8 cherry 3 5 for let key of prices keys console log key key for let value of prices values console log value value entries is the default iterator for let fruit price of prices console log fruit costs price prices foreach value key console log key value zwischen map und object konvertieren eine map kann aus den einträgen eines object erstellt und wieder in eines umgewandelt werden javascript editable run let obj name alice age 30 object map let map new map object entries obj console log map get name alice map object map set admin true let backtoobj object fromentries map console log backtoobj name alice age 30 admin true javascript set ein set ist eine sammlung eindeutiger werte jeder wert kann nur einmal vorkommen es ist eng mit einem array verwandt aber ohne duplikate und ohne indexzugriff set vs array wann sollte man ein set verwenden greifen sie zu einem set statt eines array wenn eindeutigkeit wichtig ist ein set lehnt duplikate automatisch ab sodass sie vor dem hinzufügen nie prüfen müssen sie die zugehörigkeit häufig testen set has value ist schnell und gut lesbar während array includes value jedes mal das gesamte array durchsucht bleiben sie bei einem array wenn sie indexreihenfolge duplikate oder array methoden wie map filter reduce benötigen eine konvertierung zwischen beiden ist jederzeit möglich mit sets arbeiten new set iterable erstellt ein set optional aus einem array oder einem beliebigen iterable set add value fügt einen wert hinzu gibt das set zurück sodass aufrufe verkettet werden können duplikate werden ignoriert set has value gibt true zurück wenn der wert vorhanden ist set delete value entfernt einen wert set size die anzahl der werte set clear entfernt alles javascript editable run let set new set set add apple set add banana set add apple duplicate ignored console log set has banana true console log set size 2 ein array deduplizieren der häufigste anwendungsfall der häufigste grund ein set zu verwenden ist das entfernen von duplikaten aus einem array wandeln sie das set mit new set arr wieder in ein array um javascript editable run let numbers 1 2 2 3 4 4 4 5 let unique new set numbers console log unique 1 2 3 4 5 über ein set iterieren sets iterieren in einfügereihenfolge und unterstützen for of und foreach javascript editable run let fruits new set apple banana cherry for let fruit of fruits console log fruit fruits foreach value console log foreach value vereinigung schnittmenge und differenz sets machen klassische mengenoperationen einfach moderne engines bieten auch eingebaute methoden wie set union set intersection und set difference aber hier ist der portable ansatz mit arrays javascript editable run let a new set 1 2 3 4 let b new set 3 4 5 6 union everything in either set let union new set a b console log union 1 2 3 4 5 6 intersection in both sets let intersection new set a filter x b has x console log intersection 3 4 difference in a but not in b let difference new set a filter x b has x console log difference 1 2 ein reales szenario worthäufigkeitszähler dieses beispiel zeigt warum eine map einem einfachen object oft überlegen ist wir zählen wie oft jedes wort in einem satz vorkommt mit einer map bleiben schlüssel echte string werte size ist sofort verfügbar und es besteht kein risiko dass ein wort mit einem geerbten eigenschaftsnamen kollidiert javascript editable run let text the cat sat on the mat the cat ran let counts new map for let word of text split counts set word counts get word 0 1 for let word count of counts console log word count the 3 cat 2 sat 1 on 1 mat 1 ran 1 console log unique words counts size 6 i info sowohl map als auch set sind iterables daher funktionieren sie mit for of dem spread operator und destructuring darüber hinaus bietet javascript weakmap und weakset deren schlüssel vom garbage collector erfasst werden können mehr dazu auf unserer seite javascript weakmap und weakset methoden übersicht map operation code erstellen new map oder new map object entries obj hinzufügen aktualisieren map set key value verkettbar lesen map get key prüfen map has key entfernen map delete key anzahl map size iterieren for let k v of map map keys map values map entries map foreach zu object object fromentries map set operation code erstellen new set oder new set array hinzufügen set add value verkettbar ignoriert duplikate prüfen set has value entfernen set delete value anzahl set size iterieren for let v of set set foreach array deduplizieren new set array faustregel verwenden sie eine map wenn sie schlüssel daten mit nicht string schlüsseln häufige aktualisierungen oder garantierte reihenfolge benötigen verwenden sie ein set wenn sie eine sammlung eindeutiger werte mit schnellen zugehörigkeitsprüfungen benötigen für alles andere bleiben einfache objects und arrays die richtigen werkzeuge übung übung was sind einige eigenschaften von javascript map und set was sind einige eigenschaften von javascript map und set die schlüssel einer map sind geordnet während die schlüssel eines set ungeordnet sind in einem set kann size verwendet werden um die anzahl der werte zurückzugeben in einer map können schlüssel und werte von beliebigem typ sein eine map ist eine sammlung von schlüssel wert paaren und ein set ist eine sammlung eindeutiger werte es ist nicht möglich auf ein element eines set anhand seiner position zuzugreifen ein set speichert nur schlüssel keine werte prüfen was this page helpful yes no previous js iterables next js weakmap und weakset on this page javascript map javascript set ein reales szenario worthäufigkeitszähler methoden übersicht übung w3docs kostenlose tutorials beispiele übungen snippets und quizze für das web seit 2014 bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen üben übungen quizze probier editor tools html editor password generator html encoder code diff json beautifier unternehmen über uns kontakt datenschutzrichtlinie sprache english deutsch русский français español português italiano 2026 w3docs alle rechte...