path: root/files/ca/web/javascript/reference/global_objects/map/index.html

---
title: Map
slug: Web/JavaScript/Reference/Global_Objects/Map
translation_of: Web/JavaScript/Reference/Global_Objects/Map
original_slug: Web/JavaScript/Referencia/Objectes_globals/Map
---
<div>{{JSRef("Global_Objects", "Map")}}</div>

<h2 id="Resum">Resum</h2>

<p>L'objecte <strong><code>Map</code></strong> és un simple mapa de parelles clau/valor. Qualsevol valor (tant objectes com {{Glossary("Primitive", "primitive values")}}) poden fer-se servir tant com a clau com a valor.</p>

<h2 id="Syntax" name="Syntax">Sintaxi</h2>

<pre class="syntaxbox"><code>new Map([iterable])
</code></pre>

<h3 id="Parameters" name="Parameters">Paràmetres</h3>

<dl>
 <dt><code>iterable</code></dt>
 <dd>Iterable és un Array o un altre objecte iterable els quals els seus elements són parelles clau/valor (Arrays de 2 elements). Cada parella clau/valor serà afegida al nou mapa. nul és tracta com a indefinit.</dd>
</dl>

<h2 id="Description" name="Description">Descripció</h2>

<p>Un objecte Map pot iterar els seus elements en ordre d'inserció - un bucle <code>for..of</code> retornarà un array de <code>[key, value]</code> per cada iteració.</p>

<h3 id="Igualtat_de_claus">Igualtat de claus</h3>

<p>La igualtat de claus es basa en l'algorisme "mateix valor": <code>NaN</code> es considera igual a <code>NaN</code> (tot i que <code>NaN !== NaN</code>) i tots els altres valors es consideren iguals d'acord amb la semàntica de l'operador <code>===</code>. En versions anteriors a l'esborrany de l'ECMAScript 6 <code>-0</code> i <code>+0</code> es consideraven diferents (tot i que <code>-0 === +0</code>), aquest comportament s'ha canviat en versions posteriors i ha sigut adaptat al {{geckoRelease("29")}} ({{bug("952870")}}) i una <a href="https://code.google.com/p/v8/issues/detail?id=3069">versió diària de Chrome</a>.</p>

<h3 id="Comparació_d'objectes_amb_mapes">Comparació d'objectes amb mapes</h3>

<p>Els {{jsxref("Object", "Objects")}} son similars als <code>Maps</code> en el sentit que tots dos permeten assignar valors a claus, obtenir aquests valors, esborrar claus i detectar si una clau té un valor assignat o no. Degut a això, històricament s'han fet anar <code>Objects</code> com a <code>Maps</code>; tot i això existeixen diferències importants entre <code>Objects</code> i <code>Maps</code> que fan que l'ús de <code>Map</code> sigui millor.</p>

<ul>
 <li>Un <code>Object</code> té un prototipus, això implica que hi haurà algunes claus definides inicialment. Aquest problem es pot adreçar utilitzant <code>map = Object.create(null)</code>.</li>
 <li>Les claus d'un <code>Object</code> són {{jsxref("String", "Strings")}}, mentre que les claus d'un <code>Map</code> poden ser de qualsevol tipus.</li>
 <li>És fàcil obtindre el tamany d'un <code>Map</code> mentre que el tamany d'un <code>Object</code> ha de ser calculat manualment.</li>
</ul>

<p>Utilitzeu mapes en comptes d'objejctes quan les claus no se sàpiguin en temps d'execució, o bé quan totes les claus o els valors siguin del mateix tipus.</p>

<p>Utilitzeu objectes quan hi hagi una lògica que operi els elements individualment.</p>

<h2 id="Properties" name="Properties">Propietats</h2>

<dl>
 <dt><code>Map.length</code></dt>
 <dd>El valor de la propietat <code>length</code> és 1.</dd>
 <dt>{{jsxref("Map.prototype")}}</dt>
 <dd>Representa el prototipus pel constructor <code>Map</code>. Permet afegir propietats a tots els objectes de tipus <code>Map</code>.</dd>
</dl>

<h2 id="Boolean_instances" name="Boolean_instances">Instàncies de <code>Map</code></h2>

<p>Totes les instàncies de <code>Map</code> hereten de {{jsxref("Map.prototype")}}.</p>

<h3 id="Propietats">Propietats</h3>

<p>{{page('ca/Web/JavaScript/Reference/Global_Objects/Map/prototype','Propietats')}}</p>

<h3 id="Mètodes">Mètodes</h3>

<p>{{page('ca/Web/JavaScript/Reference/Global_Objects/Map/prototype','Mètodes')}}</p>

<h2 id="Exemples">Exemples</h2>

<h3 id="Exemple_Utilitzar_l'objecte_Map">Exemple: Utilitzar l'objecte <code>Map</code></h3>

<pre class="brush: js">var myMap = new Map();

var keyObj = {},
    keyFunc = function () {},
    keyString = "a string";

// preparar els valors
myMap.set(keyString, "valor associat a amb 'un string'");
myMap.set(keyObj, "valor associat amb keyObj");
myMap.set(keyFunc, "valor associat amb with keyFunc");

myMap.size; // 3

// obtenir els valors
myMap.get(keyString);    // "valor associat amb 'un string'"
myMap.get(keyObj);       // "valor associat amb keyObj"
myMap.get(keyFunc);      // "valor associat amb keyFunc"

myMap.get("a string");   // "valor associat amb 'un string'"
                         // com que keyString === 'un string'
myMap.get({});           // undefined, perquè keyObj !== {}
myMap.get(function() {}) // undefined, perquè keyFunc !== function () {}
</pre>

<h3 id="Exemple_Utilitzar_NaN_com_a_claus_en_un_Map">Exemple: Utilitzar <code>NaN</code> com a claus en un <code>Map</code></h3>

<p><code>NaN</code> també pot emprar-se com a clau. Tot i que <code>NaN</code> no és igual a si mateix (<code>NaN !== NaN</code> és cert), l'exemple següent funciona perquè els <code>NaN</code>s són indistinguibles entre ells:</p>

<pre class="brush: js">var myMap = new Map();
myMap.set(NaN, "no un nombre");

myMap.get(NaN); // "no un nombre"

var altreNaN = Number("foo");
myMap.get(altreNaN); // "no un nombre"
</pre>

<h3 id="Exemple_Iterar_Maps_amb_for..of">Exemple: Iterar <code>Maps</code> amb <code>for..of</code></h3>

<p>Els mapes es poden iterar fent servir un bucle <code>for..of</code> :</p>

<pre class="brush: js">var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "un");
for (var [key, value] of myMap) {
  alert(key + " = " + value);
}
// Mostrarà 2 alertes; el primer amb "0 = zero" i el segon amb "1 = one"

for (var key of myMap.keys()) {
  alert(key);
}
// Mostrarà 2 alertes; el primer amb "0" i el segon amb "1"

for (var value of myMap.values()) {
  alert(value);
}
// Mostrarà 2 alertes; el primer amb "zero" i el segon amb "un"

for (var [key, value] of myMap.entries()) {
  alert(key + " = " + value);
}
// Mostrarà 2 alertes; el primer amb "0 = zero" i el segon amb "1 = un"

myMap.forEach(function(value, key) {
  alert(key + " = " + value);
}, myMap)
// Mostrarà 2 alertes; el primer amb "0 = zero" i el segon amb "1 = un"
</pre>

<h3 id="Exemple_Relació_amb_els_objectes_Array">Exemple: Relació amb els objectes <code>Array</code></h3>

<pre class="brush: js">var kvArray = [["clau1", "valor1"], ["clau2", "valor2"]];

// Utilitzeu el constructor de Map normal per a transformar un Array 2D clau-valor en un mapa
var myMap = new Map(kvArray);

myMap.get("valor1"); // retorna "valor1"

// Utilitzeu l'operador spread per a transformar un mapa en un Array 2D clau-valor.
alert(uneval([...myMap])); // Mostrarà exactament el mateix Array que kvArray

// O bé utilitzeu l'operador spread a l'iterador de les claus o els valor per a obtenir
// un array de només les claus o els valors
alert(uneval([...myMap.keys()])); // Mostrarà ["clau1", "clau2"]
</pre>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentaris</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Definició inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilitat_amb_navegadors">Compatibilitat amb navegadors</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>
    <p>{{ CompatChrome(31) }} <a href="#chrome-specific-note-1">[1]</a><br>
     {{ CompatChrome(38) }}</p>
   </td>
   <td>{{ CompatGeckoDesktop("13") }}</td>
   <td>11</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td>Argument del constructor: <code>new Map(iterable)</code></td>
   <td>{{ CompatChrome(38) }}</td>
   <td>{{ CompatGeckoDesktop("13") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>25</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>iterable</td>
   <td>{{ CompatChrome(38) }}</td>
   <td>{{ CompatGeckoDesktop("17") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td><code>Map.clear()</code></td>
   <td>{{ CompatChrome(31) }} <a href="#chrome-specific-note-1">[1]</a><br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoDesktop("19")}}</td>
   <td>11</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td><code>Map.keys(), Map.values(), Map.entries()</code></td>
   <td>{{ CompatChrome(37) }} <a href="#chrome-specific-note-1">[1]</a><br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoDesktop("20")}}</td>
   <td>{{ CompatNo() }}</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td><code>Map.forEach()</code></td>
   <td>{{ CompatChrome(36) }} <a href="#chrome-specific-note-1">[1]</a><br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoDesktop("25")}}</td>
   <td>11</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td>Igualtat de claus per a -0 i 0</td>
   <td>{{ CompatChrome(34) }} <a href="#chrome-specific-note-1">[1]</a><br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoDesktop("29")}}</td>
   <td>{{ CompatNo() }}</td>
   <td>25</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>Argument del constructor: <code>new Map(null)</code></td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatGeckoDesktop("37")}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Monkey-patched <code>set()</code> al Constructor</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatGeckoDesktop("37")}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Chrome per Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatChrome(31) }} <a href="#chrome-specific-note-1">[1]</a><br>
    {{ CompatChrome(38) }}</td>
   <td>{{ CompatGeckoMobile("13") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>iOS 8</td>
  </tr>
  <tr>
   <td>Argument del constructor: <code>new Map(iterable)</code></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatChrome(38) }}</td>
   <td>{{ CompatGeckoMobile("13") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
  <tr>
   <td>iterable</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatGeckoMobile("17") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>iOS 8</td>
  </tr>
  <tr>
   <td><code>Map.clear()</code></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatChrome(31) }} <a href="#chrome-specific-note-1">[1]</a><br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoMobile("19")}}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>iOS 8</td>
  </tr>
  <tr>
   <td><code>Map.keys(), Map.values(), Map.entries()</code></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatChrome(37) }} <a href="#chrome-specific-note-1">[1]</a><br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoMobile("20")}}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>iOS 8</td>
  </tr>
  <tr>
   <td><code>Map.forEach()</code></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatChrome(36) }} <a href="#chrome-specific-note-1">[1]</a><br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoMobile("25")}}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>iOS 8</td>
  </tr>
  <tr>
   <td>Igualtat per a -0 i 0</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatChrome(34) }} <a href="#chrome-specific-note-1">[1]</a><br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoMobile("29")}}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>Argument del constructor: <code>new Map(null)</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatGeckoMobile("37")}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Monkey-patched <code>set()</code> al Constructor</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatGeckoMobile("37")}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p><a name="chrome-specific-note-1">[1]</a> The feature is available behind a preference. In <code>chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p>

<h2 id="Vegeu_també">Vegeu també</h2>

<ul>
 <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Bug a Map i Set a Mozilla</a></li>
 <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">Proposta de ECMAScript Harmony</a></li>
 <li>{{jsxref("Set")}}</li>
 <li>{{jsxref("WeakMap")}}</li>
 <li>{{jsxref("WeakSet")}}</li>
</ul>