JavaScript Array Methods

Arrays sind eine der wichtigsten Datenstrukturen in JavaScript. Die modernen Array Methods machen das Arbeiten mit Arrays super einfach und elegant!

Warum Array Methods?

Vorher vs. Nachher

// ❌ Old School - Mit for-Schleife
const numbers = [1, 2, 3, 4, 5];
const doubled = [];

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

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

// ✅ Modern - Mit map()
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

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

Vorteile:

✅ Kürzer und lesbarer
✅ Weniger Fehleranfällig
✅ Funktional und immutable
✅ Chainable (verkettbar)

1. map() - Transformiere jedes Element

map() erstellt ein neues Array, indem es eine Funktion auf jedes Element anwendet.

map() Basics

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

// Verdoppeln
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Quadrieren
const squared = numbers.map(num => num ** 2);
console.log(squared); // [1, 4, 9, 16, 25]

// String-Transformation
const words = ['hello', 'world', 'javascript'];
const uppercase = words.map(word => word.toUpperCase());
console.log(uppercase); // ['HELLO', 'WORLD', 'JAVASCRIPT']

Praktisches Beispiel: User-Daten transformieren

User-Namen extrahieren

const users = [
  { id: 1, name: 'Anna', age: 25 },
  { id: 2, name: 'Max', age: 30 },
  { id: 3, name: 'Lisa', age: 28 }
];

// Nur Namen extrahieren
const names = users.map(user => user.name);
console.log(names); // ['Anna', 'Max', 'Lisa']

// Objekte transformieren
const userCards = users.map(user => ({
  id: user.id,
  displayName: user.name.toUpperCase(),
  isAdult: user.age >= 18
}));

console.log(userCards);
// [
//   { id: 1, displayName: 'ANNA', isAdult: true },
//   { id: 2, displayName: 'MAX', isAdult: true },
//   { id: 3, displayName: 'LISA', isAdult: true }
// ]

map() mit Index und Array

Alle Parameter von map()

const numbers = [10, 20, 30];

// map(element, index, array)
const result = numbers.map((num, index, arr) => {
  return {
    value: num,
    index: index,
    isLast: index === arr.length - 1
  };
});

console.log(result);
// [
//   { value: 10, index: 0, isLast: false },
//   { value: 20, index: 1, isLast: false },
//   { value: 30, index: 2, isLast: true }
// ]

2. filter() - Filtern nach Bedingung

filter() erstellt ein neues Array mit allen Elementen, die einen Test bestehen.

filter() Basics

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Nur gerade Zahlen
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4, 6, 8, 10]

// Nur ungerade Zahlen
const odd = numbers.filter(num => num % 2 !== 0);
console.log(odd); // [1, 3, 5, 7, 9]

// Zahlen größer als 5
const bigNumbers = numbers.filter(num => num > 5);
console.log(bigNumbers); // [6, 7, 8, 9, 10]

Praktisches Beispiel: User filtern

User nach Kriterien filtern

const users = [
  { name: 'Anna', age: 17, active: true },
  { name: 'Max', age: 25, active: true },
  { name: 'Lisa', age: 30, active: false },
  { name: 'Tom', age: 22, active: true }
];

// Nur erwachsene User
const adults = users.filter(user => user.age >= 18);
console.log(adults);
// [Max, Lisa, Tom]

// Nur aktive erwachsene User
const activeAdults = users.filter(user => {
  return user.age >= 18 && user.active === true;
});
console.log(activeAdults);
// [Max, Tom]

// Nur User mit Namen über 3 Buchstaben
const longNames = users.filter(user => user.name.length > 3);
console.log(longNames);
// [Anna, Lisa]

3. reduce() - Reduziere auf einen Wert

reduce() ist der mächtigste Array Method! Er reduziert ein Array auf einen einzigen Wert.

reduce() Basics - Summe berechnen

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

// Summe berechnen
const sum = numbers.reduce((accumulator, current) => {
  return accumulator + current;
}, 0); // 0 ist der Startwert

console.log(sum); // 15

// Schritt für Schritt:
// 1. accumulator = 0, current = 1 → return 0 + 1 = 1
// 2. accumulator = 1, current = 2 → return 1 + 2 = 3
// 3. accumulator = 3, current = 3 → return 3 + 3 = 6
// 4. accumulator = 6, current = 4 → return 6 + 4 = 10
// 5. accumulator = 10, current = 5 → return 10 + 5 = 15

Praktische reduce() Beispiele

reduce() - Verschiedene Use Cases

const numbers = [10, 20, 30, 40];

// 1. Summe
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 100

// 2. Produkt (alle multiplizieren)
const product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product); // 240000

// 3. Maximum finden
const max = numbers.reduce((acc, num) => {
  return num > acc ? num : acc;
}, numbers[0]);
console.log(max); // 40

// 4. Durchschnitt berechnen
const average = numbers.reduce((acc, num, index, arr) => {
  acc += num;
  if (index === arr.length - 1) {
    return acc / arr.length;
  }
  return acc;
}, 0);
console.log(average); // 25

reduce() für komplexe Transformationen

Array in Objekt umwandeln

const users = [
  { id: 1, name: 'Anna' },
  { id: 2, name: 'Max' },
  { id: 3, name: 'Lisa' }
];

// Array in Objekt mit IDs als Keys
const usersById = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});

console.log(usersById);
// {
//   1: { id: 1, name: 'Anna' },
//   2: { id: 2, name: 'Max' },
//   3: { id: 3, name: 'Lisa' }
// }

Gruppieren mit reduce()

const products = [
  { name: 'Laptop', category: 'Electronics', price: 1000 },
  { name: 'Phone', category: 'Electronics', price: 500 },
  { name: 'Shirt', category: 'Clothing', price: 30 },
  { name: 'Pants', category: 'Clothing', price: 50 }
];

// Nach Kategorie gruppieren
const grouped = products.reduce((acc, product) => {
  const category = product.category;

  if (!acc[category]) {
    acc[category] = [];
  }

  acc[category].push(product);
  return acc;
}, {});

console.log(grouped);
// {
//   Electronics: [
//     { name: 'Laptop', category: 'Electronics', price: 1000 },
//     { name: 'Phone', category: 'Electronics', price: 500 }
//   ],
//   Clothing: [
//     { name: 'Shirt', category: 'Clothing', price: 30 },
//     { name: 'Pants', category: 'Clothing', price: 50 }
//   ]
// }

4. find() - Finde erstes Element

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

find() Basics

const users = [
  { id: 1, name: 'Anna', age: 25 },
  { id: 2, name: 'Max', age: 30 },
  { id: 3, name: 'Lisa', age: 28 }
];

// Finde User mit ID 2
const user = users.find(u => u.id === 2);
console.log(user);
// { id: 2, name: 'Max', age: 30 }

// Finde ersten User über 26
const older = users.find(u => u.age > 26);
console.log(older);
// { id: 2, name: 'Max', age: 30 }

// Nicht gefunden? → undefined
const notFound = users.find(u => u.id === 999);
console.log(notFound); // undefined

5. findIndex() - Finde Index

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

findIndex() Basics

const numbers = [10, 20, 30, 40, 50];

// Finde Index von 30
const index = numbers.findIndex(num => num === 30);
console.log(index); // 2

// Finde Index der ersten Zahl > 25
const indexBig = numbers.findIndex(num => num > 25);
console.log(indexBig); // 2 (weil 30 an Index 2)

// Nicht gefunden? → -1
const notFound = numbers.findIndex(num => num > 100);
console.log(notFound); // -1

6. some() & every() - Testen

some() - Mindestens eines?

some() gibt true zurück, wenn mindestens ein Element die Bedingung erfüllt.

some() Beispiele

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

// Gibt es gerade Zahlen?
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

// Gibt es Zahlen > 10?
const hasBig = numbers.some(num => num > 10);
console.log(hasBig); // false

const users = [
  { name: 'Anna', age: 17 },
  { name: 'Max', age: 25 }
];

// Gibt es minderjährige User?
const hasMinor = users.some(user => user.age < 18);
console.log(hasMinor); // true

every() - Alle?

every() gibt true zurück, wenn alle Elemente die Bedingung erfüllen.

every() Beispiele

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

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

// Sind alle > 5?
const allBig = numbers.every(num => num > 5);
console.log(allBig); // false (2 und 4 sind nicht > 5)

const users = [
  { name: 'Anna', age: 25 },
  { name: 'Max', age: 30 }
];

// Sind alle volljährig?
const allAdults = users.every(user => user.age >= 18);
console.log(allAdults); // true

7. forEach() - Über jedes Element iterieren

forEach() führt eine Funktion für jedes Element aus (gibt nichts zurück!).

forEach() Basics

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

// Console.log für jedes Element
numbers.forEach(num => {
  console.log(num);
});
// Output:
// 1
// 2
// 3
// 4
// 5

// Mit Index
numbers.forEach((num, index) => {
  console.log(`Index ${index}: ${num}`);
});
// Output:
// Index 0: 1
// Index 1: 2
// Index 2: 3
// Index 3: 4
// Index 4: 5

Wichtig: forEach() gibt nichts zurück! Für Transformationen nutze map().

8. sort() - Sortieren

sort() sortiert das Array in-place (verändert das Original!).

sort() Basics

// Strings sortieren
const fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry']

// ⚠️ Zahlen sortieren - VORSICHT!
const numbers = [10, 5, 40, 25, 1000];
numbers.sort();
console.log(numbers); // [10, 1000, 25, 40, 5] ❌ FALSCH!

// ✅ RICHTIG - Mit Compare-Funktion
numbers.sort((a, b) => a - b);
console.log(numbers); // [5, 10, 25, 40, 1000] ✅

// Absteigend sortieren
numbers.sort((a, b) => b - a);
console.log(numbers); // [1000, 40, 25, 10, 5]

Objekte sortieren

Objekte nach Property sortieren

const users = [
  { name: 'Max', age: 30 },
  { name: 'Anna', age: 25 },
  { name: 'Lisa', age: 28 }
];

// Nach Alter sortieren (aufsteigend)
users.sort((a, b) => a.age - b.age);
console.log(users);
// [
//   { name: 'Anna', age: 25 },
//   { name: 'Lisa', age: 28 },
//   { name: 'Max', age: 30 }
// ]

// Nach Namen sortieren (alphabetisch)
users.sort((a, b) => a.name.localeCompare(b.name));
console.log(users);
// [
//   { name: 'Anna', age: 25 },
//   { name: 'Lisa', age: 28 },
//   { name: 'Max', age: 30 }
// ]

9. includes() - Enthält Element?

includes() prüft, ob ein Element im Array enthalten ist.

includes() Beispiele

const fruits = ['apple', 'banana', 'cherry'];

console.log(fruits.includes('banana')); // true
console.log(fruits.includes('orange')); // false

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

console.log(numbers.includes(3)); // true
console.log(numbers.includes(10)); // false

// Ab bestimmtem Index suchen
console.log(numbers.includes(3, 3)); // false (ab Index 3 suchen)

10. slice() & splice()

slice() - Kopiere Teilbereich

slice() erstellt eine Kopie eines Teilbereichs (verändert Original NICHT).

slice() Beispiele

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

// Von Index 2 bis 4 (exklusiv)
const sliced = numbers.slice(2, 4);
console.log(sliced); // [2, 3]
console.log(numbers); // [0, 1, 2, 3, 4, 5] (unverändert)

// Ab Index 3 bis Ende
const fromThree = numbers.slice(3);
console.log(fromThree); // [3, 4, 5]

// Letzte 2 Elemente
const lastTwo = numbers.slice(-2);
console.log(lastTwo); // [4, 5]

// Komplette Kopie
const copy = numbers.slice();
console.log(copy); // [0, 1, 2, 3, 4, 5]

splice() - Verändere Array

splice() verändert das Original-Array (entfernen, hinzufügen, ersetzen).

splice() Beispiele

let numbers = [0, 1, 2, 3, 4, 5];

// Entferne 2 Elemente ab Index 2
const removed = numbers.splice(2, 2);
console.log(removed); // [2, 3] (entfernte Elemente)
console.log(numbers); // [0, 1, 4, 5] (verändert!)

// Füge Elemente ein (ohne löschen)
numbers = [0, 1, 2, 3, 4, 5];
numbers.splice(2, 0, 'a', 'b');
console.log(numbers); // [0, 1, 'a', 'b', 2, 3, 4, 5]

// Ersetze Elemente
numbers = [0, 1, 2, 3, 4, 5];
numbers.splice(2, 2, 'X', 'Y');
console.log(numbers); // [0, 1, 'X', 'Y', 4, 5]

Method Chaining - Verkettung

Das Beste an Array Methods? Du kannst sie verketten!

Method Chaining - Elegant und mächtig

const users = [
  { name: 'Anna', age: 17, active: true },
  { name: 'Max', age: 25, active: true },
  { name: 'Lisa', age: 30, active: false },
  { name: 'Tom', age: 22, active: true },
  { name: 'Sarah', age: 19, active: true }
];

// Finde aktive, volljährige User und gib Namen zurück
const activeAdultNames = users
  .filter(user => user.active)           // Nur aktive
  .filter(user => user.age >= 18)        // Nur volljährige
  .map(user => user.name)                // Nur Namen
  .sort();                                // Alphabetisch sortieren

console.log(activeAdultNames);
// ['Max', 'Sarah', 'Tom']

Komplexes Beispiel: E-Commerce

const products = [
  { name: 'Laptop', price: 1000, category: 'Electronics', inStock: true },
  { name: 'Phone', price: 500, category: 'Electronics', inStock: false },
  { name: 'Shirt', price: 30, category: 'Clothing', inStock: true },
  { name: 'Pants', price: 50, category: 'Clothing', inStock: true },
  { name: 'Tablet', price: 400, category: 'Electronics', inStock: true }
];

// Finde verfügbare Electronics unter 600€ und berechne Gesamtpreis
const totalPrice = products
  .filter(p => p.category === 'Electronics')  // Nur Electronics
  .filter(p => p.inStock)                      // Nur verfügbar
  .filter(p => p.price < 600)                  // Unter 600€
  .map(p => p.price)                           // Nur Preise
  .reduce((sum, price) => sum + price, 0);     // Summe

console.log(totalPrice); // 400 (nur Tablet)

// Liste der verfügbaren Produkte (sortiert)
const availableProducts = products
  .filter(p => p.inStock)
  .map(p => ({
    name: p.name,
    price: `${p.price}€`,
    category: p.category
  }))
  .sort((a, b) => a.name.localeCompare(b.name));

console.log(availableProducts);

📝 Quiz

Welche Array Method verändert das Original-Array?

map()filter()sort()slice()

⚡

Tipps & Tricks

Performance: forEach vs. map

// ❌ FALSCH - forEach ändert externes Array
const doubled = [];
numbers.forEach(num => {
  doubled.push(num * 2);
});

// ✅ RICHTIG - map erstellt neues Array
const doubled = numbers.map(num => num * 2);

Array kopieren

const original = [1, 2, 3];

// Methode 1: slice()
const copy1 = original.slice();

// Methode 2: Spread operator
const copy2 = [...original];

// Methode 3: Array.from()
const copy3 = Array.from(original);

Mehrere Filter kombinieren

// ❌ Okay, aber mehrere Durchläufe
const result = numbers
  .filter(n => n > 10)
  .filter(n => n < 100)
  .filter(n => n % 2 === 0);

// ✅ Besser - Ein Durchlauf
const result = numbers.filter(n => {
  return n > 10 && n < 100 && n % 2 === 0;
});

Optional Chaining mit find()

const users = [
  { name: 'Anna', address: { city: 'Berlin' } },
  { name: 'Max' } // Kein address
];

// ❌ Fehler wenn address nicht existiert
const city = users.find(u => u.name === 'Max').address.city;

// ✅ Sicher mit Optional Chaining
const city = users.find(u => u.name === 'Max')?.address?.city;
console.log(city); // undefined (kein Error!)

Flatten (verschachtelte Arrays)

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

// flat() - Ein Level
const flattened = nested.flat();
console.log(flattened); // [1, 2, 3, 4, 5, 6]

// Tief verschachtelt
const deep = [1, [2, [3, [4, 5]]]];
const flatDeep = deep.flat(Infinity);
console.log(flatDeep); // [1, 2, 3, 4, 5]

❌

Häufige Fehler

Fehler 1: forEach() returnen

❌ FALSCH:

const doubled = numbers.forEach(num => num * 2);
console.log(doubled); // undefined ❌

✅ RICHTIG:

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10] ✅

Fehler 2: sort() ohne Compare-Funktion bei Zahlen

❌ FALSCH:

const numbers = [10, 5, 40, 25, 1000];
numbers.sort();
console.log(numbers); // [10, 1000, 25, 40, 5] ❌

✅ RICHTIG:

const numbers = [10, 5, 40, 25, 1000];
numbers.sort((a, b) => a - b);
console.log(numbers); // [5, 10, 25, 40, 1000] ✅

Fehler 3: reduce() ohne Initial Value

❌ GEFÄHRLICH:

const numbers = [];
const sum = numbers.reduce((acc, num) => acc + num);
// TypeError: Reduce of empty array with no initial value

✅ RICHTIG:

const numbers = [];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 0 ✅

Fehler 4: find() mit map() verwechseln

❌ FALSCH:

// find() gibt nur EIN Element zurück!
const users = [
  { id: 1, name: 'Anna' },
  { id: 2, name: 'Max' }
];

const names = users.find(u => u.name);
console.log(names); // { id: 1, name: 'Anna' } ❌ (nur erstes)

✅ RICHTIG:

// map() für alle Elemente
const names = users.map(u => u.name);
console.log(names); // ['Anna', 'Max'] ✅

🎯

Zusammenfassung

Du hast gelernt:

✅ map() - Transformiere jedes Element → neues Array
✅ filter() - Filtere nach Bedingung → neues Array
✅ reduce() - Reduziere auf einen Wert
✅ find() / findIndex() - Finde erstes passendes Element
✅ some() / every() - Teste Bedingungen
✅ forEach() - Iteriere über Elemente (kein return)
✅ sort() - Sortiere Array (in-place!)
✅ includes() - Prüfe ob Element enthalten
✅ slice() / splice() - Kopieren / Verändern
✅ Method Chaining - Verkettung von Methods

Key Takeaways:

map(), filter(), slice() → Neues Array (immutable)
sort(), splice() → Verändert Original (mutable)
reduce() ist am mächtigsten, aber auch komplexer
Method Chaining macht Code elegant und lesbar
Immer Compare-Funktion bei sort() mit Zahlen!

Best Practices:

Nutze map() statt forEach() für Transformationen
Kombiniere mehrere Filter in einem Durchlauf
Nutze Method Chaining für eleganten Code
Vorsicht mit sort() - verändert Original!
Optional Chaining mit find() nutzen

Praktische Übungen

Übung 1: map() & filter()

Gegeben:

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 400 }
];

Aufgaben:

Erstelle Array mit allen Namen
Filtere Produkte über 450€
Reduziere alle Preise um 10%

Übung 2: reduce()

Berechne:

Summe aller Preise
Durchschnittspreis
Teuerstes Produkt

Übung 3: Method Chaining

Gegeben:

const users = [
  { name: 'Anna', age: 25, active: true },
  { name: 'Max', age: 17, active: true },
  { name: 'Lisa', age: 30, active: false }
];

Finde aktive, volljährige User, sortiere nach Alter und gib nur Namen zurück.

Übung 4: Gruppieren

Gruppiere diese Transaktionen nach Typ (income/expense):

const transactions = [
  { type: 'income', amount: 1000 },
  { type: 'expense', amount: 200 },
  { type: 'income', amount: 500 },
  { type: 'expense', amount: 150 }
];

Übung 5: Real-World Beispiel

Erstelle eine Shopping Cart Funktion:

const cart = [
  { name: 'Laptop', price: 1000, quantity: 1 },
  { name: 'Mouse', price: 25, quantity: 2 },
  { name: 'Keyboard', price: 75, quantity: 1 }
];

// Berechne:
// 1. Gesamtpreis (price * quantity für alle)
// 2. Anzahl aller Items
// 3. Liste mit Namen und Gesamtpreis pro Item

JavaScript Array Methods - map, filter, reduce & mehr

JavaScript Array Methods

Warum Array Methods?

1. map() - Transformiere jedes Element

Praktisches Beispiel: User-Daten transformieren

map() mit Index und Array

2. filter() - Filtern nach Bedingung

Praktisches Beispiel: User filtern

3. reduce() - Reduziere auf einen Wert

Praktische reduce() Beispiele

reduce() für komplexe Transformationen

4. find() - Finde erstes Element

5. findIndex() - Finde Index

6. some() & every() - Testen

some() - Mindestens eines?

every() - Alle?

7. forEach() - Über jedes Element iterieren

8. sort() - Sortieren

Objekte sortieren

9. includes() - Enthält Element?

10. slice() & splice()

slice() - Kopiere Teilbereich

splice() - Verändere Array

Method Chaining - Verkettung

📝 Quiz

Tipps & Tricks

Performance: forEach vs. map

Array kopieren

Mehrere Filter kombinieren

Optional Chaining mit find()

Flatten (verschachtelte Arrays)

Häufige Fehler

Fehler 1: forEach() returnen

Fehler 2: sort() ohne Compare-Funktion bei Zahlen

Fehler 3: reduce() ohne Initial Value

Fehler 4: find() mit map() verwechseln

Zusammenfassung

Praktische Übungen

Übung 1: map() & filter()

Übung 2: reduce()

Übung 3: Method Chaining

Übung 4: Gruppieren

Übung 5: Real-World Beispiel

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

JavaScript Arrays - Listen & Array Methods

JavaScript Async/Await & Promises - Asynchrone Programmierung

JavaScript ES6+ Features - Moderne JavaScript Syntax