path: root/files/ca/web/javascript/referencia/objectes_globals/array/map/index.html

---
title: Array.prototype.map()
slug: Web/JavaScript/Referencia/Objectes_globals/Array/map
translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
---
<div>{{JSRef("Global_Objects", "Array")}}</div>

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

<p>El mètode <code><strong>map() </strong></code>crea una nova array amb els resultats de la crida a la funció proporcionada un cop per cada element.</p>

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

<pre class="syntaxbox"><code><var>arr</var>.map(<var>callback</var>[, <var>thisArg</var>])</code></pre>

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

<dl>
 <dt><code>callback</code></dt>
 <dd>Funció que produeix un element de la nova array, agafant tres arguments:</dd>
 <dd>
 <dl>
  <dt><code>currentValue</code></dt>
  <dd>El valor actual que és processat en l'array.</dd>
  <dt><code>index</code></dt>
  <dd>L'índex de l'element actual que és processat en l'array.</dd>
  <dt><code>array</code></dt>
  <dd>L'array sobre la qual es crida <code>map.</code></dd>
 </dl>
 </dd>
 <dt><code>thisArg</code></dt>
 <dd>Opcional. Valor a usar com a <code>this</code> quan s'executa la funció.</dd>
</dl>

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

<p><code>map</code> crida a la funció passada <code>callback</code> <strong>un cop per cada element</strong> de l'array, en ordre, i construeix un nou array a partir dels resultats. Només s'invoca <code>callback</code> per a posicions de l'array que tinguin valors assignats, incloent <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. No es crida per a elements no trobats (és a dir, elements que no han rebut mai un valor o bé elements que s'han eliminat).</p>

<p>S'invoca <code>callback</code> amb tres arguments: el valor de l'element, la posició de l'element a l'array, i l'array que s'està recorrent.</p>

<p>Si s'ha proporcionat el paràmetre <code>thisArg</code> a l'hora de cridar <code>map</code>, aquest es passarà a la funció <code>callback</code> com a valor per a <code>this</code> dins la funció. En qualsevol altre cas el valor utilitzat com a <code>this</code> serà {{jsxref("Global_Objects/undefined", "undefined")}}. El valor finalment observable des de <code>callback</code> es determinarà d'acord a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">les regles usuals per a determinar el valor de <code>this</code> dins una funció</a>.</p>

<p><code>map</code> no canvia l'array des del que es crida (tot i que <code>callback</code>, si s'invoca, pot fer-ho).</p>

<p>El rang d'elements processat per <code>map</code> s'estableix abans de la primera invocació de <code>callback</code>. Els elements que s'hagin afegit a l'array després d'haver cridat <code>map</code> no seran visitats per <code>callback</code>. Si es canvient els elements existents, o s'eliminen, el valor passat a <code>callback</code> serà el valor que tinguessin quan es va invocar <code>map</code>; els elements que s'han eliminat no es visitaran.</p>

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

<h3 id="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Exemple: Generar un array de rels quadrades a partir d'un array de nombres</h3>

<p>El codi següent agafa un array de nombres i crea un nou array que contindrà les rels quadrades dels nombres del primer array.</p>

<pre class="brush: js">var nombres = [1, 4, 9];
var rels = nombres.map(Math.sqrt);
// rels ara val [1, 2, 3], nombres encara val [1, 4, 9]
</pre>

<h3 id="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Exemple: Utilitzar map per a canviar el format dels objectes d'un array</h3>

<p>El codi següent agafa un array d'objectes i crea un nou array que conté els nous objectes, que tenen un format diferent.</p>

<pre class="brush: js">var kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray ara val [{1:10}, {2:20}, {3:30}],
// kvArray encara val [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]
</pre>

<h3 id="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Exemple: Assignar els nombres d'un array al resultat d'una funció que espera un argument</h3>

<p>El codi següent mostra com funciona <code>map</code> quan s'utilitza una funció que espera un argument. L'argument rebrà automàticament el valor de cada element de l'array mentre <code>map</code> recorre tot l'array original.</p>

<pre class="brush: js">var nombres = [1, 4, 9];
var dobles = nombres.map(function(num) {
  return num * 2;
});
// dobles ara val [2, 8, 18]. nombres encara val [1, 4, 9]
</pre>

<h3 id="Example:_using_map_generically" name="Example:_using_map_generically">Exemple: utilitzar <code>map</code> de forma genèrica</h3>

<p>Aquest exemple mostra com utilitzar <code>map</code> en un {{jsxref("Global_Objects/String", "String")}} per a obtindre un array de bytes que representin el valor dels caràcters codificats amb ASCII:</p>

<pre class="brush: js">var map = Array.prototype.map;
var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
// a ara val [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
</pre>

<h3 id="Example:_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Exemple: Utilitzar <code>map</code> de forma genèrica amb <code>querySelectorAll</code></h3>

<p>Aquest exemple mostra com iterar sobre una col·lecció d'objectes obtinguts mitjançant <code>querySelectorAll</code>. En aquest cas obtenim totes les opcions seleccionades de la web:</p>

<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});
</pre>

<h3 id="Exemple_Utilitzar_map_per_a_invertir_un_string">Exemple: Utilitzar <code>map</code> per a invertir un string</h3>

<pre class="brush: js">var str = '12345';
Array.prototype.map.call(str, function(x) {
  return x;
}).reverse().join('');

// Sortida: '54321'
// Bonus: utilitzeu '===' per a comprovar si l'string original era un palindrom
</pre>

<h3 id="Example:_Tricky_use_case" name="Example:_Tricky_use_case">Exemple: Un cas d'ús delicat</h3>

<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspirat per aquesta entrada de blog)</a></p>

<p>És comú utilitzar la funció <em>callback</em> amb un sol argument (l'element corresponent a la volta del bucle de l'array que s'està recorrent). Algunes funcions també solen requerir un sol argument, tot i que també poden acceptar arguements adicionals de forma opcional. Això pot produïr comportaments confussos.</p>

<pre class="brush: js">// Considerem:
['1', '2', '3'].map(parseInt);
// Quan hom esperaria [1, 2, 3]
// El resultat real serà [1, NaN, NaN]

// parseInt s'utilitza normalment amb un argument, però admet dos.
// El primer és una expressió mentre que el segon és el mòdul.
// Array.prototype.map passa 3 arguments a la funció callback:
// l'element, la posició de l'element i l'array
// parseInt ignorarà el tercer argument, però no el segon,
// provocant la confussió. Vegeu l'entrada del blog per a més detalls

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// Actual result is an array of numbers (as expected)

// A simpler way to achieve the above, while avoiding the "gotcha":
['1', '2', '3'].map(Number); // [1, 2, 3]
</pre>

<h2 id="Polyfill" name="Polyfill">Polyfill</h2>

<p><code>map</code> va ser afegit a l'standard ECMA-262 a la cinquena edició; degut a això aquest pot no estar present en algunes implementacions de l'standard. Es pot solventar aquest problema insertant el codi següent al principi dels scripts que el requereixin, permetent que implementacions on <code>map</code> no està disponible de forma nativa en puguin fer ús. Aquest algoritme és exactament l'especificat per l'ECMA-262, 5a edició, assument que {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, i {{jsxref("Global_Objects/Array", "Array")}} tenen els seus valors originals i que <code>callback.call</code> s'evalua al valor original de <code>{{jsxref("Function.prototype.call")}}</code>.</p>

<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {

  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Assignem a O el resultat de cridar a ToObject passant-li el valor de |this|
    //    com a argument.
    var O = Object(this);

    // 2. lenValue és el resultat de cridar el mètode intern
    //    Get de O amb l'argument "length".
    // 3. Assignem a len el valor d'executar ToUint32(lenValue).
    var len = O.length &gt;&gt;&gt; 0;

    // 4. Si IsCallable(callback) és false, llencem l'excepció TypeError.
    // Vegeu: http://es5.github.com/#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. Si s'ha passat l'argument thisArg, l'assigment a T; en cas contrari T valdrà undefined.
    if (arguments.length &gt; 1) {
      T = thisArg;
    }

    // 6. Assignem a A el nou array creat per l'expressió new Array(len)
    //    on Array és el constructor standard de JavaScript amb aquest nom i
    //    len és el valor de len.
    A = new Array(len);

    // 7. Assignem 0 a k
    k = 0;

    // 8. Repetim mentre k &lt; len
    while (k &lt; len) {

      var kValue, mappedValue;

      // a. Assignem ToString(k) a Pk.
      //   Això és implicit per a operands al cantó esquerra de l'operador <code>in</code>
      // b. Assignem a kPresent el resultat de cridar el mètode intern HasProperty
      //    de O amb l'argument Pk.
      //   Es pot combinar aquest pas amb c
      // c. Si kPresent és true, llavors
      if (k in O) {

        // i. Assignem a kValue el resultat de cridar el mètode intern
        //    Get de O amb l'argument Pk.
        kValue = O[k];

        // ii. Assignem a mappedValue el resultat de cridar el mètode intern Call
        //     de callback amb T com a valor de this i una llista d'arguments
        //     que conté kValue, k, i O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Cridem el mètode intern DefineOwnProperty de A amb els arguments
        // Pk, Property Descriptor
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true },
        // i false.

        // En navegadors que suportin Object.defineProperty, utilitzeu el següent:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // Per a un millor suport de navegadors, utilitzeu el següent:
        A[k] = mappedValue;
      }
      // d. incrementem k en 1.
      k++;
    }

    // 9. retornem A
    return A;
  };
}
</pre>

<h2 id="Specifications" name="Specifications">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('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Definició inicial. Implementat a JavaScript 1.6.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilitat amb navegadors</h2>

<div>{{CompatibilityTable}}</div>

<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>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.8")}}</td>
   <td>{{CompatIE("9")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.8")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Vegeu també</h2>

<ul>
 <li>{{jsxref("Array.prototype.forEach()")}}</li>
 <li>{{jsxref("Map")}} object</li>
 <li>{{jsxref("Array.from()")}}</li>
</ul>