MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

Il metodo map() crea un nuovo array i cui elementi sono i risultati di una specifica funzione invocata su ciascun elemento dell'array.

var numbers = [1, 5, 10, 15];
var roots = numbers.map(function(x) {
   return x * 2;
});
// roots is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

Sintassi

var new_array = arr.map(callback[, thisArg])

Parametri

callback
Una funzione che viene applicata su chiascun elemento dell'array, prende 3 argomenti:
 
currentValue
L'elemento che deve essere processato.
index
L'indice dell'elemento che deve essere processato.
array
L'array sul quale map é stato invocato.
thisArg
Opzionale. Il valore usato come this quando callback viene invocato.

Valore ritornato

Un nuovo array sul quale ciascun elemento é il risultato della funzione callback.

Descrizione

map invoca una funzione callback una volta per ciascun elemento dell' array, in ordine, e crea un nuovo array con i risultati. callback é invocata per gli indici dell'array con valore assegnato, inclusi gli undefined.

callback é invocata con 3 argomenti: il valore dell'elemento, l'indice dell'elemento, l'array originale.

Se il parametro thisArg é fornito alla funzione map, sará utilizzato in qualitá di this. Altrimenti, undefined sará utilizzato come this

map non muta l'array sul quale é invocato (anche se callback, potrebbe mutarlo).

Esempi

Mappa un array di numeri

Il seguente codice trasforma un array di numeri in un array contenente la radice quadrata per ciascun numero.

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

Usare map per trasformare un array di oggetti

Il seguente codice trasforma un array di oggetti in un nuovo array di oggetti.

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 is now [{1: 10}, {2: 20}, {3: 30}], 

// kvArray is still: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]

Uso generico di map

Il seguente esempio mostra come usare map su una String per prelevare un array di codici ASCII rappresentanti ciascun carattere:

var map = Array.prototype.map;
var a = map.call('Hello World', function(x) { 
  return x.charCodeAt(0); 
});
// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

Usare map per invertire una stringa

var str = '12345';
Array.prototype.map.call(str, function(x) {
  return x;
}).reverse().join(''); 

// Output: '54321'
// Bonus: use '===' to test if original string was a palindrome

Un metodo piú facile sarebbe con il metodo  String.split() (dai un'occhiata all'esempio Reversing a String using split()).

Caso d'uso complicato

(inspired by this blog post)

Map passa alla funzione di callback 3 parametri. Bisogna fare attenzione quando si usa una funzione di callback come parseInt che prende in ingresso 2 parametri.

// Consider:
['1', '2', '3'].map(parseInt);
// While one could expect [1, 2, 3]
// The actual result is [1, NaN, NaN]

// parseInt is often used with one argument, but takes two.
// The first is an expression and the second is the radix.
// To the callback function, Array.prototype.map passes 3 arguments: 
// the element, the index, the array
// The third argument is ignored by parseInt, but not the second one,
// hence the possible confusion. See the blog post for more details

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]

Polyfill

map é stato aggiunto allo standard ECMA-262 nella quinta edizione; per tale motivo potrebbe non essere presente in alcune implementazioni di javascript. Potresti implementare un work around inserendo il seguente codice nel tuo script.

// 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. Let O be the result of calling ToObject passing the |this| 
    //    value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal 
    //    method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length > 1) {
      T = arguments[1];
    }

    // 6. Let A be a new array created as if by the expression new Array(len) 
    //    where Array is the standard built-in constructor with that name and 
    //    len is the value of len.
    A = new Array(len);

    // 7. Let k be 0
    k = 0;

    // 8. Repeat, while k < len
    while (k < len) {

      var kValue, mappedValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal 
      //    method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal 
        //    method of O with argument Pk.
        kValue = O[k];

        // ii. Let mappedValue be the result of calling the Call internal 
        //     method of callback with T as the this value and argument 
        //     list containing kValue, k, and O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Call the DefineOwnProperty internal method of A with arguments
        // Pk, Property Descriptor
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true },
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // For best browser support, use the following:
        A[k] = mappedValue;
      }
      // d. Increase k by 1.
      k++;
    }

    // 9. return A
    return A;
  };
}

Specifiche

Specification Status Comment
ECMAScript 5.1 (ECMA-262)
The definition of 'Array.prototype.map' in that specification.
Standard Initial definition. Implemented in JavaScript 1.6.
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.prototype.map' in that specification.
Standard  
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.prototype.map' in that specification.
Draft  

Compatibilitá dei browser

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.5 (1.8) 9 (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 1.0 (1.8) (Yes) (Yes) (Yes)

 

Leggi pure

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: mikspi
 Ultima modifica di: mikspi,