Zrozumienie funkcji wyższego rzędu w JavaScript

JavaScript to potężny język obsługiwany przez większość nowoczesnych przeglądarek i doskonały wybór dla początkujących.

Podobnie jak wiele innych nowoczesnych języków programowania, JavaScript obsługuje funkcje, które pozwalają wyodrębnić blok kodu i użyć go w innym miejscu. Możesz także użyć przypisania funkcji do zmiennych i przekazać je jako parametry, podobnie jak inne wartości.

Czym są funkcje wyższego rzędu?

Najprostszą definicją funkcji wyższego rzędu jest funkcja, która wykonuje operacje na innych funkcjach, przyjmując je jako parametry lub zwracając. Funkcje wyższego rzędu są często używane w paradygmat programowania funkcyjnego. Jeśli jesteś dopiero zaczynam z JavaScriptem, funkcje wyższego rzędu mogą być nieco trudne do uchwycenia.

Rozważ następujący przykład:

funkcjonowaćprzekształcać(przyp) {
pozwalać wynikTablica = [];
powrótfunkcjonować (szyk) {
Do (pozwalać ja = 0; i < długość.tablicy; i++) {
 wynikTablica.push (fn (tablica[i]))
 }





instagram viewer
powrót wynikTablica
 }
}

W powyższym bloku kodu plik przekształcać funkcja jest funkcją wyższego rzędu, która przyjmuje przyp jako parametr i zwraca anonimową funkcję, która przyjmuje szyk jako parametr.

Celem przekształcać funkcją jest modyfikacja elementów w tablicy. Najpierw kod definiuje zmienną wynikTablica i wiąże go z pustą tablicą.

The przekształcać funkcja zwraca anonimową funkcję, która przechodzi przez każdy element w szyk, następnie przekazuje element do przyp funkcji do obliczeń i wypycha wynik do wynikTablica. Po zakończeniu pętli funkcja anonimowa zwraca wartość wynikTablica.

konst funkcja1 = przekształć((X) => X * 2)
konsola.log (funkcja1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Powyższy blok kodu przypisuje anonimową funkcję zwróconą przez przekształcać funkcję do zmiennej stałej funkcja1. przyp zwraca produkt X który jest zamiennikiem tablica[i].

Kod przekazuje również tablicę jako parametr do funkcja1 a następnie rejestruje wynik w konsoli. Krótszy sposób zapisania tego byłby następujący:

konsola.log (transformacja ((X) => X * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript ma wbudowaną funkcję wyższego rzędu, która zasadniczo robi to samo co przekształcać, które omówimy później.

Mamy nadzieję, że zaczynasz rozumieć, jak działają funkcje wyższego rzędu w JavaScript. Przyjrzyj się poniższej funkcji i sprawdź, czy potrafisz odgadnąć, co ona robi.

funkcjonowaćfiltruj i przekształć(fn, arrayToBeFiltered, warunek) {
pozwalać przefiltrowana tablica = [];
Do (pozwalać ja = 0; i < arrayToBeFiltered.length; i++) {
Jeśli (warunek (tablicaToBeFiltered[i])) {
pozwalać y = przekształć (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } w przeciwnym razie {
 filteredArray.push (tablicaToBeFiltered[i])
 }
 }
powrót filtrowana tablica
}

Ten blok kodu definiuje funkcję, która robi to, czego można się spodziewać — sprawdza elementy tablicy, które spełniają określony warunek, i przekształca je za pomocą przekształcać() funkcjonować. Aby użyć tej funkcji, robisz coś takiego:

filtruj i przekształć ((X) => X * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

w przeciwieństwie do przekształcać funkcja, filtruj i przekształć funkcja przyjmuje dwie funkcje jako parametry: przyp I stan. The stan funkcja sprawdza, czy parametr został przekazany, czy jest liczbą parzystą i zwraca wartość true. W przeciwnym razie zwraca false.

Jeśli stan ma wartość true (warunek jest spełniony), tylko wtedy jest przekształcać wywołana funkcja. Ta logika może się przydać, jeśli pracujesz z tablicą i chcesz przekształcić pewne elementy. Jeśli uruchomisz ten kod w konsoli przeglądarki, powinieneś otrzymać następującą odpowiedź:

[ 1, 4, 3, 8, 5 ]

Widać, że funkcja przekształca tylko te elementy, które spełniają określony warunek, pozostawiając elementy, które nie spełniają tego warunku, bez zmian.

Funkcja wyższego rzędu Array.map() w JavaScript

Metody tablicowe, takie jak map() są funkcjami wyższego rzędu, które ułatwiają manipulowanie tablicami. Oto jak to działa.

pozwalać tablica = [ 1, 2, 3, 4, 5 ];
pozwalać przekształcona tablica = tablica.map((X) => X * 2);

Kiedy się logujesz tablica przekształcona w konsoli przeglądarki powinieneś uzyskać taki sam wynik, jaki otrzymałeś z przekształcać wspomniana wcześniej funkcja:

[ 2, 4, 6, 8, 10 ]

tablica.map() przyjmuje dwa parametry, pierwszy parametr odnosi się do samego elementu, podczas gdy drugi parametr odnosi się do indeksu elementu (pozycji w tablicy). z właśnie tablica.map() możesz osiągnąć takie same wyniki jak np filtruj i przekształć funkcjonować. Oto jak to zrobić:

pozwalać tablica = [ 1, 2, 3, 4, 5 ];
pozwalać przekształcona tablica = tablica.map((X) => X % 20? X * 2: X);

W powyższym bloku kodu funkcja zwraca iloczyn bieżącego elementu i 2, jeśli element jest parzysty. W przeciwnym razie zwraca element nietknięty.

Z wbudowanym mapa udało ci się wyeliminować potrzebę kilku wierszy kodu, dzięki czemu kod jest znacznie czystszy i zmniejsza się prawdopodobieństwo wystąpienia błędów.

Funkcja Array.filter() w JavaScript

Kiedy wywołujesz filtr metody na tablicy, upewnij się, że wartość zwracana przez funkcję, którą przekazujesz do metody, to prawda lub fałsz. The filtr Metoda zwraca tablicę zawierającą elementy spełniające przesłany warunek. Oto jak go używasz.

funkcjonowaćsprawdź pierwszą literę(słowo) {
pozwalać samogłoski = "aeiou"
Jeśli (samogłoski.zawiera(słowo[0].na małe litery())) {
powrót słowo;
 } w przeciwnym razie {
powrót;
 }
}
pozwalać słowa = [ "Cześć", "z", „ten”, "dzieci", "z", "planeta", "Ziemia" ];
pozwalać wynik = słowa.filtr((X) => sprawdź pierwszą literę (x))

Powyższy blok kodu przechodzi przez słowa array i filtruje dowolne słowo, którego pierwszą literą jest samogłoska. Po uruchomieniu kodu i zalogowaniu pliku wynik zmiennej, powinieneś otrzymać następujące wyniki:

[ 'z', 'Ziemia' ];

Funkcja Array.reduce() w JavaScript

The zmniejszyć() funkcja wyższego rzędu przyjmuje dwa parametry. Pierwszym parametrem jest funkcja redukcji. Ta funkcja redukcji jest odpowiedzialna za połączenie dwóch wartości i zwrócenie tej wartości. Drugi parametr jest opcjonalny.

Definiuje wartość początkową, która ma zostać przekazana do funkcji. Jeśli chcesz zwrócić sumę wszystkich elementów w tablicy, możesz wykonać następujące czynności:

pozwalać za = [ 1, 2, 3, 4, 5];
pozwalać suma = 0;
Do (pozwalać ja = 0; i < a.długość; i++) {
 suma = suma + a[i];
}
konsola.log (suma);

Jeśli uruchomisz kod, suma powinno być 15 Możesz też podejść do tematu inaczej zmniejszyć funkcjonować.

pozwalać za = [ 1, 2, 3, 4, 5 ];
suma = a.redukuj((c, rz) => c + n);
konsola.log (suma);

Powyższy blok kodu jest znacznie czystszy w porównaniu z wcześniejszym przykładem. W tym przykładzie funkcja redukcji przyjmuje dwa parametry: C I N. C odnosi się do bieżącego elementu while N odnosi się do następnego elementu w tablicy.

Po uruchomieniu kodu funkcja redukująca przechodzi przez tablicę, upewniając się, że do wyniku z poprzedniego kroku została dodana bieżąca wartość.

Potęga funkcji wyższego rzędu

Funkcje w JavaScript są potężne, ale funkcje wyższego rzędu przenoszą rzeczy na wyższy poziom. Są szeroko stosowane w programowaniu funkcyjnym, umożliwiając łatwe filtrowanie, redukowanie i mapowanie tablic.

Funkcje wyższego rzędu mogą pomóc w pisaniu bardziej modułowego i wielokrotnego użytku kodu podczas tworzenia aplikacji.