Die Methode Array.prototype.map() dient dazu, ein neues Array zu erstellen, indem auf jedes Element des ursprünglichen Arrays eine bestimmte Transformation angewendet wird. Anders als bei forEach(), das lediglich eine Funktion auf jedes Element des Arrays anwendet, ohne das Array zu verändern, gibt map() ein neues Array zurück, in dem jedes Element das Ergebnis der angewendeten Transformation ist.

01 · Abschnitt

Syntax

JavaScript Syntax 
Array.prototype.map(callbackFn);
Array.prototype.map(callbackFn, thisArg);
Parameter
callback

Eine Funktion, die auf jedes Element des Arrays angewendet wird. Diese Funktion kann bis zu drei Parameter verwenden:

  • element: Das aktuelle Element des Arrays, das geprüft wird.
  • index: (optional) Der Index des aktuellen Elements.
  • array: (optional) Das Array selbst, auf dem die Methode aufgerufen wurde.
thisArg

(Optional) Ein Wert, der als this für die Callback-Funktion verwendet wird.

02 · Abschnitt

Rückgabewert

Die Methode gibt ein neues Array zurück, das die transformierten Elemente enthält.

03 · Abschnitt

Beispiele

Verdopplung von Zahlen

JavaScript Beispiel 
const nums = [1, 2, 3, 4];
const doubled = nums.map(function(element) {
    return element * 2;
});
console.log(doubled);
Output 
[ 2, 4, 6, 8 ]

Transformation von Objekten in einem Array

JavaScript Beispiel 
const users = [
    { firstname: "John", lastname: "Doe" },
    { firstname: "Jane", lastname: "Smith" }
];

const fullNames = users.map(function(user) {
    return `${user.firstname} ${user.lastname}`;
});

console.log(fullNames);
Output 
[ 'John Doe', 'Jane Smith' ]

Verwendung von thisArg

JavaScript Beispiel 
const nums = [1, 2, 3];
const multiplier = { factor: 10 };

const multipliedItems = nums.map(function(element) {
    return element * this.factor;
}, multiplier);
console.log(multipliedItems);
Output 
[ 10, 20, 30 ]

Mit Index und Array als Parameter

JavaScript Beispiel 
const nums = [10, 20, 30];

const withIndex = nums.map((value, index, array) => {
    return `Wert: ${value}, Index: ${index}, Array-Länge: ${array.length}`;
});

console.log(withIndex);
Output 
[
    'Wert: 10, Index: 0, Array-Länge: 3',
    'Wert: 20, Index: 1, Array-Länge: 3',
    'Wert: 30, Index: 2, Array-Länge: 3'
]

Array von Objekten klonen

JavaScript Beispiel 
const users = [
    { id: 1, active: true },
    { id: 2, active: false }
];

const usersUpdated = users.map(user => ({
    ...user,
    active: true
}));

console.log(usersUpdated);
Output 
[
    { id: 1, active: true },
    { id: 2, active: true }
]
/ Weiter

Zurück zu Array

Zur Übersicht