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
|
---
title: Map
slug: Web/JavaScript/Reference/Global_Objects/Map
translation_of: Web/JavaScript/Reference/Global_Objects/Map
---
<div>{{JSRef}}</div>
<p><span class="seoSummary">Об'єкт <strong><code>Map</code></strong> зберігає пари ключ-значення.</span> Будь-яке значення (і об'єкт, і примітивне значення) може бути використано і як ключ, і як значення.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">new Map([<em>iterable</em>])</pre>
<h3 id="Параметри">Параметри</h3>
<dl>
<dt><code>iterable</code></dt>
<dd>{{jsxref("Array")}} або інший <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">об'єкт, що перебирається</a>, чиї елементи є парами ключ-значення (масиви з двома елементами, наприклад, <code>[[1, 'one'], [2, 'two']]</code> ). Кожна пара ключ-значення додається до нового <code>Map</code>; значення <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">null</span></font> вважаються <code>undefined</code>.</dd>
</dl>
<h2 id="Опис">Опис</h2>
<p>Об'єкт <code>Map</code> перебирає свої елементи у порядку їх введення — цикл {{jsxref("Statements/for...of", "for...of")}} повертає масив <code>[ключ, значення]</code> під час кожної ітерації.</p>
<p>Слід зазначити, що <code>Map</code>, що є <code>Map</code>'ом об'єкта, especially a dictionary of dictionaries, буде перебиратися у порядку додавання елементів в об'єкт - у довільному порядку і не упорядковано.</p>
<h3 id="Еквівалентність_ключів">Еквівалентність ключів</h3>
<p>Еквівалентність ключів основана на алгоритмі "SameValueZero": <code>NaN</code> вважається <code>NaN</code> (хоча, <code>NaN !== NaN</code>) і всі інші значення вважаються еквівалентними згідно семантики оператора <code>===</code>. У сучасній версії сецифікації ECMAScript <code>-0</code> та <code>+0</code> вважаються еквівалентними, хоча у попередніх версіях було інакше. Більш детально дивіться "Value equality for -0 and 0" у таблиці <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Browser_compatibility">сумісності браузерів</a>.</p>
<h3 id="Порівняння_об'єктів_та_maps">Порівняння об'єктів та maps</h3>
<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), <code>Object</code>s have been used as <code>Maps</code> historically; however, there are important differences that make using a <code>Map</code> preferable in certain cases:</p>
<ul>
<li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, whereas they can be any value for a <code>Map</code>, including functions, objects, and any primitive.</li>
<li>You can get the size of a <code>Map</code> easily with the <code>size</code> property, while the number of properties in an <code>Object</code> must be determined manually.</li>
<li>A <code>Map</code> is an <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> and can thus be directly iterated, whereas iterating over an <code>Object</code> requires obtaining its keys in some fashion and iterating over them.</li>
<li>An <code>Object</code> has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by using <code>map = Object.create(null)</code>, but this is seldom done.</li>
<li>A <code>Map</code> may perform better in scenarios involving frequent addition and removal of key pairs.</li>
</ul>
<h2 id="Properties">Properties</h2>
<dl>
<dt><code>Map.length</code></dt>
<dd>The value of the <code>length</code> property is 0.</dd>
<dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
<dd>The constructor function that is used to create derived objects.</dd>
<dt>{{jsxref("Map.prototype")}}</dt>
<dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd>
</dl>
<h2 id="Map_instances"><code>Map</code> instances</h2>
<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p>
<h3 id="Properties_2">Properties</h3>
<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p>
<h3 id="Methods">Methods</h3>
<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p>
<h2 id="Examples">Examples</h2>
<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3>
<pre class="brush: js">var myMap = new Map();
var keyString = 'a string',
keyObj = {},
keyFunc = function() {};
// setting the values
myMap.set(keyString, "value associated with 'a 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 'a string'"
myMap.get(keyObj); // "value associated with keyObj"
myMap.get(keyFunc); // "value associated with keyFunc"
myMap.get('a string'); // "value associated with 'a string'"
// because keyString === 'a string'
myMap.get({}); // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !== function () {}
</pre>
<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3>
<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works because <code>NaN</code>s are indistinguishable from each other:</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="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3>
<p>Maps can be iterated using a <code>for..of</code> loop:</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="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3>
<p>Maps can be iterated using the <code>forEach()</code> method:</p>
<pre class="brush: js">myMap.forEach(function(value, key) {
console.log(key + ' = ' + value);
});
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
</pre>
<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</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="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("javascript.builtins.Map")}}</p>
<h2 id="See_also">See also</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>
|
