Array.
Tworzy nową tablicę z elementami, dla których funkcja zwróciła true.
- Zwraca
- Nową tablicę z elementami, które przeszły test (może być pusta).
- Zmienia oryginał
- Nie
Przykład
#const scores = [45, 82, 67, 91, 30]
const passed = scores.filter((score) => score >= 60)
console.log(passed)
console.log(scores.length)Definicja i zastosowanie
#Metoda filter() sprawdza każdy element tablicy funkcją testującą. Elementy, dla których funkcja zwróci wartość prawdziwą, trafiają do nowej tablicy, a pozostałe są pomijane. Oryginał się nie zmienia.
To podstawowe narzędzie do wybierania danych: aktywnych użytkowników, zadań do zrobienia, produktów w danej kategorii czy wyników wyszukiwania.
Wynik zawsze jest tablicą. Jeśli żaden element nie pasuje, dostaniesz pustą tablicę [], a nie undefined. Gdy potrzebujesz tylko pierwszego pasującego elementu, szybsza i czytelniejsza będzie metoda find().
Składnia
#array.filter(callbackFn)
array.filter(callbackFn, thisArg)Parametry
#callbackFn
function (element, index, array)
Funkcja testująca. Element trafi do wyniku, jeśli zwróci wartość prawdziwą.thisArg
opcjonalny
Wartośćthiswewnątrz funkcji. Przy funkcjach strzałkowych bez znaczenia.
Więcej przykładów
#const tasks = [
{ title: 'Moduł HTML', done: true },
{ title: 'Moduł CSS', done: false },
{ title: 'Moduł JS', done: false }
]
const todo = tasks.filter((task) => !task.done)
console.log(todo.map((task) => task.title))const values = ['Ania', '', null, 'Kuba', undefined, 0]
console.log(values.filter(Boolean))Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#filter(Boolean)to szybki sposób na usunięcie pustych napisów,null,undefinedi zer. Uważaj tylko, gdy 0 jest poprawną wartością.- Łącz
filter()zmap(), ale pamiętaj, że każda metoda przechodzi po tablicy osobno. Przy bardzo dużych danych rozważ jednoreduce().
Powiązane hasła
#- Array.prototype.map()Tworzy nową tablicę z wynikami wywołania funkcji dla każdego elementu.
- Array.prototype.find()Zwraca pierwszy element spełniający warunek albo undefined.
- Array.prototype.some()Sprawdza, czy przynajmniej jeden element spełnia warunek.
- Array.prototype.reduce()Sprowadza całą tablicę do jednej wartości, np. sumy, obiektu lub nowej tablicy.
Widzisz błąd albo brakuje przykładu? Napisz do nas.