Dieser Artikel demonstriert, wie man die JavaScript-Methoden map() und filter() effektiv einzeln und kombiniert zur effizienten Array-Verarbeitung nutzt. Wir werden anhand praktischer Beispiele deren Leistungsfähigkeit und Vielseitigkeit bei der Datenmanipulation veranschaulichen.
Inhaltsverzeichnis
- JavaScript Map
- JavaScript Filter
- Verkettung von Map und Filter
- Praxisbeispiel: E-Commerce Produktfilterung
- Fazit
JavaScript Map
Die Methode map() ist eine höherwertige Funktion, die jedes Element in einem Array iteriert und eine bereitgestellte Callback-Funktion anwendet. Diese Funktion transformiert jedes Element, und map() gibt ein neues Array zurück, das die transformierten Werte enthält. Das Original-Array bleibt unverändert.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
console.log(doubledNumbers);
console.log(numbers); // Original-Array bleibt unverändert
JavaScript Filter
Die Methode filter() iteriert ebenfalls durch ein Array. Anstatt jedoch Elemente zu transformieren, werden Elemente selektiv basierend auf einer Bedingung, die durch eine Callback-Funktion definiert ist, einbezogen. Die Callback-Funktion sollte true zurückgeben, um das Element einzuschließen, und false, um es auszuschließen. filter() gibt ein neues Array zurück, das nur die Elemente enthält, die die Bedingung erfüllen.
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4, 6]
console.log(evenNumbers);
Verkettung von Map und Filter
Die wahre Stärke von map() und filter() zeigt sich, wenn sie miteinander verkettet werden. Dies ermöglicht eine prägnante und effiziente Möglichkeit, komplexe Datenmanipulationen durchzuführen. filter() wird typischerweise zuerst angewendet, um das Array einzugrenzen, gefolgt von map(), um die verbleibenden Elemente zu transformieren.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenSquared = numbers
.filter(number => number % 2 === 0)
.map(number => number * number); // [4, 16, 36, 64, 100]
console.log(evenSquared);
Praxisbeispiel: E-Commerce Produktfilterung
Stellen Sie sich eine E-Commerce-Anwendung vor. Wir haben ein Array von Produktobjekten:
const products = [
{ name: "Shirt", price: 25, inStock: true, category: "clothing" },
{ name: "Hose", price: 40, inStock: false, category: "clothing" },
{ name: "Schuhe", price: 75, inStock: true, category: "shoes" },
{ name: "Hut", price: 15, inStock: true, category: "accessories" },
{ name: "Jacke", price: 60, inStock: true, category: "clothing" }
];
Wir möchten nur die Namen der verfügbaren Kleidungsstücke anzeigen. Dies können wir elegant mit filter() und map() erreichen:
const inStockClothingNames = products
.filter(product => product.inStock && product.category === "clothing")
.map(product => product.name);
console.log(inStockClothingNames); // ['Shirt', 'Jacke']
Fazit
Die Kombination von map() und filter() bietet einen leistungsstarken und lesbaren Ansatz zur Array-Manipulation in JavaScript. Dieser funktionale Stil fördert saubereren Code, reduziert den Bedarf an ausführlichen Schleifen und verbessert die Wartbarkeit. Denken Sie daran, dass beide Methoden neue Arrays zurückgeben und die Unveränderlichkeit der ursprünglichen Daten erhalten.