JavaScript .map()-Methode

Die JavaScript .map()-Methode gibt Ihnen die Möglichkeit, durch jedes Element in einem Array zu iterieren und bestimmte Aktionen auszuführen. Dabei bleibt das ursprüngliche Array erhalten.

Was ist JavaScript .map()?

Die JavaScript .map()-Methode stellt ein neues Array her, indem sie eine Callback-Funktion auf jedes Element des ursprünglichen Arrays anwendet. Die Methode transformiert jeden Wert des Ausgangsarrays, wobei das Ergebnis in einem separaten Array gespeichert wird. Ein Schlüsselaspekt ist die Nichtveränderlichkeit, was bedeutet, dass das ursprüngliche Array unverändert bleibt.

Die .map()-Methode wird häufig für die Transformation aller Elemente in einem Array eingesetzt. Zum Beispiel kann es Elemente quadrieren, Texte formatieren, Objekte filtern oder eine Vielzahl anderer Anpassungen vornehmen. Dadurch ist .map() praktisch, wenn eine nichtdestruktive Veränderung der Daten gewünscht ist, und sorgt für sauberen, verständlichen Code.

Das ist die Syntax von JavaScript .map()

Die Syntax der .map()-Methode besteht aus einem Funktionsaufruf (Callback-Function) auf einem Array:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});

• originalArr: Das Array, auf das die .map()-Methode angewendet wird
• element: Das aktuelle Element, das während der Iteration verarbeitet wird
• index (optional): Der Index des aktuellen Elements im Array
• array (optional): Das ursprüngliche Array

Schauen wir uns ein konkretes Beispiel an:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

Die Callback-Funktion, die als Argument an JavaScript .map() übergeben wird, nimmt jedes Element des ursprünglichen Arrays number und quadriert es. Wir erhalten ein neues Array, das aus den Quadratzahlen der Elemente aus dem ursprünglichen Array besteht.

Praktische Beispiele für .map()

Mit der JavaScript .map()-Methode lassen sich eine Vielzahl von Operationen auf Array-Elementen durchführen. Hier sind einige der häufigsten Szenarien:

Filtern von Daten

Wenn Sie .map() mit der .filter()-Methode kombinieren, schaffen Sie ein Array, das nur die Werte enthält, für die die gegebene Bedingung wahr ist.

const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0).map(num => num * 2);
// Output: [4, 8]

In diesem Beispiel besitzt das Array numbers die Werte von 1 bis 5. Anschließend wenden wir die .filter()-Methode an. Das Filterkriterium bestimmt, dass die Zahl modulo 2 gleich 0 sein muss, was für gerade Zahlen zutrifft. Das Ergebnis ist ein neues Array, welches nur die durch 2 teilbaren Elemente enthält. Das Zwischenergebnis ist also [2, 4]. Daraufhin nutzen wir die .map()-Methode auf das Array, um jedes Element zu verdoppeln. Als Endergebnis bekommen wir ein Array, dessen Elemente zweimal durch 2 geteilt werden können, also [4, 8].

Listen in JavaScript-Bibliotheken rendern

React zählt zu den beliebtesten JavaScript-Frameworks und -Bibliotheken. Die .map()-Funktion ist nützlich, um Listen in React darzustellen. Beachten Sie, dass React die JSX-Syntax verwendet.

import React from "react";
import ReactDOM from "react-dom";
const colors = ["red", "green", "blue", "yellow", "orange"];
const ColorsList = () => (
    <div>
        <ul>{colors.map(color => <li key={color}> {color} </li>)}</ul>
    </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ColorsList />, rootElement);

Wir importieren die Module React und ReactDOM und erstellen ein Array namens colors mit verschiedenen Farbnamen. Die funktionale React-Komponente ColorsList nutzt die JavaScript map()-Methode, um für jede Farbe ein <li>-Element zu erzeugen. Das key-Attribut ermöglicht die effiziente Aktualisierung durch React. Abschließend wird die ColorsList-Komponente mit ReactDOM.render im DOM gerendert und die Ausgabe dem DOM-Element mit der ID root hinzugefügt.

Elemente im Array formatieren

Die .map()-Methode ist eine einfache Möglichkeit, um Elemente wie Strings nach Belieben zu formatieren.

const names = ["Alice", "Bob", "Charlie"];
const formattedNames = names.map(name => name.toLowerCase());
// Output: ["alice", "bob", "charlie"]

Hier kombinieren wir .map() mit der toLowerCase()-Methode, um jeden Namen in Kleinbuchstaben zu konvertieren. Das Ergebnis ist das neue Array formattedNames, das die Namen in Kleinbuchstaben enthält. Das ursprüngliche Array names bleibt unverändert.