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
208
209
210
211
212
213
214
|
---
title: Map
slug: Web/JavaScript/Reference/Global_Objects/Map
tags:
- ECMAScript2015
- JavaScript
- Map
translation_of: Web/JavaScript/Reference/Global_Objects/Map
original_slug: Web/JavaScript/Referencia/Objetos_globales/Map
---
<div>{{JSRef("Global_Objects", "Map")}}</div>
<h2 id="Resumen">Resumen</h2>
<p>El objeto <strong><code>Map</code></strong> almacena pares clave/valor. Cualquier valor (tanto objetos como {{Glossary("Primitive", "valores primitivos")}}) pueden ser usados como clave o valor.</p>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="syntaxbox"><code>new Map([iterable])
</code></pre>
<h3 id="Parameters" name="Parameters">Parámetros</h3>
<dl>
<dt><code>iterable</code></dt>
<dd>Iterable es un array o cualquier otro objeto <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> cuyos elementos son pares clave-valor (arrays de 2 elementos). Cada par clave-valor será agregado al nuevo Map.</dd>
</dl>
<h2 id="Description" name="Description">Descripción</h2>
<p>Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle <code>for..of</code> devolverá un array de <code>[clave, valor]</code> en cada iteración.</p>
<p>Cabe destacar que un <strong>Map </strong>el cual es un mapa de un objeto, especialmente un diccionario de diccionarios, solo se va a mapear en el orden de inserción del objeto — el cual es aleatorio y no ordenado.</p>
<h3 id="Igualdad_de_claves">Igualdad de claves</h3>
<p>La igualdad de claves esta basada en el algoritmo "SameValueZero": <code>NaN</code> es considerado lo mismo que <code>NaN </code>(sin importar que <code>NaN !== NaN</code>) y todos los otros operadores son considerados iguales de acuerdo a la semantica del operador ===. En las primeras versiones de ECMAScript 6 <code>-0</code> y <code>+0</code> eran considarados distintos (even though <code>-0 === +0</code>), esto fue cambiado en posteriores versiones y ha sido implementado en Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p>
<h3 id="Objetos_y_mapas_comparados">Objetos y mapas comparados</h3>
<p>Los {{jsxref("Object", "Objetos")}} son similares a los <code>Maps</code> en cuanto a que ambos permiten establecer claves a valores, recuperar dichos valores, eliminar claves, y detectar si existe algo almacenado en una clave determinada. Por esto, los <code>Objects</code> han sido usados históricamente como <code>Maps</code>; no obstante, hay diferencias importantes entre <code>Objects</code> y <code>Maps</code> que hacen mejor usar un <code>Map</code> en la mayoría de casos.</p>
<ul>
<li>Las claves de un <code>Object</code> son {{jsxref("String", "Strings")}} y {{jsxref("Symbol", "Symbols")}}, mientras que para un <code>Map</code> pueden ser de cualquier tipo, incluyendo funciones, objetos y cualquier otro tipo primitivo.</li>
<li>Puedes saber facilmente el tamaño de un <code>Map</code> usando la propiedad <code>size</code>, mientras que le número de propiedades en un <code>Object</code> tiene que ser deternminado manualmente.</li>
<li>Un <code>Map</code> es un <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> lo que permite iterar directamente sobre el, mientras que si queremos iterar sobre un <code>Object</code> necesitamos obtener primero las claves de alguna forma para después iterar sobre el.</li>
<li>Un <code>Object</code> tiene prototipo, por lo que hay claves por defecto en tu mapa que pueden colisionar con tus claves si no eres cuidadoso. En el estandard ES5 esto se puede evitar usando <code>mapa = Object.create(null)</code>, pero esto raramente se hace.</li>
</ul>
<h2 id="Properties" name="Properties">Propiedades</h2>
<dl>
<dt><code>Map.length</code></dt>
<dd>El valor de la propiedad de longitud es 0</dd>
<dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
<dd>La función constructor que se usa para crear objetos derivados.</dd>
<dt>{{jsxref("Map.prototype")}}</dt>
<dd>Representa el prototipo para el constructor de Map. Permite añadir propiedades a todos los objetos <code>Map</code>.</dd>
</dl>
<h2 id="Boolean_instances" name="Boolean_instances">Instancias de Map</h2>
<p>Todas las instancias de Map heredan de {{jsxref("Map.prototype")}}.</p>
<h3 id="Propiedades">Propiedades</h3>
<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Propiedades')}}</p>
<h3 id="Métodos">Métodos</h3>
<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Métodos')}}</p>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Ejemplo_Usando_el_objeto_Map">Ejemplo: Usando el objeto Map</h3>
<pre class="brush: js">var miMapa = new Map();
var claveObj = {},
claveFunc = function () {},
claveCadena = "una cadena";
// asignando valores
miMapa.set(claveCadena, "valor asociado con 'una cadena'");
miMapa.set(claveObj, "valor asociado con claveObj");
miMapa.set(claveFunc, "valor asociado with claveFunc");
miMapa.size; // 3
// obteniendo los valores
miMapa.get(claveCadena); // "valor asociado con 'una cadena'"
miMapa.get(claveObj); // "valor asociado con claveObj"
miMapa.get(claveFunc); // "valor asociado con claveFunc"
miMapa.get("una cadena"); // ""valor asociado con 'una cadena'"
// porque claveCadena === 'una cadena'
miMapa.get({}); // undefined, porque claveObj !== {}
miMapa.get(function() {}) // undefined, porque claveFunc !== function () {}
</pre>
<h3 id="Ejemplo_Usando_NaN_como_claves_de_Map">Ejemplo: Usando <code>NaN</code> como claves de Map</h3>
<p><code>NaN</code> también puede ser usado como una clave. Aún cuando cada clave <code>NaN</code> no es igual a sí misma (<code>NaN !== NaN</code> es verdadera), el siguiente ejemplo funciona, porque las claves NaNs <code>NaN</code>s no son distinguibles unas de otras:</p>
<pre class="brush: js">var miMapa = new Map();
miMapa.set(NaN, "no es un número");
miMapa.get(NaN); // "no es un número"
var otroNaN = Number("foo");
miMapa.get(otroNaN); // "no es un número"
</pre>
<h3 id="Ejemplo_Iterando_Map_con_for..of">Ejemplo: Iterando <code>Map</code> con <code>for..of</code></h3>
<p>Los Map pueden ser iterados usando un bucle <code>for..of</code>:</p>
<pre class="brush: js">var miMapa = new Map();
miMapa.set(0, "cero");
miMapa.set(1, "uno");
for (var [clave, valor] of miMapa) {
alert(clave + " = " + valor);
}
// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno"
for (var clave of miMapa.keys()) {
alert(clave);
}
// Mostrará 2 alertas; primero con "0" y segundo con "1"
for (var valor of miMapa.values()) {
alert(valor);
}
// Mostrará 2 alertas; primero con "cero" y segundo con "uno"
for (var [clave, valor] of miMapa.entries()) {
alert(clave + " = " + valor);
}
// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno"
miMapa.forEach(function(valor, clave, miMapa) {
alert(clave + " = " + valor);
})
// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno"
</pre>
<h3 id="Iterando_Maps_usando_forEach()">Iterando <code>Maps</code> usando <code>forEach()</code></h3>
<p>Los Map pueden ser iterados usando el método <code>forEach()</code>:</p>
<pre><code>miMapa.forEach(function(valor, clave) {
console.log(clave + ' = ' + valor);
});
// Mostrará 2 logs; el primero con "0 = cero" y el segundo con "1 = uno"</code></pre>
<h3 id="Ejemplo_Relación_con_los_objetos_Array">Ejemplo: Relación con los objetos <code>Array</code></h3>
<pre class="brush: js">var kvArray = [["clave1", "valor1"], ["clave2", "valor2"]];
// El constructor por defecto de Map para transforar un Array 2D (clave-valor) en un mapa
var miMapa = new Map(kvArray);
miMapa.get("clave1"); // devuelve "valor1"
// Usando la función Array.from para transformar el mapa a un Array 2D clave-valor.
console.log(Array.from(miMapa)); // Muestra exactamente el mismo Array que kvArray
// O usando los iteradores de claves o valores y convirtiendo a array.
console.log(Array.from(miMapa.keys())); // Muestra ["clave1", "clave2"]
</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Definición inicial.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
<p> </p>
<div class="hidden">
<p>La tabla de compatiblidad en esta página es generada desde datos estructurados. Si quieres contribuir a los datos, pro favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud de pull request.</p>
</div>
<p>{{Compat("javascript.builtins.Map")}}</p>
<p> </p>
<h2 id="Ver_también">Ver también</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>
|