Array.prototype.map()

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.

Syntax

            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.

Rückgabewert

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

Beispiele

Verdopplung von Zahlen

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

Transformation von Objekten in einem Array

            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);
[ 'John Doe', 'Jane Smith' ]

Verwendung von `thisArg`

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

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

Mit Index und Array als Parameter

            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);
[
    '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

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

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

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

navigation Navigation