1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
|
---
title: Map
slug: Web/JavaScript/Reference/Global_Objects/Map
tags:
- ECMAScript 2015
- JavaScript
- Map
translation_of: Web/JavaScript/Reference/Global_Objects/Map
---
<div>{{JSRef}}</div>
<div>Das <code><strong>Map</strong></code> Objekt ist eine einfache Schlüssel/Wert Zuordnung. Jeder Wert (Sowohl Objekte, als auch {{Glossary("Primitive", "primitive Datentypen")}}) kann als Schlüssel/Wert verwendet werden.</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">new Map([iterable])</pre>
<h3 id="Parameter">Parameter</h3>
<dl>
<dt><code>iterable</code></dt>
<dd>
<p class="syntaxbox">Der Parameter <code>iterable</code> ist ein Array oder anderes iterierbares Objekt, dessen Elemente Schlüssel-Wert Paare (2-Element Arrays) sind. Jedes Schlüssel-Wert Paar wird der neuen Map hinzugefügt.</p>
</dd>
</dl>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Ein Map Object iteriert in der Reihenfolge des Einfügens über seine Elemente — eine {{jsxref("Statements/for...of", "for...of")}} Schleife gibt ein Array mit <code>[key, value]</code> für jede Iteration zurück.</p>
<p>Es ist festzuhalten, dass eine <code>Map</code>, bestehend aus <code>objects</code>, insbesondere ein "<code>dictionary of dictionaries</code>", nur nach der Einfügereihenfolge angelegt wird, die zufällig und ungeordnet ist.</p>
<h3 id="Schlüsselvergleich">Schlüsselvergleich</h3>
<p>Der Schlüsselvergleich basiert auf dem "gleicher-Wert" Algorithmus: <code>NaN</code> wird als gleich mit einer anderen <code>NaN</code> angesehen (trotz dem, dass <code>NaN !== NaN</code>) und alle anderen Werte müssen typ- und wert identisch, wie beim <code>===</code> Operator, sein. In der aktuellen ECMAScript Spezifikation werden <code>-0</code> und <code>+0</code> als gleich behandelt, auch wenn dies in früheren Entwürfen anders war. Details dazu sind der Tabelle <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Map$edit#Browser_compatibility">browser compatibility </a>zu entnehmen. </p>
<h3 id="Objects_und_Maps_im_Vergleich">Objects und Maps im Vergleich</h3>
<p>{{jsxref("Object", "Objects")}} und Maps haben einige gemeinsame Eigenschaften. In beiden lassen sich Schlüssel auf Werte setzen, diese Werte wiederfinden, Schlüssel löschen und herausfinden, ob etwas unter einem bestimmten Schlüssel gespeichert ist. Aus diesem Grund (und weil es keine spracheigenen Alternativen gab) wurden früher <code>Objects</code> als <code>Maps</code> benutzt. Doch es gibt bedeutende Unterschiede zwischen diesen beiden Strukturen, die es in verschiedenen Fällen zu beachten gilt:</p>
<ul>
<li>Die Schlüssel eines <code>Object</code>s sind {{jsxref("String", "Strings")}} und {{jsxref("Symbol", "Symbols")}}, während sie bei einer <code>Map</code> jeglichen Wert haben können. Inklusive <code>functions</code>, <code>objects</code>, und alle <code>primitive</code>.</li>
<li>Die Grösse einer <code>Map</code> lässt sich einfach über die <code>size</code> Eigenschaft ermitteln, während die Zahl der Eigenschaften in einem <code>Object</code> erst manuell herausgefunden werden müssen.</li>
<li>Eine <code>Map</code> ist iterierbar, wohingegen das Iterieren über ein <code>Object </code>erfordert, dass man dessen Schlüssel temporär extrahiert und dann über diese iteriert.</li>
<li>Ein <code>Object</code> hat einen Prototypen mit default-Schlüsseln in seiner Map, die mit den Namen von selbst angelegten Schlüsseln kollidieren können, wenn man nicht aufpasst. Seit ES5 lässt sich dies durch die Anweisung <code>map = Object.create(null)</code> umgehen, was aber selten verwendet wird.</li>
<li>Eine <code>Map</code> bietet in Szenarien mit hochfrequentem Einfügen und Löschen von Schlüssel-Wert Paaren ein besseres Laufzeitverhalten als <code>Objects</code>.</li>
</ul>
<h2 id="Eigenschaften">Eigenschaften</h2>
<dl>
<dt><code>Map.length</code></dt>
<dd>Der Wert von <code>length</code> beträgt 0.</dd>
<dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
<dd>Die Konstruktor-Funktion, zum Erzeugen abgeleiteter Objekte.</dd>
<dt>{{jsxref("Map.prototype")}}</dt>
<dd>Repräsentiert den Prototyp für den <code>Map</code> Konstruktor. Erlaubt das Hinzufügen von Eigenschaften zu allen <code>Map</code> Objekten.</dd>
</dl>
<h2 id="Map_Instanzen"><code>Map</code> Instanzen</h2>
<p>Alle <code>Map</code> Instanzen erben von {{jsxref("Map.prototype")}}.</p>
<h3 id="Eigenschaften_2">Eigenschaften</h3>
<p>{{page('/de/Web/JavaScript/Reference/Global_Objects/Map/prototype','Eigenschaften')}}</p>
<h3 id="Methoden">Methoden</h3>
<p>{{page('/de/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methoden')}}</p>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Einsatz_vom_Map_Objekt">Einsatz vom <code>Map</code> Objekt</h3>
<pre class="brush: js">var myMap = new Map();
var keyString = "ein string",
keyObj = {},
keyFunc = function () {};
// setting the values
myMap.set(keyString, "value associated with 'ein string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");
myMap.size; // 3
// getting the values
myMap.get(keyString); // "value associated with 'ein string'"
myMap.get(keyObj); // "value associated with keyObj"
myMap.get(keyFunc); // "value associated with keyFunc"
myMap.get("ein string"); // "value associated with 'ein string'"
// because keyString === 'ein string'
myMap.get({}); // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !== function () {}
</pre>
<h3 id="Benutzung_von_NaN_als_Map_Schlüssel">Benutzung von <code>NaN</code> als <code>Map</code> Schlüssel</h3>
<p><code>NaN</code> kann auch als Schlüssel benutzt werden. Auch wenn jede <code>NaN</code> nicht gleich zu sich selbst ist (<code>NaN !== NaN</code> is true) funktioniert das folgende Beispiel, da <code>NaN</code>s ununterscheidbar von jeder anderen ist:</p>
<pre class="brush: js">var myMap = new Map();
myMap.set(NaN, "not a number");
myMap.get(NaN); // "not a number"
var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"
</pre>
<h3 id="Iterieren_über_Maps_mit_for..of">Iterieren über <code>Maps</code> mit <code>for..of</code></h3>
<p>Über Maps kann mit der <code>for..of</code> Schleife iteriert werden:</p>
<pre class="brush: js">var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
console.log(key + " = " + value);
}
// 0 = zero
// 1 = one
for (var key of myMap.keys()) {
console.log(key);
}
// 0
// 1
for (var value of myMap.values()) {
console.log(value);
}
// zero
// one
for (var [key, value] of myMap.entries()) {
console.log(key + " = " + value);
}
// 0 = zero
// 1 = one
</pre>
<h3 id="Integration_von_Maps_mit_forEach">Integration von <code>Maps</code> mit <code>forEach()</code></h3>
<p>Über Maps kann mit der <code>forEach()</code> method iteriert werden:</p>
<pre class="brush: js">myMap.forEach(function(value, key) {
console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
</pre>
<h3 id="Relation_mit_Array_Objekten">Relation mit <code>Array</code> Objekten</h3>
<pre class="brush: js">var kvArray = [['key1', 'value1'], ['key2', 'value2']];
// Use the regular Map constructor to transform a 2D key-value Array into a map
var myMap = new Map(kvArray);
myMap.get('key1'); // returns "value1"
// Use the Array.from function to transform a map into a 2D key-value Array
console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray
// Or use the keys or values iterators and convert them to an array
console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"]
</pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initiale Definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("javascript.builtins.Map")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li>
<li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li>
<li>{{jsxref("Set")}}</li>
<li>{{jsxref("WeakMap")}}</li>
<li>{{jsxref("WeakSet")}}</li>
</ul>
|
