Einführung
Von der klassischen for-Schleife bis zur forEach()-Methode gibt es in JavaScript verschiedene Techniken und Methoden, um einen Datensatz zu durchlaufen. Eine der beliebtesten Methoden ist die .map()-Methode. .map() erstellt ein Array, indem eine bestimmte Funktion auf jedes Element des übergeordneten Arrays angewendet wird. Im Gegensatz zu mutierenden Methoden, die nur das aufrufende Array verändern, ist .map() eine nicht-mutierende Methode, die ein neues JavaScript-Array erzeugt. Diese Methode ist vielseitig einsetzbar, wenn man mit Arrays arbeitet. In diesem Tutorial werden vier wichtige Anwendungsfälle von .map() in JavaScript vorgestellt: der Aufruf einer Funktion mit Array-Elementen, die Umwandlung von Strings in Arrays, das Rendern von Listen in JavaScript-Bibliotheken und das Umformatieren von Array-Objekten.
Voraussetzungen
Für dieses Tutorial sind keine Programmierkenntnisse erforderlich. Wenn Sie die Beispiele jedoch nachvollziehen möchten, können Sie die Node.js REPL oder die Entwicklertools Ihres Browsers verwenden.
Wie ruft man eine JavaScript-Funktion für jedes Element in einem Array auf?
.Die Methode `.map()` akzeptiert eine Callback-Funktion als Argument. Ein wichtiger Parameter dieser Funktion ist der aktuelle Wert des von ihr verarbeiteten Elements. Dieser Parameter ist erforderlich. Mithilfe dieses Parameters können Sie jedes Element eines Arrays verändern und es als geändertes Element des neuen Arrays zurückgeben.
Hier ist ein Beispiel:
const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
return sweetItem * 2
})
console.log(sweeterArray)Diese Ausgabe wird in der Konsole protokolliert:
Output
[ 4, 6, 8, 10, 70 ]
Dies lässt sich vereinfachen und übersichtlicher gestalten wie folgt:
// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;
// we have an array
const sweetArray = [2, 3, 4, 5, 35];
// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);Die gleiche Ausgabe wird in der Konsole protokolliert:
Output
[ 4, 6, 8, 10, 70 ]
Mit Code wie sweetArray.map(makeSweeter) wird Ihr Code etwas lesbarer.
Wie man einen JS-String in ein Array umwandelt
Die Methode `map()` gehört zum Prototyp `array`. In diesem Schritt verwenden Sie sie, um einen String in ein Array umzuwandeln. Sie entwickeln hier keine Methode für Strings, sondern verwenden stattdessen die spezielle Methode `.call()`.
In JavaScript ist alles ein Objekt, und Methoden sind Funktionen, die diesen Objekten zugeordnet sind. Mit `call()` können Sie den Inhalt eines Objekts auf ein anderes anwenden. So können Sie beispielsweise den Inhalt von `.map()` in ein Array in einen String kopieren.
Die Funktion Call() kann Kontextargumente und Parameter an die Hauptfunktionsargumente übergeben bekommen.
Hier ist ein Beispiel:
const name = "Sammy"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
return `${eachLetter}a`
})
console.log(newName)Diese Ausgabe wird in der Konsole protokolliert:
Output
[ "Sa", "aa", "ma", "ma", "ya" ]Hier haben Sie die .map()-Funktion auf einen String angewendet und das Funktionsargument übergeben, das .map() erwartet.
Dies funktioniert ähnlich wie die split()-Methode einer Zeichenkette, mit dem Unterschied, dass jedes einzelne Zeichen der Zeichenkette geändert werden kann, bevor sie in einem Array zurückgegeben wird.
Wie man Listen in JavaScript-Bibliotheken rendert
JavaScript-Bibliotheken wie React verwenden .map(), um Elemente in einer Liste darzustellen. Dies erfordert jedoch JSX-Syntax, da die .map()-Methode in JSX-Syntax eingebettet ist.
Hier ist ein Beispiel für eine React-Komponente:
import React from "react";
import ReactDOM from "react-dom";
const names = ["whale", "squid", "turtle", "coral", "starfish"];
const NamesList = () => (
<div>
<ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);Dies ist eine zustandslose React-Komponente, die ein Div-Element mit einer Liste rendert. Die einzelnen Listenelemente werden mithilfe von `.map()` gerendert, um ein Namensarray zu durchlaufen. Die Komponente wird mit ReactDOM auf dem DOM-Element mit der Root-ID gerendert.
Wie man JavaScript-Array-Objekte neu formatiert
Mit `.map()` kann man die Objekte eines Arrays durchlaufen, den Inhalt jedes einzelnen Objekts verändern und ein neues Array zurückgeben, ähnlich wie bei herkömmlichen Arrays. Diese Veränderung erfolgt basierend auf dem Rückgabewert der Callback-Funktion.
Hier ist ein Beispiel:
const myUsers = [
{ name: 'shark', likes: 'ocean' },
{ name: 'turtle', likes: 'pond' },
{ name: 'otter', likes: 'fish biscuits' }
]
const usersByLikes = myUsers.map(item => {
const container = {};
container[item.name] = item.likes;
container.age = item.name.length * 10;
return container;
})
console.log(usersByLikes);Diese Ausgabe wird in der Konsole protokolliert:
Output
[
{shark: "ocean", age: 50},
{turtle: "pond", age: 60},
{otter: "fish biscuits", age: 50}
]
Hier haben Sie jedes Objekt im Array mithilfe der Klammer- und Punktnotation modifiziert. Dieser Anwendungsfall kann genutzt werden, um die empfangenen Daten vor dem Speichern oder Parsen in einer Frontend-Anwendung zu verarbeiten oder zu komprimieren.
Ergebnis
In diesem Tutorial haben wir vier Anwendungsfälle der .map()-Methode in JavaScript betrachtet. In Kombination mit anderen Methoden lässt sich die Funktionalität von .map() erweitern.
