JavaScript Array-Methoden: Der komplette Guide 2025
Moderne JavaScript-Entwicklung ohne Array-Methoden? Undenkbar! Lerne die wichtigsten funktionalen Array-Methoden kennen: von map() und filter() bis zu reduce() und forEach(). Mit praktischen Beispielen, Syntax-Highlighting und Performance-Tipps.
📚 Inhaltsverzeichnis
1. map() – Daten transformieren
Die map()
Methode erstellt ein neues Array, indem sie eine Funktion auf jedes Element des ursprünglichen Arrays anwendet.
const numbers = [1, 2, 3, 4, 5]
// Alle Zahlen verdoppeln
const doubled = numbers.map(n => n * 2)
console.log(doubled) // [2, 4, 6, 8, 10]
// Preise mit 19% MwSt.
const netPrices = [10, 20, 30]
const grossPrices = netPrices.map(price => price * 1.19)
console.log(grossPrices) // [11.9, 23.8, 35.7]
2. filter() – Elemente filtern
Die filter()
Methode erstellt ein neues Array mit allen Elementen, die einen Test bestehen.
const numbers = [1, 2, 3, 4, 5, 6]
// Nur gerade Zahlen
const evenNumbers = numbers.filter(n => n % 2 === 0)
console.log(evenNumbers) // [2, 4, 6]
// Aktive Nutzer filtern
const users = [{active: true}, {active: false}]
const activeUsers = users.filter(u => u.active)
3. reduce() – Werte aggregieren
Die reduce()
Methode reduziert ein Array auf einen einzigen Wert durch eine Akkumulator-Funktion.
const numbers = [1, 2, 3, 4, 5]
// Summe berechnen
const sum = numbers.reduce((acc, current) => acc + current, 0)
console.log(sum) // 15
// Durchschnitt berechnen
const average = numbers.reduce((acc, current) => acc + current, 0) / numbers.length
4. find(), some(), every() – Suchen und Prüfen
🔍 find() & findIndex()
const users = [
{ id: 1, name: 'Max' },
{ id: 2, name: 'Anna' }
]
const user = users.find(u => u.id === 2)
✅ some() & every()
const ages = [16, 25, 30]
// Mindestens ein Erwachsener?
const hasAdult = ages.some(age => age >= 18)
5. Performance-Tipps
⚡ Wichtige Performance-Regeln
- •
find()
stoppt bei erstem Treffer – effizienter alsfilter()[0]
- • Vermeide unnötige Zwischenarrays bei Method Chaining
- •
forEach()
ist schneller alsmap()
wenn kein Rückgabewert benötigt wird
// ❌ Ineffizient: Mehrere Durchläufe
const result1 = data
.filter(item => item.active)
.filter(item => item.price > 100)
// ✅ Effizienter: Kombinierte Bedingungen
const result2 = data
.filter(item => item.active && item.price > 100)