Wie man .map() in JavaScript verwendet

JavaScript unterstützt mehrere Methoden, um über Arrays zu iterieren. Entwickler verwenden häufig die traditionelle for-Schleife und die weniger verbreitete .forEach()-Methode. Die beliebteste Methode ist jedoch .map(). Diese Methode erstellt ein neues Array, indem sie eine Funktion auf jedes Element des ursprünglichen Arrays anwendet. Sie vermeidet Mutationen und erzeugt wirklich „saubere“ Arrays.

Dies unterscheidet sich von mutierenden Methoden, die das ursprüngliche Array in irgendeiner Weise verändern. In diesem Artikel betrachten wir vier Möglichkeiten, .map() in JavaScript zu verwenden (obwohl es viele weitere gibt).

Methode 1: Funktionen auf einzelne Array-Elemente anwenden

Bei der Verwendung von .map() in JavaScript wird die Callback-Funktion als Argument behandelt. Der Wert des Array-Elements zum Zeitpunkt der Ausführung wird zu einem erforderlichen Parameter dieser Funktion. Sie können ihn verwenden, um Werte zu modifizieren oder Funktionen zu erstellen.

Beispiel:

const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2;
});
console.log(sweeterArray);

Ausgabe:

[12, 14, 22, 26, 40]

Sie können den Code vereinfachen und übersichtlicher gestalten:

const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

Ausgabe:

[12, 14, 22, 26, 40]

Die Verwendung von sweetArray.map(makeSweeter) macht den Code lesbarer im Vergleich zur ersten Version.

Methode 2: Strings in Arrays umwandeln

Sie können die .map()-Methode aus dem Array-Prototyp verwenden, um Strings umzuwandeln. Anstatt direkt mit Arrays zu arbeiten, verwenden wir .call(), um .map() auf einen String anzuwenden. Beachten Sie, dass Strings in JavaScript wie Arrays von Zeichen behandelt werden können, wodurch der Zugriff auf einige Array-Methoden möglich ist.

Beispiel:

const name = "Hostman";
const map = Array.prototype.map;
const newName = map.call(name, eachLetter => {
    return `${eachLetter}e`;
});
console.log(newName);

Ausgabe:

["He", "oe", "se", "te", "me", "ae", "ne"]

In diesem Beispiel wird .map() verwendet, um jedes Zeichen im String zu transformieren, indem ein „e“ hinzugefügt wird. Dies funktioniert ähnlich wie .split() und andere Methoden, die auf Zeichen im String zugreifen, bevor sie wieder in ein Array umgewandelt werden.

Methode 3: Listen in JavaScript-Bibliotheken rendern

Dieser Anwendungsfall ist in JavaScript-Frameworks wie React üblich. Hier benötigen Sie die JSX-Syntax, da .map() innerhalb dieser verwendet wird. Zum Beispiel:

import React from "react";
import ReactDOM from "react-dom";

const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}>{name}</li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

In diesem Beispiel rendert die React-Komponente ein <div> mit einer Liste. Die JavaScript-.map()-Methode wird verwendet, um über das Array von Namen zu iterieren und einzelne Listenelemente zu generieren. Das Rendering erfolgt durch ReactDOM.render auf einem DOM-Element mit der ID root.

Methode 4: Array-Objekte transformieren

Ein weiterer Anwendungsfall für .map() in JavaScript besteht darin, jedes Objekt in einem Array zu transformieren und ein neues Array mit modifizierten Objekten zurückzugeben. Dies funktioniert ähnlich wie klassische Datenverarbeitung.

Beispiel:

const myUsers = [
    { name: 'cloud', likes: 'scalability' },
    { name: 'devops', likes: 'automation' },
    { name: 'kube', likes: 'orchestration' }
];
const usersByLikes = myUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.popularity = item.name.length * 12;
    return container;
});
console.log(usersByLikes);

Ausgabe:

[
  { cloud: 'scalability', popularity: 60 },
  { devops: 'automation', popularity: 72 },
  { kube: 'orchestration', popularity: 48 }
]

In diesem Beispiel wird jedes Objekt im Array mit Hilfe von Klammernotation und Objekt-Property-Zuweisungen modifiziert. Dieser Ansatz ist nützlich, um eingehende Daten zu transformieren und zu verdichten, bevor sie in Client-Anwendungen verwendet werden.

Fazit

Wir haben vier Hauptmethoden zur Verwendung der .map()-Methode in JavaScript überprüft. Sie können ihre Möglichkeiten erweitern, indem Sie sie mit anderen Methoden kombinieren. Weitere Informationen finden Sie in der offiziellen Dokumentation.