Array.prototype.map()

Zusammenfassung

Map() wendet auf jedes Element der Array die bereitgestellte Funktion an und erstellt eine neue Array als Ergebniss.

Syntax

arr.map(callback[, thisArg])

Parameters

callback

Funktion die ein Element für die neue Array erstellt, es werden drei Argumente akzeptiert: 

 

currentValue

Das aktuelle Element das verarbeitet wird.

index

Der Index von dem aktuellen ellement das verarbeitet wird.

array

Die Array auf die  map angewendet wird.

thisArg

Optional. Wert der als this verwendet wird wenn callback ausgeführt wird.

Beschreibung

Map wendet die bereitgestellte callback Funktion, der Reihe nach, auf jedes einzelne Element in der Array an und erstellt eine neue Array als Ergebniss. Callback wird nur auf Indexes angewendet die einen Wert besitze, indexes mit undefinded,die gelöscht oder nie einen Wert hatten werden ignoriert.

callback wird mit drei Argumenten aufgerufen: dem Wert des Elementes, dem index des Elements und das Array Objekt. 

Falls thisArg angegeben ist wird es zur callback Funktion weitergereicht und wird als this benutzt. Ansonsten hat thisArg den Wert undefined. The this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function.

map ändert nicht die Array auf die es aufgerufen wird(wenn callback aufgerufen wurde, kann die Array sich ändern).

Die Anzahl der Elemente die von map angenommen werden wird vor dem ersten ausführen der callback Funktion festgelegt. Wird ein Element im Nachhinein durch callback hinzugefügt, wird es von map nicht berücksichtigt. Falls ein Wert in der Array verändert wird erhält callback den Wert den das Element in dem Moment hat wenn der callback diesen benötigt, wird ein Wert gelöscht wird er von map nicht beachtet. 

Beispiele

Beispiel: Erstellen einer Array mit Quadratzahlen aus einer Array mit Zahlen

Der folgende Code nimt eine Array mit Nummern und erstellt eine neue Array mit den Quadratzahlen der ersten Array.

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

Beispiel: Abbilden einer Array mit Nummern mit einer Funktion mit einem Argument.

Der folgende code zeigt wie map vorgeht falls die Funktion eine Argument besitzt. Während map durch die Array loopt nimmt das Argument den Wert des aktuellen Elementes an. 

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles ist [2, 8, 18]. numbers ist [1, 4, 9]

Example: 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]

Example: using map generically querySelectorAll

Dieses Beispiel zeigt wie man über eine Array mit Elementen, die mit querySelectorAll erstellt wurde, iteriert. In diesem Fall enthält die Array alle <select> HTML-Elemente die ausgewählt wurden.

var elems = document.querySelectorAll('select option:checked');
var values = [].map.call(elems, function(obj) {
  return obj.value;
});

Beispiel: Benutze map um einen String umzukehren

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

// Output: '54321'
// Bonus: Benutze '===' um zu sehen ob der String ein Palindrom ist

Beispiel: Besondere Anwendungsfälle

(Inspiriert von diesem Blogpost)

Häufig wird die callback Funktion mit nur einem Argument gebraucht. Andere Funktionen werden auch häufig mit nur einem Argument benutzt obwohl Sie optional Argumente akzeptieren.  Diese Vorgehensweise verwirrend sein.

// Consider:
['1', '2', '3'].map(parseInt);
// Man ertwartet [1, 2, 3]
// Das Ergebnis ist [1, NaN, NaN]

// parseInt wird oft mit nur einem Argument genutzt, aber akzeptiert zwei.
// Das erste Argument ist ein Ausdruck und die zweite der Radix.
// Array.prototype.map reicht 3 Argumente an die callback funktion:
// Das Element, den Index, die Array 
// parseInt ignoriert das dritte Argument, aber nicht das zweite,
// das kann zu einem unerwarteten Ergebniss führen.
// Der Blogpost geht in genaueren Detail darauf ein.

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 wurde dem ECMA-262 Standard in der fünften Edition hinzugefügt; deswegen kann es sein das es nicht in allen Standards implementiert ist. Falls map nicht Nativ supported ist kann der folgende code am anfang der scripte eigefügt werden. Der folgende Algorithmus ist identische mit dem in der fünften Edition, ECMA-265 festgelegt, es wird angenommen das  Object, TypeError und Array unverändert sind und das callback.call zum standard Wert von Function.prototype.call evaluiert.

// 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 = 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,
        //   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;
  };
}

Specifications

Browser compatibility

See also

• Array.prototype.forEach()
• Map object
• Array.from()