Map-Methode - dies ist eine der nützlichsten Methoden in JavaScript, mit der Sie jedes Element eines Arrays ändern und ein neues Array mit geänderten Werten zurückgeben können. In der Praxis bedeutet dies, dass wir eine Funktion oder Operation gleichzeitig auf alle Elemente eines Arrays anwenden können, ohne dass Schleifen erforderlich sind.
In diesem Artikel erfahren Sie, wie Sie die Map-Methode mit Ihren eigenen Händen erstellen und verwenden können. Wir zeigen Ihnen Schritt für Schritt Anweisungen, so dass selbst ein Anfänger diese Aufgabe bewältigen kann.
Zunächst erstellen wir eine neue Funktion mit dem Namen myMap. Diese Funktion akzeptiert zwei Argumente: das Array, das wir ändern möchten, und die Funktion, die wir auf jedes Element des Arrays anwenden möchten. Innerhalb der Funktion myMap wir erstellen ein neues Array, dem wir die geänderten Werte hinzufügen.
Gewusst wie: Verwenden der map-Methode zum Erstellen von Funktionsänderungen in JavaScript - Schritt für Schritt Anleitung
Schritt 1: Erstellen eines Arrays
Zuerst müssen Sie ein Array erstellen, auf dessen Grundlage wir funktionelle Änderungen vornehmen werden. Nehmen wir zum Beispiel das folgende Zahlenarray:
const numbers = [1, 2, 3, 4, 5];
Schritt 2: Definieren der Funktion
Dann müssen wir die Funktion definieren, die wir auf jedes Element des Arrays anwenden werden. Lassen Sie uns zum Beispiel eine Funktion erstellen, die jedes Element mit 2 multipliziert:
function multiplyByTwo(number)Schritt 3: Verwenden der map() -Methode
Jetzt sind wir bereit, die map() -Methode zu verwenden, um eine Funktion auf jedes Element eines Arrays anzuwenden und basierend auf den Ergebnissen der Funktion ein neues Array zu erstellen:
const doubledNumbers = numbers.map(multiplyByTwo);
Schritt 4: Ergebnis
Nach dem Ausführen der map() -Methode erhalten wir ein neues doubledNumbers- Array, in dem jedes Element dem doppelten Wert des entsprechenden Elements aus dem ursprünglichen numbers- Array entspricht. In unserem Beispiel lautet das Ergebnis wie folgt:
| Das ursprüngliche Array | Ergebnis |
|---|---|
| [1, 2, 3, 4, 5] | [2, 4, 6, 8, 10] |
Jetzt wissen Sie, wie Sie die map() -Methode verwenden, um funktionelle Änderungen in JavaScript zu erstellen. Diese Methode ist sehr leistungsfähig und ermöglicht es uns, Funktionen einfach auf Arrays anzuwenden und neue Arrays basierend auf den Ergebnissen dieser Funktionen zu erstellen. Verwenden Sie es in Ihren Projekten, um Ihren Code funktionaler und ausdrucksvoller zu machen!
Schritt 1: Das Konzept der Map-Methode verstehen
Das Konzept der map() -Methode basiert auf dem Prinzip der funktionalen Programmierung, bei dem Daten als unproduktiv angesehen werden und Funktionen als sauber und unveränderlich angesehen werden. Dies bedeutet, dass die map() -Methode das ursprüngliche Array nicht ändert, sondern ein neues Array mit den geänderten Werten zurückgibt.
In vielen Fällen kann die Verwendung der map() -Methode den Code reduzieren und das Lesen erleichtern, da alle Operationen auf einer einzelnen Zeile ausgeführt werden. Dies ist besonders nützlich, wenn Sie ein Array von Objekten konvertieren oder die Werte einer bestimmten Eigenschaft aus einem Array abrufen müssen.
Betrachten Sie das folgende Beispiel, um besser zu verstehen, wie die map() -Methode funktioniert :
| Das ursprüngliche Array | Das Ergebnis der map() -Methode |
|---|---|
| [1, 2, 3, 4, 5] | [2, 4, 6, 8, 10] |
In diesem Beispiel übergeben wir eine Funktion, die jedes Element des ursprünglichen Arrays mit 2 multipliziert, an die map() -Methode. Das Ergebnis der Ausführung der Methode ist ein neues Array, das die Werte enthält [2, 4, 6, 8, 10].
Schritt 2: Erstellen einer Funktion zum Anwenden der Map-Methode
Um eine eigene map-Methode zu erstellen, müssen wir eine Funktion schreiben, die eine andere Funktion (Callback) an die Eingabe nimmt und sie auf alle Elemente des Arrays anwendet.
Hier ist ein Beispiel für eine einfache Funktion, die die übergebene Funktion auf jedes Element eines Arrays anwendet:
function myMap(callback, arr) return result;>
In diesem Beispiel akzeptiert die myMap-Funktion zwei Argumente: callback (die Funktion, die Sie anwenden möchten) und arr (das Array, auf das die Funktion angewendet werden soll).
Wir erstellen ein leeres result-Array, in dem wir die Ergebnisse der Funktionsanwendung auf jedes Element des Arrays speichern. Dann gehen wir mit einer for Schleife durch jedes Element des Arrays und rufen für jedes Element die callback-Funktion auf und fügen das Ergebnis mithilfe der push() -Methode dem result-Array hinzu.
Am Ende gibt die Funktion das resultierende result- Array zurück, in dem die Ergebnisse der Anwendung der Funktion auf jedes Element gespeichert werden.
Schritt 3: Verwenden der Map-Methode zum Ändern von Array-Elementen
Nachdem wir die Funktion colbeck erstellt haben, können wir die map-Methode verwenden, um die Elemente des Arrays zu ändern. Die map-Methode akzeptiert die Funktion colback als Parameter und gibt ein neues Array zurück, in dem jedes Element entsprechend der Logik der Colback-Funktion geändert wird.
Um die map-Methode zu verwenden, rufen wir sie auf dem Array selbst auf und übergeben die Funktion colback als Argument. Die Funktion colback muss ein Array-Element zur Eingabe annehmen und den geänderten Wert des Elements zurückgeben.
Angenommen, wir haben ein Array von Zahlen:
| Das ursprüngliche Array | ||||
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
Wir möchten jedes Element des Arrays um 1 erhöhen. Wir können eine Wurst-Funktion erstellen, die eine Zahl pro Eingabe akzeptiert und ihren erhöhten Wert zurückgibt:
function incrementNumber(num)
Dann können wir die map-Methode auf dem Array aufrufen und die Funktion colback als Argument übergeben:
var numbers = [1, 2, 3, 4, 5];var incrementedNumbers = numbers.map(incrementNumber);
Nach der Ausführung des Codes enthält die Variable incrementedNumbers ein neues Array, in dem jedes Element des ursprünglichen Arrays um 1 erhöht wird:
| Neues Array | ||||
|---|---|---|---|---|
| 2 | 3 | 4 | 5 | 6 |
Daher haben wir die map-Methode verwendet, um die Elemente des Arrays entsprechend der Logik der Kolbeck-Funktion zu ändern.