Array.prototype.map()

Summary

Создает новый массив с результатом вызова определенной функции для каждого элемента данного массива.

Синтакс

array.map(callback[, thisArg])

Параметры

callback

Функция, которая производит  элемент нового массива из элемента данного массива.

thisArg

Контекст для this во время выполнения callback.

Описание

map вызывает функцию обратного вызова callback один раз для каждого элемента в массиве по порядку и в результате создает новый массив. callback вызывается только для индексов массива, которым были присвоенызначения и не вызывается для индексов, которые были удалены или которым никогда не присваивали значений.

callback вызывается с тремя аргументами: значение элемента массива, порядковый номер (индекс) элемента массива и сам перебираемый массив.

Если в map был передан аргумент thisArg, то он будет использоваться как контекст this для каждого вызова callback. Если этот аргумент опущен, или в качестве значения передан null, то в качестве контекста будет использоваться глобальный объект.

map не изменяет массив, в контексте которого был вызван, а только возвращает результирующий массив.

The range of elements processed by map is set before the first invocation of callback. Elements which are appended to the array after the call to map begins will not be visited by callback. If existing elements of the array are changed, or deleted, their value as passed to callback will be the value at the time map visits them; elements that are deleted are not visited.

Совместимость

map только недавно появился в стандарте ECMA-262, соответственно этот метод может не быть представлен в других редакциях стандарта. Это можно обойти вставив следующий фрагмент кода в начало своих скриптов, позволяя использовать map редакциях, которые не поддерживают этот метод нативно. Этот алгоритм в точности копирует воплощенный в ECMA-262, 5th edition, и подразумевает, что Object, TypeError, и Array имеют свои изначальные значения и что callback.call воплощает оригинальный Function.prototype.call.

// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.com/#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 (thisArg) {
      T = thisArg;
    }

    // 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, : true, Enumerable: true, Configurable: true},
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, Pk, { 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;
  };      
}

Примеры использования

Пример: Образование множественного числа в словах (строках) массива

Следующий код создает массив строк, преобразовывая единичные формы во множественные

function fuzzyPlural(single) {
  var result = single.replace(/o/g, 'e');  
  if( single === 'kangaroo'){
    result += 'se';
  }
  return result; 
}

var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural));

// ["feet", "geese", "meese", "kangareese"]

Пример: Мэппинг массива чисел на массив квадратного корня чисел

Следующий код принимает массив чисел и создает новый массив, содержащий квадратный корень чисел в первом массиве

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
/* roots теперь содержит [1, 2, 3], numbers сохранили значение [1, 4, 9] */

Пример: using map generically

This example shows how to use map on a string to get an array of bytes in the ASCII encoding representing the character values:

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]

Tricky use case

(inspired by this blog post)

Распространенной практикой является использование функции обратного вызова с одним аргументом (элемент, над которым производится операция). Некоторые функции также часто используют с одним аргументом. Такое применение может привести к непредсказуемому поведению программы.

// 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 second being 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);
// Actual result is an array of numbers (as expected)
*/

Браузерная совместимость

Based on Kangax's compat tables