JavaScript/Objekte/Array/map

Die von Array.prototype vererbte Methode map ruft für jedes Element des iterierbaren Objektes auf dem sie aufgerufen wurde die als Argument übergebene Rückruffunktion auf und erzeugt ein Array, dessen Elemente die von der Funktion zurückgegebenen Werte sind.

Syntax

Array.prototype.map(callback[, thisArg])

Attribute

Writable	true
Enumerable	false
Configurable	true

Prototyp

• Function.prototype

Die an map übergebene Callback-Funktion nimmt als ersten Parameter den aktuellen Wert des Arrays entgegen und ihr Rückgabewert wird dem neuen Array hinzugefügt.

Beispiel

function anzahlBuchstaben (str) {
    return str.length;
}

var array1 = ["Äpfel", "Birnen", "Zwetschgen"];
var array2 = array1.map(anzahlBuchstaben);

// array2 hat nun diesen Wert: [5, 6, 10]

Im Beispiel wird eine Funktion anzahlBuchstaben definiert, welche die Länge des ihr übergebenen Objekts zurückgibt. Sie überprüft aus Gründen der Einfachheit für dieses Beispiel nicht, ob sie auch tatsächlich ein String-Objekt erhalten hat, von dem sie nun die Anzahl der Zeichen zurück geben soll.

Des Weiteren wird das Array array1 mit drei String-Werten gefüllt, damit darauf beispielhaft die map-Methode angewendet werden kann. Diese nimmt die Referenz auf die Funktion anzahlBuchstaben als ersten Parameter entgegen, um sie nun auf jedes Element von array1 anzuwenden. Das Ergebnis wird jeweils in einem neuen Array gespeichert. Der Rückgabewert der map-Methode, also das neue Array mit den Wortlängen, wird nun in der Variable array2 gespeichert.

Natürlich kann man dieses Beispiel wegen seiner Einfachheit auch gleich als Einzeiler schreiben:

Beispiel

var array2 = ["Äpfel", "Birnen", "Zwetschgen"].map(function (str) { return str.length; });
// array2 hat nun diesen Wert: [5, 6, 10]

Beachten Sie: Die map-Methode in Verbindung mit der Callback-Funktion leistet das, was man auch mittels einer Schleife erreichen kann:

Beispiel

var array1 = ["Äpfel", "Birnen", "Zwetschgen"];
var array2 = [];
var i;

function anzahlBuchstaben (str) {
    return str.length;
}

for (i = 0; i < array1.length; i++) {
    array2[i] = anzahlBuchstaben(array1[i]);
}

// array2 hat nun diesen Wert: [5, 6, 10]

Das Verwenden der map-Methode hat jedoch den Vorteil, dass man keine Zählvariable i benötigt, und dass der Programm-Code leichter lesbar ist.

Mehr zu Callback-Funktionen finden Sie unter Umgang mit Callback-Funktionen.

Die Callback-Funktion

Der erste Parameter der map-Methode eines Arrays ist eine Funktion, die bis zu drei Parameter entgegennehmen kann:

Beispiel

function cb (currentValue, index, originalArray) { ... });

Innerhalb der Callback-Funktion hat man also die Möglichkeit, das ursprüngliche Array zu untersuchen (3. Parameter originalArray), als auch die Information, das wievielte Element gerade übermittelt wurde (2. Parameter index), dessen Wert in currentValue steht.

Der optionale Kontext-Parameter

Wenn innerhalb der Callback-Funktion das Schlüsselwort this nicht auf das globale window-Objekt verweisen soll, dann kann mit diesem zweiten Parameter im map-Aufruf eine Referenz auf ein Objekt übertragen werden, welches stattdessen innerhalb der Callback-Funktion für this gelten soll.

Siehe auch

• JavaScript/Tutorials/Umgang mit Callback-Funktionen

Weblinks

ECMAScript 2017 (7th Edition, ECMA-262 Draft): Array.prototype.map

ECMAScript 2015 (6th Edition, ECMA-262): Array.prototype.map

MDN: Array.prototype.map