Map() Methode

Dieser Abschnitt wird mehrere häufig verwendete Methoden zur Arbeit mit Arrays in JavaScript untersuchen. JS bietet eine Vielzahl von Methoden, aber wir werden uns speziell auf diejenigen konzentrieren, die sich im täglichen Programmieren als unverzichtbar erweisen: map(), filter(), find(), reduce() und sort(). Diese Methoden werden aufgrund ihrer praktischen Nützlichkeit ausgewählt, um häufige Szenarien zu adressieren, die bei Codierungsaufgaben auftreten.

Für eine umfassende Liste aller Array-Methoden können Sie die offizielle MDN-Dokumentation einsehen.

map()

Die map()-Methode iteriert über jedes Element des ursprünglichen Arrays und wendet eine angegebene Callback-Funktion an, um ein neues Array zu erzeugen.

Hier ist die grundlegende Syntax:

element: Dies ist das aktuelle Element, das im Array verarbeitet wird;
index: Dies ist der Index des aktuellen Elements im Array. Es repräsentiert die Position des Elements im Array;
array: Dies ist das Array, auf dem die map()-Methode aufgerufen wurde. Es bezieht sich auf das ursprüngliche Array, über das iteriert wird.

Lassen Sie uns veranschaulichen, was element, index und array darstellen:


              12345
            
const products = ["Ball", "Shoes", "Mouse"];

const modifiedProducts = products.map((element, index, array) => {
  console.log(`Element: ${element}, Index: ${index}, Array: ${array}`);
});

Wichtige Punkte zur Erinnerung über die map():

Sie iteriert über das ursprüngliche Array Element für Element;
Sie verändert das ursprüngliche Array nicht;
Das Ergebnis der Callback-Funktion wird verwendet, um ein neues Array zu erstellen;
Sie gibt ein neues Array mit derselben Länge zurück.

Transformation von Array-Elementen

Die map()-Methode ist ideal, wenn wir jedes Element eines Arrays transformieren müssen, ohne das ursprüngliche Array zu verändern. Betrachten Sie das folgende Beispiel:


              12345678910
            
const numbers = [3, 5, 11, 32, 87];

/* Use the `map` method to create a new array (`doubledNumbers`) 
  by doubling each element of the `numbers` array. */
const doubledNumbers = numbers.map((element) => {
  return element * 2;
});

console.log("Initial array:", numbers); // Output: 3, 5, 11, 32, 87
console.log("Modified array:", doubledNumbers); // Output: 6, 10, 22, 64, 174