Funkcja filtra tablicy JavaScript
W tym poście zrozumiemy koncepcję JavaScript filtr() funkcjonować. Co to jest filtr() Funkcja i jak możemy go użyć, aby pomóc w uproszczeniu kodu JavaScript i wykonania zadań efektywnie i najszybciej.
Co to jest filtr Funkcja w JavaScript
JavaScript filtr() Funkcja tablicy służy do odfiltrowania danych na podstawie danego warunku lub testu.
- filtr() Funkcja bierze element tablicy jeden po drugim i stosuje warunek na każdym elemencie.
- filtr() Funkcja zachowuje elementy, które przechodzą warunek w innej tablicy i zwracają wynikową tablicę po iterowaniu przez całą tablicę.
- Ten filtr() Funkcja tablicy nie wpływa na oryginalną tablicę.
Zbadajmy więcej, aby zrozumieć składnię i jej funkcjonalność, wraz z kilkoma przykładami.
Składnia funkcji filtra w JavaScript
szyk.filtr (funkcja_nazwa, ta wartość);Tablica filtr() Funkcja zajmuje funkcję funkcji zwrotnej z trzema argumentami. Składnia funkcji zwrotnej i sekwencja argumentów pójdzie w ten sposób:
Funkcja_name (wartość, indeks, tablica)warunek zwrotu;
W funkcji odwołania filtr() metoda:
- Pierwszym parametrem jest bieżący wartość elementu tablicy podczas iteracji.
- Drugi parametr to opcjonalny parametr, który jest prądem indeks elementu tablicy podczas iteracji.
- Na koniec możemy również przekazać szyk sama funkcja wywołania zwrotnego, aby mieć pewne niestandardowe funkcje w funkcji wywołania zwrotnego.
Możemy również przekazać „tę wartość” do funkcji, w której słowo kluczowe „to” odnosi się do bloku nadrzędnego/obiektu.
Teraz użyjemy kilku przykładów, aby zobaczyć jego rzeczywiste wdrożenia.
Notatka: Użyjemy konsoli przeglądarki, aby zademonstrować przykłady wykonane w tym poście. Aby otworzyć konsolę przeglądarki:
- Użyj F12 Klucz w chromie i innych przeglądarkach na bazie chromu.
- Używać Ctrl + Shift + K Klawisze klawiatury dla Mozilli.
- Używać Opcja + ⌘ + c Klawisze skrótów klawiatury w Safari (jeśli menu programisty nie pojawia się, to otwórz preferencje, naciskając ⌘ +, i w Zaawansowany Kontrola zakładki „Pokaż opracuj menu w pasku menu”).
Jak używać funkcji Filter () w JavaScript
Najlepszy przykład do zrozumienia filtr() Funkcją jest filtrowanie niektórych liczb z szeregu liczb na podstawie danego warunku.
Przykład 1:
Załóżmy, że mamy szereg liczb i chcemy uzyskać liczby większe niż jakaś konkretna liczba:
var liczby = [23,16,38,5,10,19]Pierwszą metodą uzyskania pożądanego zakresu liczb jest zapętlenie przez całą tablicę i umieszczenie stanu wewnątrz pętli, aby sprawdzić, czy liczba przechodzi dany test (większy niż 18 lat). Jeśli liczba przejdzie test, zostanie dodany/dołączony do nowej tablicy. Kod pętli dla filtrowania liczb podano poniżej:
varfilteredArray = [];for (leti = 0; i18)
FilterDArray.push (liczby [i])
konsola.log (FilterDArray);
W powyższym kodzie najpierw umieszczamy pętlę na tablicy „liczb”, a następnie umieszczamy warunek za pomocą instrukcji IF, a jeśli element tablicy przekroczy warunek, zostanie ono dołączone/zepchnięte do zmiennej „FilterDArray”.
Chociaż mamy pożądany zakres jako wyjście. Ale dlaczego nie skorzystać z inteligentnego i łatwego sposobu na uzyskanie filtrowanej tablicy za pomocą filtr() Metoda tablicy, w której nie musimy zmutować zmiennych takich jak „FilterDArray."
Użycie funkcji Filter ()
filtr() Funkcja, aby uzyskać liczby większe niż 18, pójdzie w ten sposób:
varfilteredArray = liczby.filtr (getAdults);FunctiongetAlls (n)
zwrot n> 18;
konsola.log (FilterDArray);
W powyższym kodzie widać, że po raz pierwszy przekazaliśmy funkcję „getAdults” do filtr() Funkcja, a w definicji funkcji „getAdults”, po prostu sprawdziliśmy, czy liczba jest większa niż 18, czy nie i czy ten warunek zwraca true, zwróć ten element tablicy.
Gdy funkcja „Filtruj” sprawdzi wszystkie liczby w tablicy „liczb”, będzie przechowywać końcowy wynik w zmiennej „FilterDArray”.
Na koniec pocieszyliśmy zmienną „FilterDArray”, aby sprawdzić, czy nasz filtr() Funkcja działała dobrze czy nie.
Możesz zweryfikować, patrząc na wyżej podany zrzut ekranu filtr() Funkcja zwróciła wszystkie liczby większe niż 18.
Kolejny krótszy i łatwiejszy sposób pisania filtr() funkcją jest wykonanie funkcji wywołania zwrotnego filtr() Funkcja funkcji strzałki:
Składnia pisania funkcji wywołania zwrotnego w obrębie filtr() nawiasy funkcji będą takie:
varfilteredArray = liczby.Filter ((n) =>powrót n> 18
);
konsola.log (FilterDArray);
W porządku, to był prosty przykład, w którym mamy tylko szereg liczb; A co z szeregiem obiektów. Spróbujmy też tego.
Przykład 2:
Załóżmy, że mamy listę studentów w tablicy i chcemy uzyskać listę studentów, których opłaty przekraczają 8000 $:
var Studenci = [ID: 1,
Imię: „John”
Wiek: 12,
Opłata: 8500
,
ID: 2,
Nazwa: „Bob”,
Wiek: 15,
Opłata: 4500
,
ID: 3,
Nazwa: „Steve”,
Wiek: 10,
Opłata: 7500
,
ID: 4,
Imię: „Harry”,
Wiek: 13,
Opłata: 10500
,
ID: 5,
Nazwa: „Tom”,
Wiek: 14,
Opłata: 9000
,
ID: 6,
Nazwa: „Ron”,
Wiek: 11,
Opłata: 6000
,
]
filtr() Funkcja, aby uzyskać filtrowaną listę uczniów, pójdzie w ten sposób:
varfilterredStudents = studenci.Filter ((student) =>returnstudent.Opłata> 8000
);
konsola.log (FilterteStudents);
Teraz jedyną różnicą w tym kodzie jest to, że pojedynczy obiekt jest przekazywany jako wartość funkcji wywołania zwrotnego, a wewnątrz definicji funkcji wywołania zwrotnego stawiamy warunek i zwracamy obiekt, w którym opłata ucznia jest większa niż 8000 USD.
Patrząc na zrzucony z ekranu powyżej, widać, że opłaty uczniów są większe niż 8000 USD i są wyświetlane jako wyjście. W ten sposób możemy uzyskać dostęp do obiektów tablicy w filtr() funkcjonować.
Wniosek
W tym poście dowiedzieliśmy się, co filtr() Funkcja jest i jak możemy go użyć, aby pomóc w uproszczeniu kodu JavaScript.
Nauczyliśmy się, że filtr() funkcja filtruje elementy tablicy na podstawie danego warunku. filtr() Funkcja przyjmuje element tablicy jeden po drugim, bierze funkcję zwrotną zastosowaną do każdego elementu tablicy i zwraca nową filtrowaną tablicę.
Ten post dotyczy JavaScript filtr() funkcja i jej użycie. Zawiera kilka podstawowych przykładów, które pomagają w zrozumieniu filtr() funkcjonować łatwo.