Die Methode „map()' für JavaScript-Arrays verstehen: Eine einfache Anleitung

Die Methode map() erstellt ein neues Array, indem sie eine bereitgestellte Funktion (callbackFn) auf jedes Element des ursprünglichen Arrays anwendet. Es eignet sich perfekt zum Transformieren von Daten, ohne das ursprüngliche Array zu ändern.

---

Syntax

array.map(callbackFn, thisArg)

• callbackFn: Eine Funktion, die auf jedem Array-Element ausgeführt wird, mit den folgenden Argumenten:
  • Element: Aktuelles Element.
  • Index: Aktueller Index.
  • Array: Das Array, das durchlaufen wird.
• thisArg (optional): Ein Wert, der als this in der Rückruffunktion verwendet werden soll.

---

Hauptfunktionen

1. Gibt ein neues Array zurück: Das ursprüngliche Array bleibt unverändert.
2. Überspringt leere Slots: Rückruf wird nicht für nicht zugewiesene Elemente in Arrays mit geringer Dichte aufgerufen.
3. Generische Verwendung: Funktioniert mit Array-ähnlichen Objekten (z. B. NodeLists).

---

Beispiele

1. Einfaches Beispiel: Zahlen transformieren

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));
console.log(roots); // [1, 2, 3]

2. Objekte neu formatieren

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
];
const reformatted = kvArray.map(({ key, value }) => ({ [key]: value }));
console.log(reformatted); // [{ 1: 10 }, { 2: 20 }]

3. Verwenden von parseInt mit Map

// Common mistake:
console.log(["1", "2", "3"].map(parseInt)); // [1, NaN, NaN]

// Correct approach:
console.log(["1", "2", "3"].map((str) => parseInt(str, 10))); // [1, 2, 3]

// Alternative:
console.log(["1", "2", "3"].map(Number)); // [1, 2, 3]

4. Vermeiden Sie undefinierte Ergebnisse

Wenn der Rückruf nichts zurückgibt, führt dies zu undefiniert im neuen Array:

const numbers = [1, 2, 3, 4];
const result = numbers.map((num, index) => (index 



<p>Verwenden Sie filter() oder flatMap(), um unerwünschte Elemente zu entfernen.</p>

<h4>
  
  
  5. Nebenwirkungen (Anti-Pattern)
</h4>

<p>Vermeiden Sie die Verwendung von map() für Vorgänge mit Nebenwirkungen, wie z. B. das Aktualisieren von Variablen:<br>
</p>

<pre class="brush:php;toolbar:false">const cart = [5, 15, 25];
let total = 0;

// Avoid this:
const withTax = cart.map((cost) => {
  total += cost;
  return cost * 1.2;
});

// Instead, use separate methods:
const total = cart.reduce((sum, cost) => sum + cost, 0);
const withTax = cart.map((cost) => cost * 1.2);

6. Zugriff auf andere Array-Elemente

Das dritte Argument (Array) ermöglicht den Zugriff auf Nachbarn während Transformationen:

const numbers = [3, -1, 1, 4];
const averaged = numbers.map((num, idx, arr) => {
  const prev = arr[idx - 1] || 0;
  const next = arr[idx + 1] || 0;
  return (prev + num + next) / 3;
});
console.log(averaged);

---

Häufige Anwendungsfälle

1. Daten transformieren: Auf jedes Element eine Funktion anwenden.
2. Objekte neu formatieren: Ändern Sie die Datenstruktur.
3. NodeLists zuordnen: DOM-Elemente wie NodeList in Arrays umwandeln:

   const elems = document.querySelectorAll("option:checked");
   const values = Array.from(elems).map(({ value }) => value);

---

Wann man map() meiden sollte

• Kein Rückgabewert erforderlich: Verwenden Sie stattdessen forEach() oder for...of.
• Daten verändern: Erstellen Sie neue Objekte, anstatt die ursprünglichen zu ändern:

   const products = [{ name: "phone" }];
   const updated = products.map((p) => ({ ...p, price: 100 }));

---

Abschließende Tipps

• Nur ​​reine Funktionen: Stellen Sie sicher, dass der Rückruf keine Nebenwirkungen hat.
• Argumente verstehen: Beachten Sie, dass map() Element, Index und Array an den Rückruf übergibt.
• Vermeiden Sie Sparse Arrays: Leere Slots bleiben leer.

Verwenden Sie map(), um Ihren Code bei der effizienten Transformation von Arrays zu vereinfachen!

Das obige ist der detaillierte Inhalt vonDie Methode „map()' für JavaScript-Arrays verstehen: Eine einfache Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!