JavaScript Array-Methoden meistern

Array-Methoden sind das Herzstück funktionaler Programmierung in JavaScript. Lernen Sie map, filter, reduce und viele weitere Methoden.

Übersicht der wichtigsten Methoden

map() - Transformieren

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

// Jede Zahl verdoppeln
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

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

const names = users.map(user => user.name);
// ['Max', 'Anna']

const formatted = users.map(user => ({
    fullName: user.name,
    isAdult: user.age >= 18
}));

// Mit Index
const withIndex = numbers.map((n, index) => `${index}: ${n}`);
// ['0: 1', '1: 2', '2: 3', ...]

filter() - Filtern

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

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

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

const activeAdults = users.filter(user =>
    user.active && user.age >= 18
);
// [{ name: 'Max', ... }]

// Falsy-Werte entfernen
const mixed = [0, 1, '', 'hello', null, undefined, false, true];
const truthy = mixed.filter(Boolean);
// [1, 'hello', true]

// Duplikate entfernen
const withDupes = [1, 2, 2, 3, 3, 3, 4];
const unique = withDupes.filter((v, i, arr) => arr.indexOf(v) === i);
// [1, 2, 3, 4]
// Besser: [...new Set(withDupes)]

reduce() - Reduzieren

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

// Summe
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
// 15

// Maximum finden
const max = numbers.reduce((max, curr) => curr > max ? curr : max);
// 5

// Array zu Objekt
const users = [
    { id: 1, name: 'Max' },
    { id: 2, name: 'Anna' }
];

const usersById = users.reduce((acc, user) => {
    acc[user.id] = user;
    return acc;
}, {});
// { 1: { id: 1, name: 'Max' }, 2: { id: 2, name: 'Anna' } }

// Gruppieren
const products = [
    { name: 'Apfel', category: 'Obst' },
    { name: 'Banane', category: 'Obst' },
    { name: 'Karotte', category: 'Gemüse' }
];

const grouped = products.reduce((acc, product) => {
    const key = product.category;
    acc[key] = acc[key] || [];
    acc[key].push(product);
    return acc;
}, {});
// { Obst: [...], Gemüse: [...] }

// Zählen
const letters = ['a', 'b', 'a', 'c', 'b', 'a'];
const count = letters.reduce((acc, letter) => {
    acc[letter] = (acc[letter] || 0) + 1;
    return acc;
}, {});
// { a: 3, b: 2, c: 1 }

// Flatten (Alternativ: flat())
const nested = [[1, 2], [3, 4], [5]];
const flat = nested.reduce((acc, arr) => acc.concat(arr), []);
// [1, 2, 3, 4, 5]

find() und findIndex()

const users = [
    { id: 1, name: 'Max', role: 'admin' },
    { id: 2, name: 'Anna', role: 'user' },
    { id: 3, name: 'Tom', role: 'user' }
];

// Erstes Match finden
const admin = users.find(user => user.role === 'admin');
// { id: 1, name: 'Max', role: 'admin' }

const notFound = users.find(user => user.role === 'guest');
// undefined

// Index finden
const index = users.findIndex(user => user.id === 2);
// 1

// Von hinten suchen (ES2022)
const lastUser = users.findLast(user => user.role === 'user');
// { id: 3, name: 'Tom', ... }

const lastIndex = users.findLastIndex(user => user.role === 'user');
// 2

some() und every()

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

// Mindestens eins erfüllt Bedingung
const hasEven = numbers.some(n => n % 2 === 0);  // true
const hasNegative = numbers.some(n => n < 0);    // false

// Alle erfüllen Bedingung
const allPositive = numbers.every(n => n > 0);   // true
const allEven = numbers.every(n => n % 2 === 0); // false

// Praktisches Beispiel: Formularvalidierung
const formFields = [
    { name: 'email', valid: true },
    { name: 'password', valid: false },
    { name: 'name', valid: true }
];

const isFormValid = formFields.every(field => field.valid);
// false

const hasErrors = formFields.some(field => !field.valid);
// true

Methoden-Chaining

const products = [
    { name: 'Laptop', price: 999, inStock: true },
    { name: 'Mouse', price: 29, inStock: true },
    { name: 'Keyboard', price: 79, inStock: false },
    { name: 'Monitor', price: 299, inStock: true }
];

// Filter → Map → Sort
const affordableAvailable = products
    .filter(p => p.inStock)           // Nur verfügbare
    .filter(p => p.price < 500)       // Unter 500€
    .map(p => p.name)                 // Nur Namen
    .sort();                          // Alphabetisch

// ['Monitor', 'Mouse']

// Gesamtpreis verfügbarer Produkte
const totalInStock = products
    .filter(p => p.inStock)
    .reduce((sum, p) => sum + p.price, 0);
// 1327

Weitere nützliche Methoden

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

// includes - Enthält Element?
arr.includes(3);      // true
arr.includes(6);      // false

// indexOf / lastIndexOf
arr.indexOf(3);       // 2
arr.lastIndexOf(3);   // 2

// flat - Verschachtelte Arrays flach machen
[[1, 2], [3, [4, 5]]].flat();     // [1, 2, 3, [4, 5]]
[[1, 2], [3, [4, 5]]].flat(2);    // [1, 2, 3, 4, 5]
[[1, 2], [3, [4, 5]]].flat(Infinity); // Komplett flach

// flatMap - map + flat(1)
[1, 2, 3].flatMap(n => [n, n * 2]);
// [1, 2, 2, 4, 3, 6]

// at - Element an Index (auch negativ)
arr.at(0);    // 1
arr.at(-1);   // 5 (letztes Element)
arr.at(-2);   // 4

// fill - Füllen
new Array(5).fill(0);  // [0, 0, 0, 0, 0]
[1, 2, 3].fill(0, 1);  // [1, 0, 0]

// copyWithin - Kopieren innerhalb
[1, 2, 3, 4, 5].copyWithin(0, 3);  // [4, 5, 3, 4, 5]

// entries, keys, values
for (const [index, value] of arr.entries()) {
    console.log(index, value);
}

Sortieren

// ⚠️ sort() mutiert das Original-Array!
const numbers = [10, 5, 8, 1, 7];

// Aufsteigend
numbers.sort((a, b) => a - b);  // [1, 5, 7, 8, 10]

// Absteigend
numbers.sort((a, b) => b - a);  // [10, 8, 7, 5, 1]

// Strings
const names = ['Max', 'anna', 'Tom'];
names.sort();  // ['Max', 'Tom', 'anna'] (ASCII-Reihenfolge)
names.sort((a, b) => a.localeCompare(b));  // ['anna', 'Max', 'Tom']

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

users.sort((a, b) => a.age - b.age);

// Ohne Mutation: toSorted() (ES2023)
const sorted = numbers.toSorted((a, b) => a - b);

Immutable Alternativen (ES2023)

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

// Alte Methoden mutieren
arr.sort();     // Mutiert arr
arr.reverse();  // Mutiert arr
arr.splice(1, 1); // Mutiert arr

// Neue immutable Methoden
arr.toSorted((a, b) => a - b);  // Neues Array
arr.toReversed();               // Neues Array
arr.toSpliced(1, 1);            // Neues Array
arr.with(0, 99);                // [99, 2, 3, 4, 5] - Neues Array

Weitere Informationen

• 🔧 Destructuring und Spread
• 🔒 Closures und Scope
• ⚡ Async/Await