Ja­va­Script .map()-Methode

Die Ja­va­Script .map()-Methode gibt Ihnen die Mög­lich­keit, durch jedes Element in einem Array zu iterieren und bestimmte Aktionen aus­zu­füh­ren. Dabei bleibt das ur­sprüng­li­che Array erhalten.

Was ist Ja­va­Script .map()?

Die Ja­va­Script .map()-Methode stellt ein neues Array her, indem sie eine Callback-Funktion auf jedes Element des ur­sprüng­li­chen Arrays anwendet. Die Methode trans­for­miert jeden Wert des Aus­gangs­ar­rays, wobei das Ergebnis in einem separaten Array ge­spei­chert wird. Ein Schlüs­sel­aspekt ist die Nicht­ver­än­der­lich­keit, was bedeutet, dass das ur­sprüng­li­che Array un­ver­än­dert bleibt.

Die .map()-Methode wird häufig für die Trans­for­ma­ti­on aller Elemente in einem Array ein­ge­setzt. Zum Beispiel kann es Elemente qua­drie­ren, Texte for­ma­tie­ren, Objekte filtern oder eine Vielzahl anderer An­pas­sun­gen vornehmen. Dadurch ist .map() praktisch, wenn eine nicht­de­struk­ti­ve Ver­än­de­rung der Daten gewünscht ist, und sorgt für sauberen, ver­ständ­li­chen Code.

Das ist die Syntax von Ja­va­Script .map()

Die Syntax der .map()-Methode besteht aus einem Funk­ti­ons­auf­ruf (Callback-Function) auf einem Array:

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

• originalArr: Das Array, auf das die .map()-Methode an­ge­wen­det wird
• element: Das aktuelle Element, das während der Iteration ver­ar­bei­tet wird
• index (optional): Der Index des aktuellen Elements im Array
• array (optional): Das ur­sprüng­li­che 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 Ja­va­Script .map() übergeben wird, nimmt jedes Element des ur­sprüng­li­chen Arrays number und quadriert es. Wir erhalten ein neues Array, das aus den Qua­drat­zah­len der Elemente aus dem ur­sprüng­li­chen Array besteht.

Prak­ti­sche Beispiele für .map()

Mit der Ja­va­Script .map()-Methode lassen sich eine Vielzahl von Ope­ra­tio­nen auf Array-Elementen durch­füh­ren. Hier sind einige der häu­figs­ten Szenarien:

Filtern von Daten

Wenn Sie .map() mit der .filter()-Methode kom­bi­nie­ren, 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. An­schlie­ßend wenden wir die .filter()-Methode an. Das Fil­ter­kri­te­ri­um 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 Zwi­schen­er­geb­nis ist also [2, 4]. Daraufhin nutzen wir die .map()-Methode auf das Array, um jedes Element zu ver­dop­peln. Als End­ergeb­nis bekommen wir ein Array, dessen Elemente zweimal durch 2 geteilt werden können, also [4, 8].

Listen in Ja­va­Script-Bi­blio­the­ken rendern

React zählt zu den be­lieb­tes­ten Ja­va­Script-Frame­works und -Bi­blio­the­ken. Die .map()-Funktion ist nützlich, um Listen in React dar­zu­stel­len. 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 im­por­tie­ren die Module React und ReactDOM und erstellen ein Array namens colors mit ver­schie­de­nen Farbnamen. Die funk­tio­na­le React-Kom­po­nen­te ColorsList nutzt die Ja­va­Script map()-Methode, um für jede Farbe ein <li>-Element zu erzeugen. Das key-Attribut er­mög­licht die ef­fi­zi­en­te Ak­tua­li­sie­rung durch React. Ab­schlie­ßend wird die ColorsList-Kom­po­nen­te mit ReactDOM.render im DOM gerendert und die Ausgabe dem DOM-Element mit der ID root hin­zu­ge­fügt.

Elemente im Array for­ma­tie­ren

Die .map()-Methode ist eine einfache Mög­lich­keit, um Elemente wie Strings nach Belieben zu for­ma­tie­ren.

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

Hier kom­bi­nie­ren wir .map() mit der toLowerCase()-Methode, um jeden Namen in Klein­buch­sta­ben zu kon­ver­tie­ren. Das Ergebnis ist das neue Array formattedNames, das die Namen in Klein­buch­sta­ben enthält. Das ur­sprüng­li­che Array names bleibt un­ver­än­dert.