Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Filtern von Arrays mit der Filter()-Methode | Fortgeschrittene Array-Methoden und -Transformationen
Javascript Datenstrukturen

bookFiltern von Arrays mit der Filter()-Methode

Dieses Kapitel befasst sich mit den Feinheiten der Methode filter(), erläutert deren Syntax, Anwendungsbereiche und wie sie die Erstellung verfeinerter Arrays ermöglicht.

filter()

Die Methode filter() wählt Elemente aus, die eine bestimmte Bedingung erfüllen. Die Syntax im Überblick:

array.filter((element, index, array) => {
  // Callback body
});

Wissenswertes zur Methode filter():

  • Verändert das ursprüngliche Array nicht;
  • Iteriert Element für Element über das ursprüngliche Array;
  • Gibt ein neues Array zurück;
  • Elemente werden dem neuen Array hinzugefügt, wenn sie die Callback-Bedingung erfüllen;
  • Gibt der Callback true zurück, wird das Element aufgenommen, andernfalls ausgelassen.

Beispiele

Die wahre Leistungsfähigkeit der filter()-Methode zeigt sich bei der Anwendung in unterschiedlichen Szenarien. Im Folgenden werden einige anschauliche Beispiele vorgestellt:

Beispiel 1: Filtern ungerader Zahlen

In diesem Beispiel erstellt die filter()-Methode ein Array (oddNumbers), das nur ungerade Zahlen aus dem ursprünglichen Array enthält.


              
123456

            
const numbers = [15, 22, 37, 41, 58, 67, 72];

const oddNumbers = numbers.filter((number) => {
  return number % 2 !== 0;
});
console.log(oddNumbers); // Output: 15, 37, 41, 67
copy

Beispiel 2: Filtern von Produkten nach Preisspanne

Hier wird die Methode filter() verwendet, um Produkte mit einem Preis unter 500 $ herauszufiltern und ein neues Array (affordableProducts) zu erstellen.

const products = [
  { name: "Keyboard", price: 220 },
  { name: "Smartphone", price: 800 },
  { name: "Tablet", price: 500 },
  { name: "Headphones", price: 120 },
  { name: "Camera", price: 1500 },
];

const affordableProducts = products.filter((product) => product.price < 500);
console.log(affordableProducts); // Output: [ { name: "Keyboard", price: 220 }, { name: "Headphones", price: 120 } ]

1. Was macht die Methode filter()?

2. Was ist ein zentrales Merkmal der Methode filter()?

3. Im folgenden Beispiel: Welche Bedingung muss erfüllt sein, damit das Array numbersGreaterThan20 Zahlen größer als 20 enthält?

question mark

Was macht die Methode filter()?

Select the correct answer

question mark

Was ist ein zentrales Merkmal der Methode filter()?

Select the correct answer

question mark

Im folgenden Beispiel: Welche Bedingung muss erfüllt sein, damit das Array numbersGreaterThan20 Zahlen größer als 20 enthält?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain how the filter() method differs from the map() method?

Can you show more examples of using filter() with different data types?

What happens if no elements satisfy the filter condition?

Awesome!

Completion rate improved to 2.27

bookFiltern von Arrays mit der Filter()-Methode

Swipe um das Menü anzuzeigen

Dieses Kapitel befasst sich mit den Feinheiten der Methode filter(), erläutert deren Syntax, Anwendungsbereiche und wie sie die Erstellung verfeinerter Arrays ermöglicht.

filter()

Die Methode filter() wählt Elemente aus, die eine bestimmte Bedingung erfüllen. Die Syntax im Überblick:

array.filter((element, index, array) => {
  // Callback body
});

Wissenswertes zur Methode filter():

  • Verändert das ursprüngliche Array nicht;
  • Iteriert Element für Element über das ursprüngliche Array;
  • Gibt ein neues Array zurück;
  • Elemente werden dem neuen Array hinzugefügt, wenn sie die Callback-Bedingung erfüllen;
  • Gibt der Callback true zurück, wird das Element aufgenommen, andernfalls ausgelassen.

Beispiele

Die wahre Leistungsfähigkeit der filter()-Methode zeigt sich bei der Anwendung in unterschiedlichen Szenarien. Im Folgenden werden einige anschauliche Beispiele vorgestellt:

Beispiel 1: Filtern ungerader Zahlen

In diesem Beispiel erstellt die filter()-Methode ein Array (oddNumbers), das nur ungerade Zahlen aus dem ursprünglichen Array enthält.


              
123456

            
const numbers = [15, 22, 37, 41, 58, 67, 72];

const oddNumbers = numbers.filter((number) => {
  return number % 2 !== 0;
});
console.log(oddNumbers); // Output: 15, 37, 41, 67
copy

Beispiel 2: Filtern von Produkten nach Preisspanne

Hier wird die Methode filter() verwendet, um Produkte mit einem Preis unter 500 $ herauszufiltern und ein neues Array (affordableProducts) zu erstellen.

const products = [
  { name: "Keyboard", price: 220 },
  { name: "Smartphone", price: 800 },
  { name: "Tablet", price: 500 },
  { name: "Headphones", price: 120 },
  { name: "Camera", price: 1500 },
];

const affordableProducts = products.filter((product) => product.price < 500);
console.log(affordableProducts); // Output: [ { name: "Keyboard", price: 220 }, { name: "Headphones", price: 120 } ]

1. Was macht die Methode filter()?

2. Was ist ein zentrales Merkmal der Methode filter()?

3. Im folgenden Beispiel: Welche Bedingung muss erfüllt sein, damit das Array numbersGreaterThan20 Zahlen größer als 20 enthält?

question mark

Was macht die Methode filter()?

Select the correct answer

question mark

Was ist ein zentrales Merkmal der Methode filter()?

Select the correct answer

question mark

Im folgenden Beispiel: Welche Bedingung muss erfüllt sein, damit das Array numbersGreaterThan20 Zahlen größer als 20 enthält?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 3
some-alt