diff options
Diffstat (limited to 'files/de/web/javascript/guide/keyed_collections/index.html')
-rw-r--r-- | files/de/web/javascript/guide/keyed_collections/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/files/de/web/javascript/guide/keyed_collections/index.html b/files/de/web/javascript/guide/keyed_collections/index.html new file mode 100644 index 0000000000..a9b501da9e --- /dev/null +++ b/files/de/web/javascript/guide/keyed_collections/index.html @@ -0,0 +1,157 @@ +--- +title: Collections mit Schlüssel +slug: Web/JavaScript/Guide/Keyed_collections +tags: + - Collections + - Guide + - JavaScript + - Map + - 'l10n:priority' + - set +translation_of: Web/JavaScript/Guide/Keyed_collections +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div> + +<p class="summary">Dieses Kapitel gibt eine Einleitung in Sammlungen von Daten, welche mit einem Schlüssel verknüpft werden. <code>Map</code> und <code>Set</code> Objekte enthalten Elemente, die in der Reihenfolge ihres Einfügens iterierbar sind.</p> + +<h2 id="Maps">Maps</h2> + +<h3 id="Map_Objekt"><code>Map</code> Objekt</h3> + +<p>ECMAScript 2015 führt eine neue Datenstruktur ein, um Werte auf Werte zu abbildet. Ein {{jsxref("Map")}} Objekt ist eine einfache Schlüssel/Werte-Abbildung und man kann über die Element in der Einfügereihenfolge iterieren.</p> + +<p>Das folgende Beispiel zeigt einige Basisoperationen mit einer <code>Map</code>. Für mehr Beispiele und die komplette API siehe zudem die Referenzseite {{jsxref("Map")}}. Man kann eine {{jsxref("Statements/for...of","for...of")}} Schleife benutzen, um ein Array von <code>[key, value]</code> für jede Iteration zurückzugeben.</p> + +<pre class="brush: js notranslate">var sayings = new Map(); +sayings.set('dog', 'woof'); +sayings.set('cat', 'meow'); +sayings.set('elephant', 'toot'); +sayings.size; // 3 +sayings.get('fox'); // undefined +sayings.has('bird'); // false +sayings.delete('dog'); +sayings.has('dog'); // false + +for (var [key, value] of sayings) { + console.log(key + ' goes ' + value); +} +// "cat goes meow" +// "elephant goes toot" + +sayings.clear(); +sayings.size; // 0 +</pre> + +<h3 id="Object_und_Map_im_Vergleich"><code>Object</code> und <code>Map</code> im Vergleich</h3> + +<p>Traditionell werden {{jsxref("Object", "Objekte", "", 1)}} eingesetzt, um Strings auf Werte abzubilden. Objekte erlauben es Werte zu Schlüsseln zu setzen, diese Werte abzufragen, Schlüssel zu löschen und erkennen, ob etwas zu einem Schlüssel gespeichert wurde. <code>Map</code> Objekte haben ein paar Vorteile, was sie zu besseren Abbildungen macht.</p> + +<ul> + <li>Die Schlüssel eines <code>Object</code> sind {{jsxref("Global_Objects/String","Strings")}}, während bei einer <code>Map</code> jeder Wert möglich ist.</li> + <li>Man kann die Größe einer <code>Map</code> einfach abfragen, während man bei einem Objekt manuell mitzählen muss.</li> + <li>Die Iteration einer <code>Map</code> erfolgt in der Reihenfolge des Einfügens ihrer Elemente.</li> + <li>Ein <code>Object</code> hat einen Prototyp, so dass Standardschlüssel in der <code>Map</code> schon vorhanden sind. (Dies kann mit <code>map = Object.create(null)</code> umgangen werden.)</li> +</ul> + +<p>Diese drei Tipps können bei der Entscheidung für eine <code>Map</code> oder ein <code>Object</code> helfen:</p> + +<ul> + <li>Man sollte Maps bevorzugen, wenn die Schlüssel vor der Laufzeit unbekannt sind und wenn alle Schlüssel den gleichen Typ haben und wenn alle Werte den gleichen Schlüssel haben.</li> + <li>Man sollte Maps in Fällen benutzen, in denen primitive Werte als Schlüssel benutzt werden, weil in Objekten jeder Schlüssel ein String ist egal, ob eigentlich eine Zahl, ein Boolean oder ein anderer primitiver Datentyp vorliegt.</li> + <li>Man sollte Objekte benutzen, wenn es eine Logik gibt, die auf individuellen Elementen angewandt wird.</li> +</ul> + +<h3 id="WeakMap_Objekte"><code>WeakMap</code> Objekte</h3> + +<p>Das {{jsxref("WeakMap")}} Objekt ist eine Collection von Schlüssel/Werte-Paaren, wobei der <strong>Schlüssel nur ein Objekt sein kann</strong> und die Werte willkürliche Werte sein können. Die Objektreferenzen in den Schlüsseln werden <em>weakly</em> gehalten, was bedeutet, dass diese Referenz ein Ziel des Speicherbereinigung (Garbage Collectors (GC)) wird, wenn keine andere Referenz mehr auf dieses Objekt referenziert. Die <code>WeakMap</code> API ist die gleiche wie die <code>Map</code> API.</p> + +<p>Einen Unterschied zu <code>Map</code> Objekten ist, dass <code>WeakMap</code> Schlüssel nicht aufzählbar sind (z. B. gibt es keine Methode, die eine Liste von Schlüsseln zurückgibt). Wenn dies der Fall wäre, würde die Liste vom Zustand der Speicherbereinigung abhängen, was zu Nicht-Determinismus führen würde.</p> + +<p>Für mehr Informationen, Beispiele und "Warum <em>Weak</em>Map" auf der {{jsxref("WeakMap")}} Referenzseite.</p> + +<p>Ein Einsatzgebiet für <code>WeakMap</code>s ist der Einsatz für Private Daten oder das Verbergen von Implementierungsdetails. Das folgende Beispiel ist von Nick Fitzgeralds Blogpost <a href="http://fitzgeraldnick.com/weblog/53/">"Hiding Implementation Details with ECMAScript 6 WeakMaps"</a>. Die privaten Daten und Methoden, die zu dem Objekt gehören, werden in dem WeakMap Objekt <code>privates</code> gespeichert. Alles offene auf der Instanz und dem Prototyp ist Öffentlich; alles andere ist von Außen nicht erreichbar, weil <code>privates</code> vom Modul nicht exportiert wird.</p> + +<pre class="brush: js notranslate">const privates = new WeakMap(); + +function Public() { + const me = { + // Private data goes here + }; + privates.set(this, me); +} + +Public.prototype.method = function() { + const me = privates.get(this); + // Do stuff with private data in `me`... +}; + +module.exports = Public; +</pre> + +<h2 id="Sets">Sets</h2> + +<h3 id="Set_Objekte"><code>Set</code> Objekte</h3> + +<p>{{jsxref("Set")}} Objekte sind Collectionen mit Werten. Man kann über die Elemente in der Einfügereihenfolge iterieren. Ein Wert in einem <code>Set</code> kann nur einmal existieren und ist einzigartig in einer <code>Set</code> Collection.</p> + +<p>Das folgende Beispiel zeigt einige Basisoperationen mit einem <code>Set</code>. Für mehr Beispiele und die komplette API siehe auf der {{jsxref("Set")}} Referenzseite nach.</p> + +<pre class="brush: js notranslate">var mySet = new Set(); +mySet.add(1); +mySet.add('some text'); +mySet.add('foo'); + +mySet.has(1); // true +mySet.delete('foo'); +mySet.size; // 2 + +for (let item of mySet) console.log(item); +// 1 +// "some text" +</pre> + +<h3 id="Konvertierung_zwischen_Arrays_und_Sets">Konvertierung zwischen Arrays und Sets</h3> + +<p>Man kann ein {{jsxref("Array")}} von einem Set erstellen, indem {{jsxref("Array.from")}} oder der <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread Operator</a> eingesetzt wird. Zudem akzeptiert der <code>Set</code> Konstruktor ein <code>Array</code>, um es in die andere Richtung zu konvertieren. Wichtig ist aber, dass <code>Set</code> Objekte Werte nur einmalig Speichern, so dass jedes Elementduplikat aus dem Array beim Konvertieren gelöscht wird.</p> + +<pre class="brush: js notranslate">Array.from(mySet); +[...mySet2]; + +mySet2 = new Set([1, 2, 3, 4]); +</pre> + +<h3 id="Array_und_Set_im_Vergleich"><code>Array</code> und <code>Set</code> im Vergleich</h3> + +<p>Traditionell wird eine Menge von Objekten in vielen Situationen in JavaScript in Arrays gespeichert. Das neue <code>Set</code> Objekt hat aber einige Vorteile:</p> + +<ul> + <li>Das Prüfen, ob ein Element in einer Collection schon existiert mit {{jsxref("Array.indexOf")}} ist in Arrays langsamer.</li> + <li>In <code>Set</code> Objekte lassen sich Elemente löschen. Mit einem Array entsteht an dem Element Index eine Lücke, bzw. sie wird geschlossen.</li> + <li>Der Wert {{jsxref("NaN")}} kan in einem Array nicht mit <code>indexOf</code> gefunden werden.</li> + <li><code>Set</code> Objekte erlauben nur eindeutige Objekte; man muss sich nicht selber um Duplikate kümmern.</li> +</ul> + +<h3 id="WeakSet_Objekte"><code>WeakSet</code> Objekte</h3> + +<p>{{jsxref("WeakSet")}} Objekte sind Collections von Objekten. Ein Objekt in einer <code>WeakSet</code> gibt es nur einmal; es ist einzigartig in der <code>WeakSet</code> Collection und Objekte sind nicht aufzählbar.</p> + +<p>Die Hauptunterschiede zu einem {{jsxref("Set")}} Objekt sind:</p> + +<ul> + <li>Im Gegensatz zu <code>Sets</code>, ist <code>WeakSets</code> eine <strong>Collection von nur Objekten</strong> und nicht von beliebigen Werten von jedem Typ.</li> + <li>Das <code>WeakSet</code> ist <em>weak: </em>Referenzen in in der Collection sind <em>weakly</em> gehalten. Was gedeutet, dass wenn es keine weitere Referenz auf eine Objekt in dem <code>WeakSet</code> gibt, der Speicher geleert werden kann. Das bedeutet auch, dass es keine Liste gibt, die die aktuellen Objekte der Collection enthält. <code>WeakSets</code> sind nicht Aufzählbar.</li> +</ul> + +<p>Die Einsatzgebiete von <code>WeakSet</code> Objekten sind begrenzt. Sie erzeugen keine Speicherlecks, so dass sie sicher DOM Elemente enthalten können, um sie zum Beispiel zu verfolgen.</p> + +<h2 id="Schlüssel-_und_Wertegleichheit_von_Map_und_Set">Schlüssel- und Wertegleichheit von <code>Map</code> und <code>Set</code></h2> + +<p>Beide, die Schlüsselgleichheit von <code>Map</code> Objekten und die Wertegleichheit von <code>Set</code> Objekten basieren auf dem "<a href="https://tc39.github.io/ecma262/#sec-samevaluezero">same-value-zero Algorithmus</a>":</p> + +<ul> + <li>Gleichheit funktioniert wie der Identitätsvergleichsoperator <code>===</code>.</li> + <li><code>-0</code> and <code>+0</code> werden als gleich angenommen.</li> + <li>{{jsxref("NaN")}} wird als gleich zu sich selbst angenommen (im Gegensatz zu <code>===</code>).</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p> |