Oft kommt es vor, dass man jedes Element in einem Array verändern möchte. Nun könnte man mit einer for-Schleife über die Elemente iterieren. Es gibt aber eine einfachere Möglichkeit: Mit der map-Methode.
Ein Beispiel der map-Methode
Mit der map-Methode kann man über jedes Element eines Arrays iterieren. Die Elemente können mittels einer Callback-Funktion geändert werden. Gehen wir vom folgenden Array aus:
let arr = [2, 4, 6, 8];
Jetzt möchten wir jedes Element mit 2 multiplizieren. Dazu könnte man eine for-Schleife verwenden:
let arr = [2, 4, 6, 8];
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] * 2;
}
console.log(arr); // [4, 8, 12, 16]
Das gleiche Ergebnis kann man aber einfacher mit der map-Methode erzielen:
let arr = [2, 4, 6, 8];
let modArr = arr.map(function(element){
return element * 2;
});
console.log(modArr); // [4, 8, 12, 16]
Oder ein anderes Beispiel. Nehmen wir an, wir haben ein Array mit Objekten, welches Vor- und Nachnamen enthält:
let users = [
{firstName : "Thomas", lastName: "Muster"},
{firstName : "Max", lastName: "Millian"},
{firstName : "Sarah", lastName: "Muster"}
];
Nun möchten wir Vor- und Nachnamen verbinden. Mit der map-Methode gelingt uns das wie folgt:
let users = [
{firstName : "Thomas", lastName: "Muster"},
{firstName : "Max", lastName: "Millian"},
{firstName : "Sarah", lastName: "Muster"}
];
let userNames = users.map(function(element){
return `${element.firstName} ${element.lastName}`;
});
console.log(userNames); // ["Thomas Muster", "Max Millian", "Sarah Muster"]
Syntax
Kommen wir zur Syntax der map-Methode, die wie folgt aussieht:
arr.map(function(element, index, array){}, this);
Wie man sieht wird die map-Methode an das Array angehängt. Danach folgt die Callback-Funktion, die 3 Parameter entgegen nehmen kann:
- element: Das ist das aktuelle Element aus dem Array (erforderliche Angabe).
- index: Der Index des aktuellen Elements (optionale Angabe).
- array: Das ganze Array (optionale Angabe).
Das this-Keyword kann ebenfalls als Kontext-Parameter mitgegeben werden (optional), welches innerhalb der Callback-Funktion genutzt werden kann. Standardmäßig ist dieses undefined. Kann aber auch geändert werden:
arr.map(function(element, index, array){
console.log(this) // 100
}, 100);
Auch die anderen Parameter kann man sich ausgeben lassen, um zu sehen, was sich dahinter verbirgt:
let arr = [10, 20,30, 40];
arr.map(function(element, index, array){
console.log(element);
console.log(index);
console.log(array);
return element;
}, 100);
Im Hinterkopf sollte man sich bei der Arbeit mit der map-Methode folgendes behalten:
- Die map-Methode erstellt ein neues Array mit den Ergebnissen des Funktionsaufrufs.
- Die map-Methode führt die definierte Funktion auf jedes Element im Array einmal der Reihe nach auf.
- Für leere Elemente wird die Funktion innerhalb map nicht ausgeführt.
- Das ursprüngliche Array wird nicht verändert.
- Elemente, die nach beginnen des map-Aufrufs an das Array angehängt werden, werden nicht mehr berücksichtigt.
