Kapitel 8: Array-Methoden (Praxis)

8.1 map() - Mapping (Transformation)

📦 Was macht map()?

map() erstellt ein neues Array, indem sie jedes Element des ursprünglichen Arrays transformiert.

// Syntax
array.map((element, index, array) => {
  // Rückgabewert wird in neues Array eingefügt
});

---

🎯 Einfaches Beispiel

const numbers = [1, 2, 3, 4, 5];

// ❌ Alte Methode (ES5) - mit for-Schleife
var doubled1 = [];
for (var i = 0; i < numbers.length; i++) {
  doubled1.push(numbers[i] * 2);
}
console.log(doubled1); // [2, 4, 6, 8, 10]

// ✅ Neue Methode (ES6) - mit map()
const doubled2 = numbers.map(n => n * 2);
console.log(doubled2); // [2, 4, 6, 8, 10]

---

🎯 Praxisbeispiel: Objekte transformieren

const users = [
  { id: 1, name: "Max", aktiv: true },
  { id: 2, name: "Erika", aktiv: false },
  { id: 3, name: "Julia", aktiv: true }
];

// Nur die Namen extrahieren
const names = users.map(user => user.name);
console.log(names); // ["Max", "Erika", "Julia"]

// Neues Array mit transformierten Objekten
const activeStatus = users.map(user => ({
  name: user.name,
  status: user.aktiv ? "Aktiv" : "Inaktiv"
}));
console.log(activeStatus);
// [
//   { name: "Max", status: "Aktiv" },
//   { name: "Erika", status: "Inaktiv" },
//   { name: "Julia", status: "Aktiv" }
// ]

---

8.2 filter() - Filtern

🔍 Was macht filter()?

filter() erstellt ein neues Array mit allen Elementen, die eine Bedingung erfüllen.

// Syntax
array.filter((element, index, array) => {
  // Bedingung (true/false)
});

---

🎯 Einfaches Beispiel

const numbers = [1, 2, 3, 4, 5, 6];

// Gerade Zahlen filtern
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4, 6]

// Zahlen größer als 3 filtern
const greaterThan3 = numbers.filter(n => n > 3);
console.log(greaterThan3); // [4, 5, 6]

---

🎯 Praxisbeispiel: Aktive User filtern

const users = [
  { id: 1, name: "Max", aktiv: true },
  { id: 2, name: "Erika", aktiv: false },
  { id: 3, name: "Julia", aktiv: true }
];

// Nur aktive User
const activeUsers = users.filter(user => user.aktiv);
console.log(activeUsers);
// [
//   { id: 1, name: "Max", aktiv: true },
//   { id: 3, name: "Julia", aktiv: true }
// ]

---

8.3 forEach() - Iterieren

🔄 Was macht forEach()?

forEach() führt eine Funktion für jedes Element aus. (Keine Rückgabe!)

// Syntax
array.forEach((element, index, array) => {
  // Code ausführen
});

---

🎯 Einfaches Beispiel

const colors = ["rot", "grün", "blau"];

// ❌ Alte Methode (ES5) - mit for-Schleife
for (var i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

// ✅ Neue Methode (ES6) - mit forEach()
colors.forEach(color => console.log(color));
// Ausgabe:
// "rot"
// "grün"
// "blau"

---

⚠️ forEach() vs map()

Methode	Rückgabewert	Zweck
forEach()	undefined	Nur um Code auszuführen
map()	Neues Array	Um Elemente zu transformieren

const numbers = [1, 2, 3];

// ❌ Falsch - forEach() gibt undefined zurück
const doubled1 = numbers.forEach(n => n * 2);
console.log(doubled1); // undefined

// ✅ Richtig - map() gibt neues Array zurück
const doubled2 = numbers.map(n => n * 2);
console.log(doubled2); // [2, 4, 6]

---

8.4 find() / findIndex() - Suchen

🔎 Was macht find()?

find() gibt das erste Element zurück, das eine Bedingung erfüllt.

// Syntax
array.find((element, index, array) => {
  // Bedingung (true/false)
});

---

🎯 find() Beispiel

const users = [
  { id: 1, name: "Max" },
  { id: 2, name: "Erika" },
  { id: 3, name: "Julia" }
];

// User mit id=2 finden
const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: "Erika" }

// Wenn nicht gefunden → undefined
const notFound = users.find(u => u.id === 99);
console.log(notFound); // undefined

---

🎯 findIndex() Beispiel

findIndex() gibt den Index des ersten gefundenen Elements zurück.

const users = [
  { id: 1, name: "Max" },
  { id: 2, name: "Erika" },
  { id: 3, name: "Julia" }
];

// Index von User mit id=2 finden
const index = users.findIndex(u => u.id === 2);
console.log(index); // 1

// Wenn nicht gefunden → -1
const notFoundIndex = users.findIndex(u => u.id === 99);
console.log(notFoundIndex); // -1

---

8.5 some() / every() - Überprüfen

✅ Was macht some()?

some() prüft, ob mindestens ein Element eine Bedingung erfüllt.

// Syntax
array.some((element, index, array) => {
  // Bedingung (true/false)
});

---

🎯 some() Beispiel

const numbers = [1, 2, 3, 4, 5];

// Gibt es eine Zahl > 3?
const hasGreaterThan3 = numbers.some(n => n > 3);
console.log(hasGreaterThan3); // true

// Gibt es eine Zahl > 10?
const hasGreaterThan10 = numbers.some(n => n > 10);
console.log(hasGreaterThan10); // false

---

✅ Was macht every()?

every() prüft, ob alle Elemente eine Bedingung erfüllen.

// Syntax
array.every((element, index, array) => {
  // Bedingung (true/false)
});

---

🎯 every() Beispiel

const numbers = [2, 4, 6, 8, 10];

// Sind alle Zahlen gerade?
const allEven = numbers.every(n => n % 2 === 0);
console.log(allEven); // true

// Sind alle Zahlen > 5?
const allGreaterThan5 = numbers.every(n => n > 5);
console.log(allGreaterThan5); // false

---

8.6 reduce() - Akkumulierung (Fortgeschritten)

🧮 Was macht reduce()?

reduce() reduziert ein Array auf einen einzelnen Wert (Summe, Produkt, Objekt, etc.).

// Syntax
array.reduce((accumulator, currentValue, index, array) => {
  // Rückgabe wird zum neuen accumulator
}, initialValue);

---

🎯 Beispiel 1: Summe berechnen

const numbers = [1, 2, 3, 4, 5];

// ❌ Alte Methode (ES5) - mit for-Schleife
var sum1 = 0;
for (var i = 0; i < numbers.length; i++) {
  sum1 += numbers[i];
}
console.log(sum1); // 15

// ✅ Neue Methode (ES6) - mit reduce()
const sum2 = numbers.reduce((total, n) => total + n, 0);
console.log(sum2); // 15

// Erklärung:
// Iteration 1: total=0, n=1 → 0+1=1
// Iteration 2: total=1, n=2 → 1+2=3
// Iteration 3: total=3, n=3 → 3+3=6
// Iteration 4: total=6, n=4 → 6+4=10
// Iteration 5: total=10, n=5 → 10+5=15

---

🎯 Beispiel 2: Häufigkeit zählen

const colors = ["rot", "blau", "rot", "grün", "blau", "rot"];

const count = colors.reduce((acc, color) => {
  acc[color] = (acc[color] || 0) + 1;
  return acc;
}, {});

console.log(count); 
// { rot: 3, blau: 2, grün: 1 }

---

🎯 Beispiel 3: Array flattening (Arrays zusammenführen)

const arrays = [[1, 2], [3, 4], [5, 6]];

const flattened = arrays.reduce((acc, arr) => [...acc, ...arr], []);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

---

8.7 Array-Duplikate entfernen: new Set()

🔥 Set für Duplikate

// Methode 1: Spread + Set
const numbers = [1, 2, 2, 3, 3, 4, 5, 5];

const unique1 = [...new Set(numbers)];
console.log(unique1); // [1, 2, 3, 4, 5]

// Methode 2: Array.from + Set
const unique2 = Array.from(new Set(numbers));
console.log(unique2); // [1, 2, 3, 4, 5]

---

🎯 Set für Objekte (nach einer Eigenschaft)

const users = [
  { id: 1, name: "Max" },
  { id: 2, name: "Erika" },
  { id: 1, name: "Max" },    // Duplikat
  { id: 3, name: "Julia" }
];

// Duplikate nach id entfernen
const uniqueUsers = Array.from(
  new Map(users.map(user => [user.id, user])).values()
);
console.log(uniqueUsers);
// [
//   { id: 1, name: "Max" },
//   { id: 2, name: "Erika" },
//   { id: 3, name: "Julia" }
// ]

---

8.8 Praxis: Listenverarbeitung, Datenfilterung, Statistik

🔥 Beispiel 1: Listenverarbeitung (Map + Filter kombinieren)

const products = [
  { id: 1, name: "Laptop", preis: 999, aktiv: true },
  { id: 2, name: "Maus", preis: 25, aktiv: true },
  { id: 3, name: "Tastatur", preis: 75, aktiv: false }
];

// 1. Nur aktive Produkte filtern
// 2. Namen extrahieren
// 3. In HTML-Liste umwandeln
const activeProductList = products
  .filter(p => p.aktiv)
  .map(p => `<li>${p.name} - ${p.preis} €</li>`)
  .join("");

console.log(`<ul>${activeProductList}</ul>`);
// "<ul><li>Laptop - 999 €</li><li>Maus - 25 €</li></ul>"

---

🔥 Beispiel 2: Datenfilterung und Statistik

const sales = [
  { produkt: "Laptop", menge: 2, preis: 999 },
  { produkt: "Maus", menge: 10, preis: 25 },
  { produkt: "Tastatur", menge: 5, preis: 75 }
];

// Gesamtumsatz berechnen
const totalRevenue = sales.reduce((total, sale) => {
  return total + (sale.menge * sale.preis);
}, 0);

console.log(`Gesamtumsatz: ${totalRevenue} €`); 
// "Gesamtumsatz: 3073 €"

// Durchschnittlicher Preis
const avgPrice = sales.reduce((sum, sale) => sum + sale.preis, 0) / sales.length;
console.log(`Durchschnittspreis: ${avgPrice} €`); 
// "Durchschnittspreis: 366.3333333333333 €"

---

🔥 Beispiel 3: Gruppierung mit reduce()

const users = [
  { name: "Max", rolle: "admin" },
  { name: "Erika", rolle: "user" },
  { name: "Julia", rolle: "admin" },
  { name: "Tom", rolle: "user" }
];

// Nach Rolle gruppieren
const grouped = users.reduce((acc, user) => {
  (acc[user.rolle] = acc[user.rolle] || []).push(user.name);
  return acc;
}, {});

console.log(grouped);
// {
//   admin: ["Max", "Julia"],
//   user: ["Erika", "Tom"]
// }

---

🎉 Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ map() - Elemente transformieren
• ✅ filter() - Elemente filtern
• ✅ forEach() - Elemente iterieren (keine Rückgabe)
• ✅ find() / findIndex() - Elemente suchen
• ✅ some() / every() - Bedingungen prüfen
• ✅ reduce() - Array auf einen Wert reduzieren
• ✅ Set für Duplikate
• ✅ Praxisanwendungen (Listenverarbeitung, Statistik)

📝 Übung

1. map() verwenden:

   const numbers = [1, 2, 3, 4, 5];
   // Verdoppele jedes Element mit map()

2. filter() verwenden:

   const numbers = [1, 2, 3, 4, 5, 6];
   // Filtere nur ungerade Zahlen

3. reduce() verwenden:

   const numbers = [1, 2, 3, 4, 5];
   // Berechne das Produkt aller Zahlen (1*2*3*4*5)

➡️ Nächstes Kapitel

In Kapitel 9 lernen wir Objekt-Erweiterungen - Kurzschreibweise, Computed Property Names, Object.assign(), Object.keys/values/entries!