find() vs filter()
find() zwraca pierwszy element spełniający warunek albo undefined, a filter() zwraca nową tablicę ze wszystkimi elementami, które przeszły test.
Porównanie w tabeli
#Co zwraca
- Array.prototype.find()
- Pierwszy pasujący element albo
undefined - Array.prototype.filter()
- Nową tablicę ze wszystkimi pasującymi elementami
Gdy nic nie pasuje
- Array.prototype.find()
undefined- Array.prototype.filter()
- Pusta tablica
[]
Przerywa się na pierwszym trafieniu
- Array.prototype.filter()
- Nie, sprawdza każdy element
Wydajność na dużych tablicach
- Array.prototype.find()
- Szybsze, kończy przy pierwszym trafieniu
- Array.prototype.filter()
- Wolniejsze, sprawdza wszystko
Łączenie w łańcuch metod
- Array.prototype.find()
- Niepraktyczne, wynik to jeden element
- Array.prototype.filter()
- Tak, np.
.filter().map()
Typowe użycie
- Array.prototype.find()
- Wyszukanie jednego rekordu po
id - Array.prototype.filter()
- Lista elementów spełniających warunek
Przykład
#const users = [
{ id: 1, name: 'Ania', active: true },
{ id: 2, name: 'Kuba', active: false },
{ id: 3, name: 'Ola', active: true }
]
const oneUser = users.find((user) => user.active)
const activeUsers = users.filter((user) => user.active)
console.log(oneUser)
console.log(activeUsers)Definicja i zastosowanie
#Obie metody sprawdzają elementy tablicy tą samą funkcją testującą (element, index, array) i nie zmieniają oryginału. Różnią się tym, co robią z wynikiem testu: find() zatrzymuje się na pierwszym elemencie, dla którego funkcja zwróci wartość prawdziwą, a filter() sprawdza wszystkie elementy i zbiera je w nową tablicę.
find() zwraca sam element albo undefined, gdy żaden nie pasuje. filter() zawsze zwraca tablicę, nawet pustą [], więc wynik można od razu dalej mapować albo zliczyć przez .length. Dzięki temu, że find() kończy pracę na pierwszym trafieniu, bywa szybsze na dużych tablicach niż filter(), które zawsze przechodzi przez wszystkie elementy.
Wybór zależy od tego, ile elementów potrzebujesz. Szukasz jednego konkretnego rekordu, na przykład użytkownika po id? Użyj find(). Potrzebujesz listy elementów spełniających warunek, na przykład aktywnych użytkowników do wyświetlenia? Użyj filter().
Składnia
#array.find(callbackFn)
array.filter(callbackFn)Więcej przykładów
#const products = [
{ slug: 'html', price: 0 },
{ slug: 'react', price: 199 }
]
const missing = products.find((product) => product.slug === 'vue')
const free = products.filter((product) => product.price === 0)
console.log(missing)
console.log(free.length)
console.log(missing?.price ?? 'Brak produktu')const numbers = [1, 2, 3, 4, 5]
const checkedByFind = []
numbers.find((number) => {
checkedByFind.push(number)
return number > 2
})
const checkedByFilter = []
numbers.filter((number) => {
checkedByFilter.push(number)
return number > 2
})
console.log(checkedByFind)
console.log(checkedByFilter)find() zatrzymuje się po trafieniu na 3 i nie sprawdza już 4 i 5. filter() zawsze przechodzi przez całą tablicę.
Dobre praktyki
#- Wynik
find()może byćundefined. Zabezpiecz odczyt jego właściwości operatorem?.. - Sprawdzasz tylko, czy element istnieje, bez potrzeby go używać?
some()jest czytelniejsze niż porównanie wynikufind()doundefined. - Gdy potrzebujesz pozycji pasującego elementu, a nie jego wartości, użyj
findIndex().
Powiązane hasła
#- Array.prototype.find()Zwraca pierwszy element spełniający warunek albo undefined.
- Array.prototype.filter()Tworzy nową tablicę z elementami, dla których funkcja zwróciła true.
- Array.prototype.some()Sprawdza, czy przynajmniej jeden element spełnia warunek.
- Array.prototype.findIndex()Zwraca indeks pierwszego elementu spełniającego warunek albo -1.
Widzisz błąd albo brakuje przykładu? Napisz do nas.