JavaScript -Karte
Die Arrays Kartenmethode wird verwendet, um ein neues zugeordnetes Array basierend auf dem Rückgabewert der Rückruffunktion für jedes Element zu erstellen.
var mappedarray = Array.Karte (Callbackfunction, thisvalue)Der Ruf zurück ist die Funktion, die jedes Mal für ein einzelnes Element aufgerufen wird und einen Wert zurückgibt, der in einem neuen Array gespeichert wird. Die Syntax für die Rückruffunktion ist
Funktion (Wert, [Index [, Array]])Wert ist ein notwendiges Argument, das eigentlich ein einzelnes Element des Arrays ist.
Der Index ist ein optionales Argument, das als Index jedes Elements in der Rückruffunktion verwendet wird.
Der Array ist auch ein optionales Argument. Wir können dieses Argument übergeben, wenn wir das Array in der Rückruffunktion verwenden möchten.
dieser Wert ist der Wert, den wir übergeben möchten, der in der Rückruffunktion als „diese“ verwendet wird. Andernfalls wird „undefiniert“ bestanden.
JavaScript bietet die for… in Loop und foreach Loop zum Iterieren durch Elemente und Manipulation von Arrays. Aber warum brauchen wir außerdem eine Kartenmethode? Dafür gibt es zwei Hauptgründe. Eine ist die Besorgnisstrennung und die zweite ist die einfache Syntax für solche Aufgaben. Versuchen wir also verschiedene Beispiele, um den Zweck und die richtige Verwendung davon zu demonstrieren.
Beispiele
Zunächst werden wir eine einfache Demonstration haben, in der wir eine einfache Reihe von Zahlen haben, auf denen wir versuchen werden, einen einfachen arithmetischen Betrieb über jedes einzelne Element auszuführen.
var arr = [4, 8, 16, 64, 49];Bevor Sie die Kartenmethode auf dieses Array anwenden. Wir werden zuerst eine Rückruffunktion schreiben, auf die wir unsere Kartenfunktion aufrufen können, in der wir jedes Element mit 10 multiplizieren und ein neues Array haben möchten.
Funktion multiplizieren (Element)var NewElement = Element * 10;
NeueLement zurückgeben;
Alles ist so eingerichtet, dass die Kartenmethode über das Array angewendet wird und die Ergebnisse erforderlich sind.
var newarr = arr.Karte (multiplizieren);Wenn wir uns jetzt den „Newarr“ ansehen,
Konsole.log (newarr);Wir können das neueste kartierte Array in der Ausgabe gemäß unserer Anforderung sehen.
Denken Sie daran, dass die Länge des neuen kartierten Arrays definitiv dem ursprünglichen Array entspricht.
Es gibt eine kürzere Möglichkeit, die gleiche Aufgabe mithilfe der Pfeil oder der anonymen Funktion in einer Kartenmethode zu erledigen. Wir können also eine Rückruffunktion in einer Kartenmethode wie dieser schreiben
var newarr = arr.map ((element) =>Rückgabeelement * 10
)
Oder wenn wir ein Profi sein und es prägnanter machen wollen. Wir können das schaffen
var newarr = arr.Karte (e => e * 10)In Ordnung! Dies war also die sehr grundlegende Demonstration der Kartenmethode und verschiedene Möglichkeiten, die Rückruffunktion zu schreiben. Diese Funktion ist jedoch nützlicher, wenn wir mit einer Reihe von Objekten spielen. Hier geschieht die wahre Implementierung.
Verwenden Sie eine Karte mit einer Reihe von Objekten
In diesem Beispiel nehmen wir an, dass eine Reihe von Objekten, in denen jedes Objekt die Informationen eines Spielers enthält. Name des Spielers und sein Ausweis.
var arr = [ID: 12, Name: "James",
ID: 36, Name: "Morgan",
ID: 66, Name: "Jordan"
];
Nehmen wir nun an, wir möchten die IDs aus jedem Objekt extrahieren und ein neues Ausweis von IDs haben.
Aber um zu verstehen, wie unterschiedlich die Kartenmethode unterschiedlich ist und besser hilft als die Foreach -Schleife. Wir werden beide (Kartenmethode und Foreach Loop) versuchen, dieselbe Aufgabe zu erledigen und den Unterschied zu lernen.
Zuerst werden wir versuchen, IDs mithilfe der Foreach -Schleife und dann mit der MAP -Methode IDs zu extrahieren.
var extrahiertes = [];arr.foreach ((Element) =>
Return Extractedids.Push (Element.Ausweis);
)
Wenn wir uns die extrahierten IDs ansehen.
Konsole.log (extrahierte);
Wir haben sie in einem Array getrennt. Jetzt zeigen wir jetzt die gleiche Ausgabe mit der MAP -Methode.
Rückgabeelement.Ausweis;
)
Konsole.log (extrahierte);
Durch die Betrachtung des Codeunterschieds und des gleichen Ausgangs können wir den wahren Unterschied zwischen den beiden Methoden (foreach und map) erkennen. Die Syntax und die Trennung von Besorgnis.
Ebenso können wir viele andere Operationen ausführen. Wenn wir spielen müssen und einige Daten aus dem Array von Objekten erhalten. Wir nehmen an, dass ein Array von Objekten, in denen jedes Objekt zwei Eigenschaften enthält: Vorname und Nachname.
var arr = [FirstName: "John", LastName: "Doe",
FirstName: "Morgan", LastName: "Freeman",
FirstName: "Jordan", Lastname: "Peterson"
];
Jetzt möchten wir ein Array haben, das die vollständigen Namen enthält. Wir werden also eine Kartenfunktion wie diese schreiben, um unseren Zweck zu erfüllen
var fullname = arr.Karte ((Person) =>Rückkehr Person.FirstName + " + Person.Familienname, Nachname
)
Konsole.log (fullName);
Wie Sie sehen können, haben wir ein separates Array mit vollständigen Namen. Das ist großartig.
Dies sind also einige der grundlegenden und unterschiedlichen Möglichkeiten, wie eine Kartenfunktion verwendet werden kann, um unsere Entwicklungsanforderungen zu erfüllen, und hilft im Leben eines jeden JavaScript -Entwicklers bei.
Abschluss
In diesem Artikel haben wir die am häufigsten verwendete Map () -Methode von JavaScript für Arrays kennengelernt und einige der verschiedenen Möglichkeiten gelernt, die Kartenmethode zu verwenden. Dieser Artikel erklärt das Konzept der Kartenmethode auf eine so einfache und tiefgreifende Weise, dass jeder Anfänger -Codierer sie verstehen und seinen Bedürfnissen nutzen kann. Lernen, arbeiten und sammeln Sie Erfahrung in JavaScript mit LinuxHint.com, um es besser zu verstehen. Vielen Dank!