Grundlegendes zur JavaScript-Array-map()-Methode

Einführung in map()

Die Methode „map()“ erstellt ein neues Array, das mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array gefüllt wird. Es handelt sich um eine funktionale Programmiertechnik, die es Ihnen ermöglicht, jedes Element eines Arrays in ein neues Element umzuwandeln und so ein neues Array zu erstellen, ohne das Original zu ändern.

---

Syntax

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

Oder mit Pfeilfunktionen:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

Parameter

• Rückruf: Funktion, die ein Element des neuen Arrays erzeugt und dabei drei Argumente annimmt:
  • currentValue: Das aktuell verarbeitete Element.
  • Index (optional): Der Index des aktuellen Elements.
  • Array (optional): Die Array-Map wurde aufgerufen.
• thisArg (optional): Wert, der beim Ausführen eines Rückrufs als dieser verwendet werden soll.

---

Rückgabewert

Ein neues Array, wobei jedes Element das Ergebnis der Callback-Funktion ist.

---

So funktioniert map()

• Unveränderlichkeit: map() verändert das ursprüngliche Array nicht.
• Elementweise Transformation: Wendet die Callback-Funktion auf jedes Element an.
• Gibt ein neues Array zurück: Sammelt die Ergebnisse in einem neuen Array.

---

Beispiele

a. Zahlen zuordnen

Beispiel: Multiplizieren Sie jede Zahl in einem Array mit 2.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b. Strings transformieren

Beispiel: Konvertieren Sie ein Array von Zeichenfolgen in Großbuchstaben.

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

c. Objekteigenschaften extrahieren

Beispiel: Extrahieren Sie eine bestimmte Eigenschaft aus einem Array von Objekten.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

d. Mapping über Arrays von Objekten

Beispiel: Transformieren Sie jedes Objekt in einem Array.

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

Unterschied zwischen map() und forEach()

• map():
  • Gibt ein neues Array zurück.
  • Wird verwendet, wenn Sie jedes Element transformieren und die Ergebnisse sammeln möchten.
• forEach():
  • Gibt undefiniert zurück.
  • Wird verwendet, wenn Sie Nebeneffekte ausführen möchten (z. B. Protokollierung, Änderung externer Variablen) und kein neues Array benötigen.

Beispiel mit forEach():

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

---

Verwendung von map() mit Pfeilfunktionen

Pfeilfunktionen bieten eine prägnante Syntax zum Schreiben der Rückruffunktion.

Beispiel:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

map() in TypeScript

TypeScript fügt JavaScript statische Typisierung hinzu, die dabei helfen kann, Fehler beim Kompilieren zu erkennen.

a. Geben Sie Anmerkungen ein

Sie können Typen für die Elemente im Array und den Rückgabetyp angeben.

Beispiel:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b. Generische Typen

Sie können generische Funktionen definieren, die mit jedem Typ funktionieren.

Beispiel:

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

---

Häufige Anwendungsfälle

• Daten transformieren: Konvertieren Sie Daten von einem Formular in ein anderes.
• Werte extrahieren: Ziehen Sie bestimmte Felder aus Objekten heraus.
• Daten zusammenstellen: Erstellen Sie neue Arrays basierend auf vorhandenen Daten.
• Berechnungen: Führen Sie Berechnungen für jedes Element durch.

---

Fortgeschrittene Themen

a. Verkettung von map() mit anderen Array-Methoden

Sie können map() mit anderen Array-Methoden wie filter(), Reduce() usw. verketten.

Beispiel:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

b. Umgang mit asynchronen Vorgängen

map() verarbeitet keine asynchronen Vorgänge innerhalb des Rückrufs. Wenn Sie asynchrone Vorgänge ausführen müssen, sollten Sie die Verwendung von Promise.all() mit map() in Betracht ziehen.

Beispiel:

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

Best Practices

• Verwenden Sie „map()“ nicht für Nebenwirkungen: Verwenden Sie stattdessen „forEach()“, wenn Sie kein neues Array benötigen.
• Vermeiden Sie es, das ursprüngliche Array zu ändern: map() sollte das ursprüngliche Array oder seine Elemente nicht verändern.
• Einen Wert zurückgeben: Stellen Sie sicher, dass Ihre Rückruffunktion einen Wert zurückgibt; Andernfalls enthält das neue Array undefinierte Elemente.
• Verwenden Sie Pfeilfunktionen für mehr Prägnanz: Sie machen Ihren Code kürzer und besser lesbar.

---

Fazit

Das Verständnis der Funktion „map()“ ist für eine effektive Array-Manipulation in JavaScript und TypeScript unerlässlich. Es handelt sich um eine vielseitige Methode, mit der Sie Daten sauber und effizient transformieren können. Denken Sie daran, dass map():

• Erstellt ein neues Array.
• Wendet auf jedes Element eine Funktion an.
• Ändert das ursprüngliche Array nicht.

Durch die Beherrschung von map() schreiben Sie prägnanteren und funktionaleren Code, was zu einer besseren Wartbarkeit und Lesbarkeit führt.

Vielen Dank fürs Lesen. Wenn Ihnen dieser Inhalt gefällt, können Sie mir gerne einen Kaffee spendieren:
https://buymeacoffee.com/kellyblaire

Das obige ist der detaillierte Inhalt vonGrundlegendes zur JavaScript-Array-map()-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!