Einführung
In der Welt der JavaScript-Entwicklung ist die Fähigkeit, Arrays zu filtern eine der grundlegendsten und nützlichsten Fertigkeiten. Ob Sie Daten aus einer API bereinigen, Benutzerdaten nach bestimmten Kriterien auswählen oder komplexe Geschäftslogik implementieren – Array-Filterung ist überall dort nützlich, wo Sie mit Daten arbeiten.
In diesem umfassenden Tutorial werden wir alles über die filter()-Methode in JavaScript lernen – von den Grundlagen bis hin zu fortgeschrittenen Anwendungsfällen.
Was ist Array-Filterung?
Array-Filterung ist der Prozess, bei dem aus einem bestehenden Array nur bestimmte Elemente ausgewählt werden, basierend auf einer Bedingung. Die filter()-Methode erzeugt ein neues Array mit allen Elementen, die die gegebene Bedingung erfüllen.
Grundlegende Syntax
const filteredArray = array.filter(callback(element, index, array), thisArg);Grundlegende Anwendung
Einfache Filterung nach Werten
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Gerade Zahlen filtern
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]
// Zahlen größer als 5
const greaterThanFive = numbers.filter(num => num > 5);
console.log(greaterThanFive); // [6, 7, 8, 9, 10]Filtern von Objekten
const users = [
{ name: 'Alice', age: 25, active: true },
{ name: 'Bob', age: 30, active: false },
{ name: 'Charlie', age: 35, active: true },
{ name: 'David', age: 28, active: false }
];
// Aktive Benutzer
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
// [{ name: 'Alice', age: 25, active: true }, { name: 'Charlie', age: 35, active: true }]
// Erwachsene Benutzer (über 30)
const adults = users.filter(user => user.age >= 30);
console.log(adults);
// [{ name: 'Bob', age: 30, active: false }, { name: 'Charlie', age: 35, active: true }]Die Filter-Funktion im Detail
Funktionsparameter
Die filter()-Methode akzeptiert eine Callback-Funktion mit drei optionalen Parametern:
const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter((element, index, array) => {
console.log(`Element: ${element}, Index: ${index}`);
return element > 3;
});
// Ausgabe:
// Element: 1, Index: 0
// Element: 2, Index: 1
// Element: 3, Index: 2
// Element: 4, Index: 3
// Element: 5, Index: 4
console.log(result); // [4, 5]Verwendung aller Parameter
const fruits = ['apple', 'banana', 'cherry', 'date'];
const result = fruits.filter((fruit, index, array) => {
console.log(`Index: ${index}, Fruit: ${fruit}`);
console.log(`Original Array: ${array}`);
return index % 2 === 0; // Nur geradzahlige Indizes
});
// Index: 0, Fruit: apple
// Original Array: apple,banana,cherry,date
// Index: 1, Fruit: banana
// Index: 2, Fruit: cherry
// Original Array: apple,banana,cherry,date
// Index: 3, Fruit: date
// Original Array: apple,banana,cherry,date
console.log(result); // ['apple', 'cherry']Komplexe Filterungsmöglichkeiten
Mehrere Bedingungen
const products = [
{ name: 'Laptop', price: 1000, category: 'Electronics', inStock: true },
{ name: 'Book', price: 20, category: 'Education', inStock: true },
{ name: 'Phone', price: 800, category: 'Electronics', inStock: false },
{ name: 'Desk', price: 300, category: 'Furniture', inStock: true }
];
// Elektronik Produkte, die auf Lager sind und unter 1000€ kosten
const filteredProducts = products.filter(product =>
product.category === 'Electronics' &&
product.inStock === true &&
product.price < 1000
);
console.log(filteredProducts);
// [{ name: 'Laptop', price: 1000, category: 'Electronics', inStock: true }]Filtern mit Array-Methoden
const students = [
{ name: 'Alice', grades: [85, 92, 78] },
{ name: 'Bob', grades: [90, 88, 95] },
{ name: 'Charlie', grades: [75, 80, 85] }
];
// Studenten mit Durchschnitt über 85
const highPerformers = students.filter(student => {
const average = student.grades.reduce((sum, grade) => sum + grade, 0) / student.grades.length;
return average > 85;
});
console.log(highPerformers);
// [{ name: 'Alice', grades: [85, 92, 78] }, { name: 'Bob', grades: [90, 88, 95] }]Filtern nach String-Inhalten
const names = ['Alice', 'Bob', 'Charlie', 'David', 'Eve'];
// Namen, die mit 'A' beginnen
const namesStartingWithA = names.filter(name => name.startsWith('A'));
console.log(namesStartingWithA); // ['Alice']
// Namen mit Länge über 4
const longNames = names.filter(name => name.length > 4);
console.log(longNames); // ['Alice', 'Charlie', 'David']
// Namen, die 'a' enthalten
const namesWithA = names.filter(name => name.toLowerCase().includes('a'));
console.log(namesWithA); // ['Alice', 'David']Fortgeschrittene Filterungstechniken
Filtern mit externen Daten
const allProducts = [
{ id: 1, name: 'Product A', category: 'Electronics' },
{ id: 2, name: 'Product B', category: 'Clothing' },
{ id: 3, name: 'Product C', category: 'Electronics' }
];
const allowedCategories = ['Electronics', 'Books'];
const filteredProducts = allProducts.filter(product =>
allowedCategories.includes(product.category)
);
console.log(filteredProducts);
// [{ id: 1, name: 'Product A', category: 'Electronics' }, { id: 3, name: 'Product C', category: 'Electronics' }]Filtern mit regulären Ausdrücken
const emails = [
'user1@gmail.com',
'user2@yahoo.com',
'user3@company.org',
'user4@gmail.com'
];
// Nur Gmail-Adressen
const gmailUsers = emails.filter(email => /@gmail\.com$/.test(email));
console.log(gmailUsers); // ['user1@gmail.com', 'user4@gmail.com']Kombination mit anderen Array-Methoden
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Gerade Zahlen > 5, dann quadrieren
const result = numbers
.filter(num => num % 2 === 0 && num > 5)
.map(num => num * num);
console.log(result); // [36, 64, 100]Nützliche Filtermuster
Filtern von Duplikaten
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.filter((num, index) => numbers.indexOf(num) === index);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]
// Effizienter Ansatz mit Set
const uniqueNumbers2 = [...new Set(numbers)];
console.log(uniqueNumbers2); // [1, 2, 3, 4, 5]Filtern von leeren Werten
const mixedArray = [1, '', 2, null, 3, undefined, 4, 0, false, 'hello'];
// Filtern von falschen Werten
const truthyValues = mixedArray.filter(Boolean);
console.log(truthyValues); // [1, 2, 3, 4, 'hello']
// Filtern von null/undefined
const notNull = mixedArray.filter(value => value !== null && value !== undefined);
console.log(notNull); // [1, '', 2, 3, 4, 0, false, 'hello']Performance-Optimierungen
Effiziente Filterbedingungen
// Schlechte Performance - mehrfache Berechnungen
const badExample = numbers.filter(num => {
const expensiveCalculation = expensiveFunction(num);
return expensiveCalculation > 100 && num > 50;
});
// Bessere Performance - Berechnung nur einmal
const goodExample = numbers.filter(num => {
if (num <= 50) return false;
const expensiveCalculation = expensiveFunction(num);
return expensiveCalculation > 100;
});Filtern mit vorbereiteten Daten
// Vorbereitete Liste für schnelle Suche
const validIds = new Set([1, 3, 5, 7, 9]);
const filteredData = data.filter(item => validIds.has(item.id));Wichtige Eigenschaften der filter()-Methode
- Nicht mutierend: Erzeugt ein neues Array, ändert das Original nicht
- Leere Ergebnisse: Gibt ein leeres Array zurück, wenn keine Elemente passen
- Keine Auswirkung auf Original: Das ursprüngliche Array bleibt unverändert
- Funktioniert mit allen Iterables: Arrays, Strings, Maps, Sets
Best Practices
1. Verwenden Sie Pfeilfunktionen für Klarheit
// Empfohlen
const evenNumbers = numbers.filter(num => num % 2 === 0);
// Weniger klar
const evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});2. Vermeiden Sie komplexe Logik in Filter-Funktionen
// Besser aufteilen
const hasValidStatus = user => user.status === 'active';
const hasValidAge = user => user.age >= 18;
const validUsers = users.filter(user => hasValidStatus(user) && hasValidAge(user));
// Oder mit mehreren Filtern
const validUsers = users
.filter(hasValidStatus)
.filter(hasValidAge);3. Verwenden Sie filter() mit map() und reduce() kombiniert
const products = [
{ name: 'Laptop', price: 1000, category: 'Electronics' },
{ name: 'Book', price: 20, category: 'Education' },
{ name: 'Phone', price: 800, category: 'Electronics' }
];
// Filtern und transformieren
const expensiveElectronics = products
.filter(product => product.category === 'Electronics' && product.price > 500)
.map(product => ({ name: product.name, price: product.price }));Fazit
Die filter()-Methode ist ein unverzichtbares Werkzeug in der JavaScript-Entwicklung. Sie ermöglicht präzise Auswahl von Daten, ist sehr lesbar und funktioniert nahtlos mit anderen Array-Methoden. Durch das Verständnis und die richtige Anwendung von Filtern können Sie Ihren Code sauberer, effizienter und besser wartbar machen.
Ob Sie einfach Zahlen filtern, komplexe Objekt-Arrays durchsuchen oder komplexe Geschäftsregeln implementieren – die filter()-Methode ist Ihre zuverlässige Begleiterin in der Welt der Datenmanipulation.
Probieren Sie die verschiedenen Beispiele aus und experimentieren Sie mit verschiedenen Filterkriterien. Mit der Zeit werden Sie die Mächtigkeit dieser Methode vollständig verstehen und in Ihren Projekten erfolgreich anwenden können!