Lernen Transformation von Arrays mit der Map()-Methode | Fortgeschrittene Array-Methoden und -Transformationen

In diesem Abschnitt werden mehrere häufig verwendete Methoden zur Arbeit mit Arrays in JavaScript behandelt. JS bietet eine Vielzahl von Methoden, jedoch konzentrieren wir uns speziell auf diejenigen, die sich im Alltag als besonders nützlich erweisen: map(), filter(), find(), reduce() und sort(). Diese Methoden wurden aufgrund ihres praktischen Nutzens ausgewählt und adressieren typische Anwendungsfälle in Programmieraufgaben.

Eine vollständige Liste aller Array-Methoden finden Sie in der offiziellen MDN-Dokumentation.

map()

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

Grundlegende Syntax:

array.map((element, index, array) => {
  // Callback body
});

element: Das aktuell verarbeitete Element im Array;
index: Der Index des aktuellen Elements im Array. Gibt die Position des Elements im Array an;
array: Das Array, auf dem die Methode map() aufgerufen wurde. Bezieht sich auf das ursprüngliche Array, das durchlaufen wird.

Im Folgenden wird veranschaulicht, wofür element, index und array stehen:


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

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

Wichtige Punkte zur map():

Iteration über das ursprüngliche Array Element für Element;
Keine Veränderung des ursprünglichen Arrays;
Das Ergebnis der Callback-Funktion wird zur Erstellung eines neuen Arrays verwendet;
Rückgabe eines neuen Arrays mit gleicher Länge.

Transformation von Array-Elementen

Die Methode map() ist besonders nützlich, wenn jedes Element eines Arrays transformiert werden soll, 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

1. Was macht die Methode `map()`?

2. Was ist ein zentrales Merkmal der Methode `map()`?

3. Was bewirkt im folgenden Beispiel der Ausdruck `strings.map((element) => (element += "!"))`?

War alles klar?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 1

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain how the map() method differs from forEach()?

What happens if the callback in map() does not return a value?

Can you show an example of using map() with objects instead of numbers?

Awesome!

Completion rate improved to 2.27

Swipe um das Menü anzuzeigen

Eine vollständige Liste aller Array-Methoden finden Sie in der offiziellen MDN-Dokumentation.

map()

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

Grundlegende Syntax:

array.map((element, index, array) => {
  // Callback body
});

element: Das aktuell verarbeitete Element im Array;
index: Der Index des aktuellen Elements im Array. Gibt die Position des Elements im Array an;
array: Das Array, auf dem die Methode map() aufgerufen wurde. Bezieht sich auf das ursprüngliche Array, das durchlaufen wird.

Im Folgenden wird veranschaulicht, wofür element, index und array stehen:


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

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

Wichtige Punkte zur map():

Iteration über das ursprüngliche Array Element für Element;
Keine Veränderung des ursprünglichen Arrays;
Das Ergebnis der Callback-Funktion wird zur Erstellung eines neuen Arrays verwendet;
Rückgabe eines neuen Arrays mit gleicher Länge.

Transformation von Array-Elementen

Die Methode map() ist besonders nützlich, wenn jedes Element eines Arrays transformiert werden soll, 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

1. Was macht die Methode `map()`?

2. Was ist ein zentrales Merkmal der Methode `map()`?

3. Was bewirkt im folgenden Beispiel der Ausdruck `strings.map((element) => (element += "!"))`?

War alles klar?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 1

Transformation von Arrays mit der Map()-Methode

map()

Wichtige Punkte zur map():

Transformation von Array-Elementen

1. Was macht die Methode map()?

2. Was ist ein zentrales Merkmal der Methode map()?

3. Was bewirkt im folgenden Beispiel der Ausdruck strings.map((element) => (element += "!"))?

Awesome!

Transformation von Arrays mit der Map()-Methode

map()

Wichtige Punkte zur map():

Transformation von Array-Elementen

1. Was macht die Methode map()?

2. Was ist ein zentrales Merkmal der Methode map()?

3. Was bewirkt im folgenden Beispiel der Ausdruck strings.map((element) => (element += "!"))?

1. Was macht die Methode `map()`?

2. Was ist ein zentrales Merkmal der Methode `map()`?

3. Was bewirkt im folgenden Beispiel der Ausdruck `strings.map((element) => (element += "!"))`?

1. Was macht die Methode `map()`?

2. Was ist ein zentrales Merkmal der Methode `map()`?

3. Was bewirkt im folgenden Beispiel der Ausdruck `strings.map((element) => (element += "!"))`?