So verwenden Sie JavaScript-Karten – .map()

Von der klassischen for-Schleife bis zur forEach()-Methode werden verschiedene Techniken und Methoden verwendet, um Datensätze in JavaScript zu iterieren. Eine der beliebtesten Methoden ist die .map()-Methode. .map() erstellt ein Array, indem für jedes Element im übergeordneten Array eine bestimmte Funktion aufgerufen wird. .Karte() ist eine nicht mutierende Methode, die im Gegensatz zu ein neues js-Array erstellt mutierende Methoden, die nur Änderungen am aufrufenden Array vornehmen.

Diese Methode kann bei der Arbeit mit Arrays viele Verwendungsmöglichkeiten haben. In diesem Tutorial sehen Sie sich vier bemerkenswerte Verwendungsmöglichkeiten von .map() an. in JavaScript: Aufrufen einer Funktion aus Array-Elementen, Konvertieren von Zeichenfolgen in Arrays, Rendering von Listen in JavaScript-Bibliotheken und Neuformatierung Array-Objekte.

So rufen Sie eine JS-Funktion für jedes Element in einem Array auf

.map() akzeptiert eine Rückruffunktion als eines ihrer Argumente und ein wichtiger Parameter dieser Funktion ist der aktuelle Wert des Elements, das von der Funktion verarbeitet wird. Das ist ein erforderlicher Parameter. Mit diesem Parameter können Sie jedes Element in einem ändern Array und geben Sie es als geändertes Mitglied Ihres neuen Arrays zurück.

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 im protokolliert Konsole:

Output[ 4, 6, 8, 10, 70 ]

Dies kann weiter vereinfacht werden, um es sauberer zu machen 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 im protokolliert Konsole:

Output[ 4, 6, 8, 10, 70 ]

Code wie sweetArray.map(makeSweeter) macht Ihren Code etwas lesbarer.

So konvertieren Sie einen JS-String in ein Array

.map() gehört bekanntermaßen zum Array-Prototyp. In In diesem Schritt konvertieren Sie damit einen String in ein Array. Du bist nicht Hier wird die Methode entwickelt, die für Strings funktioniert. Vielmehr verwenden Sie die spezielle .call()-Methode.

Alles in JavaScript ist ein Objekt, und Methoden sind Funktionen, die an diese Objekte angehängt sind. Mit .call() können Sie den Kontext eines Objekts für ein anderes verwenden. Daher würden Sie den Kontext von .map() in einem Array in einen String 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:

const sweetArray = [2, 3, 4, 5, 35]const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2})console.log(sweeterArray)

Hier haben Sie den Kontext von .map() für einen String verwendet und ein Argument der Funktion übergeben, die .map() erwartet.

Dies funktioniert wie die .split()-Methode von eine Zeichenfolge, mit der Ausnahme, dass jedes einzelne Zeichenfolgenzeichen geändert werden kann, bevor es in einem Array zurückgegeben wird.

So rendern Sie Listen in JavaScript Bibliotheken

JavaScript-Bibliotheken wie React verwenden .map(), um Elemente in einer Liste darzustellen. Dies erfordert jedoch JSX-Syntax, da die .map()-Methode in JSX-Syntax eingeschlossen ist.

Hier ist ein Beispiel einer React-Komponente:

Output[ 4, 6, 8, 10, 70 ]

Dies ist eine zustandslose Komponente in React, die rendert ein Div mit einer Liste. Die einzelnen Listenelemente werden mit .map() gerendert, um das Namensarray zu durchlaufen. Diese Komponente wird mithilfe von ReactDOM auf dem DOM-Element mit der Root-ID gerendert.

So formatieren Sie JavaScript-Array-Objekte neu

.map() kann zum Durchlaufen von Objekten in einem verwendet werden Array und ändern Sie, ähnlich wie bei herkömmlichen Arrays, das Inhalt jedes einzelnen Objekts und gibt ein neues Array zurück. Das Die Änderung erfolgt basierend auf dem, was in der Rückruffunktion zurückgegeben wird.

Hier ist ein Beispiel:

// 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);

Diese Ausgabe wird im protokolliert Konsole:

Output[ 4, 6, 8, 10, 70 ]

Hier haben Sie jedes Objekt im Array mithilfe der Klammer und des Punktes geändert Notation. Dieser Anwendungsfall kann zur Verarbeitung oder Verdichtung empfangener Daten genutzt werden Daten, bevor sie in einer Front-End-Anwendung gespeichert oder analysiert werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript-Karten – .map(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!