JavaScript Array: filter()

Z tego artykułu dowiesz się czym jest metoda filter w obiektach typu Array w języku JavaScript. Poznasz też przydatne przykłady użycia metody filter.

Do czego służy metoda Array.prototype.filter()?

Metoda filter() dostarczana jest przez prototyp obiektu typu Array. Działanie metody filter() polega na utworzeniu nowej tablicy z wszystkimi elementami, które przechodzą test określony przez podaną w argumencie funkcję. Możesz używać tej metody do odfiltrowania elementów tablicy, które spełniają określone warunki.

Jaka jest Składnia metody filter() w Array?

Składnia metody filter() wygląda następująco:

array.filter(callback(element[, index[, array]])[, thisArg])

• callback to funkcja, która jest wywoływana dla każdego elementu tablicy. Powinna ona zwrócić true, jeśli element spełnia warunki, które chcesz zastosować, lub false, jeśli nie spełnia ich. Funkcja ta ma trzy argumenty:
  • element – aktualny element tablicy,
  • index – indeks aktualnego elementu tablicy,
  • array – tablica, dla której jest wywoływana funkcja.
• thisArg (opcjonalne) – obiekt, który ma być używany jako this w funkcji callback.

Przykłady użycia metody filter() w JS

? Polecam Ci poświęcenie 3-5 minut na analizę kodu wszystkich przykładów użycia metody filter(). Dzięki temu staniesz się lepszym programistą. Pamiętaj, że analiza przykładów kodu pomaga także w nauce nowych technik i sposobów pisania kodu, co może przyczynić się do rozwoju Twoich umiejętności jako programisty.

Użycie metody filter() do stworzenia tablicy z liczbami parzystymi.

Aby odfiltrować liczby parzyste od nieparzystych możesz użyć operatora modulo (%), który zwraca resztę z dzielenia. Jeśli wynik dzielenia modulo przez 2 jest równy 0 to liczba jest parzysta.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [ 2, 4, 6, 8, 10 ]

Filtrowanie obiektów za pomocą metody filter().

Zadanie dla tego przykładu jest proste. Musimy przefiltrować wszystkie obiekty w taki sposób, aby w efekcie powstała nowa tablica obiektów, któreych właściwość price jest mniejsza niż 40.

Do tego zadania znakomicie przyda się metoda filter() dostarczana z prototypem Array w JavaScript.

const products = [
  { name: 'Product 1', price: 30 },
  { name: 'Product 2', price: 40 },
  { name: 'Product 3', price: 25 },
  { name: 'Product 4', price: 45 },
  { name: 'Product 5', price: 35 },
];

const result = products.filter(function(product) {
  return product.price > 40;
});

Dlaczego warto używać metody filter() w JS?

1. Używanie metody filter() umożliwia Ci szybkie i łatwe odfiltrowanie elementów tablicy, które spełniają określone warunki,
2. Nie zmieniasz oryginalnej tablicy (tworząc zamiast tego nową tablicę z odfiltrowanymi elementami),
3. Możesz jej używać zarówno z funkcjami anonimowymi, jak i z arrow functions, co pozwala na elastyczność w kodowaniu.