Verwenden von .map() zur Iteration durch Array-Elemente in JavaScript

Einführung

Von der klassischen forloop- bis zur forEach()-Methode werden verschiedene Techniken und Methoden verwendet, um durch Datensätze in JavaScript zu iterieren. Eine der beliebtesten Methoden ist die .map()-Methode. .map() erstellt ein Array durch den Aufruf einer bestimmten Funktion für jedes Element im übergeordneten Array. .map() ist eine nicht mutierende Methode, die ein neues Array erzeugt, im Gegensatz zu mutierenden Methoden, bei denen nur Änderungen am aufrufenden Array vorgenommen werden.

Diese Methode kann bei der Arbeit mit Arrays viele Anwendungen haben. In diesem Tutorial behandeln wir vier bemerkenswerte Verwendungsmöglichkeiten von .map() in JavaScript: Aufrufen einer Funktion von Array-Elementen, Konvertieren von Zeichenfolgen in Arrays, Rendern von Listen in JavaScript-Bibliotheken und Neuformatieren von Array-Objekten.

Voraussetzungen

Dieses Tutorial erfordert keine Programmierung, aber wenn Sie die Beispiele mitverfolgen möchten, können Sie entweder das Node.js REPL oder Browser-Entwicklertools verwenden.

• Um Node.js lokal zu installieren, können Sie den Schritten in Installieren von Node.js und Erstellen einer lokalen Entwicklungsumgebung folgen.

• Chrome DevTools sind verfügbar, indem Sie die neueste Version von Google Chrome herunterladen und installieren.

Schritt 1 — Aufrufen einer Funktion für jedes Element in einem Array

.map() akzeptiert eine Callback-Funktion als eines ihrer Argumente und ein wichtiger Parameter dieser Funktion ist der aktuelle Wert des Elements, das von der Funktion verarbeitet wird. Dies ist ein erforderlicher Parameter. Mit diesem Parameter können Sie jedes Element in einem Array ändern und eine neue Funktion erstellen.

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 ]

Um sie sauberer zu gestalten, kann sie weiter vereinfacht werden mit:

// 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 ]

Durch Verwendung von Code wie sweetArray.map(makeSweeter) wird Ihr Code etwas lesbarer.

Schritt 2 — Konvertieren einer Zeichenfolge in ein Array

.map() ist dafür bekannt, zum Array-Prototyp zu gehören. In diesem Schritt verwenden Sie es, um eine Zeichenfolge in ein Array zu konvertieren. Sie entwickeln hier nicht die Methode, die für Zeichenfolgen funktioniert. Vielmehr verwenden Sie die spezielle Methode .call().

In JavaScript ist alles ein Objekt und Methoden sind Funktionen, die an diese Objekte angehängt sind. Mit .call() können Sie den Kontext eines Objekts auf ein anderes Objekt anwenden. Sie würden also den Kontext von .map() in einem Array in eine Zeichenfolge kopieren.

.call() können Argumente des zu verwendenden Kontexts und Parameter für die Argumente der ursprünglichen Funktion übergeben werden.

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 den Kontext von .map() auf einer Zeichenfolge verwendet und ein Argument der Funktion übergeben, die .map() erwartet.

Dies funktioniert wie die .split()-Methode einer Zeichenfolge, nur dass jedes einzelne Zeichen einer Zeichenfolge geändert werden kann, bevor es in ein Array zurückgegeben wird.

Schritt 3 — Rendern von Listen in JavaScript-Bibliotheken

JavaScript-Bibliotheken wie React verwenden .map(), um Elemente in einer Liste zu rendern. Dies erfordert jedoch die JSX-Syntax, da die .map()-Methode in JSX-Syntax eingehüllt 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 Komponente in React, die ein div mit einer Liste rendert. Die einzelnen Listenelemente werden mit .map() gerendert, um über das ursprünglich erstellte Namens-Array zu iterieren. Diese Komponente wird mit ReactDOM auf dem DOM-Element mit der Id von root gerendert.

Schritt 4 — Neuformatieren von Array-Objekten

.map() kann verwendet werden, um durch Objekte in einem Array zu iterieren und, ähnlich wie bei herkömmlichen Arrays, den Inhalt jedes einzelnen Objekts zu ändern und ein neues Array zurückzugeben. Diese Änderung erfolgt anhand dessen, was in der Callback-Funktion zurückgegeben wird.

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 mit der Klammer- und Punktnotation geändert. Dieser Anwendungsfall kann zur Verarbeitung oder Kondensierung empfangener Daten verwendet werden, bevor sie in einer Frontend-Anwendung gespeichert oder geparst werden.

Zusammenfassung

In diesem Tutorial haben wir vier Verwendungsmöglichkeiten der Methode .map() in JavaScript betrachtet. In Kombination mit anderen Methoden kann die Funktionalität von .map() erweitert werden. Weitere Informationen finden Sie in unserem Artikel Verwenden von Array-Methoden in JavaScript: Iterationsmethoden.