Wprowadzenie do funkcji wyższego rzędu w JavaScript

Z definicji funkcja wyższego rzędu jest funkcją, która przynajmniej odbiera jedną lub więcej innych funkcji jako argumenty lub zwraca inną funkcję w wyniku. W tym samouczku skupimy się na standardowych funkcjach biblioteki jako filtra, mapy i reduku.

W tym samouczku nauczysz się:

• Co to jest funkcja wyższego rzędu.
• Dlaczego możemy używać funkcji wyższego rzędu w JavaScript.
• Jak i kiedy używać filtru, mapowania i zmniejszania funkcji.

Co to jest funkcja wyższego rzędu ?

W funkcjach JavaScript są Obiekty pierwszej klasy: Można je przypisać do zmiennych, przekazywania jako argumenty do innych funkcji lub zwracane przez inne funkcje. Zastosowanie funkcji wyższego rzędu opiera się na tych osobliwościach. Definiujemy funkcję wyższego rzędu jako funkcję, która przynajmniej akceptuje inne funkcje jako jej argumenty lub zwraca inną funkcję jako wynik. W tym samouczku skupimy się na standardowych funkcjach bibliotecznych jako filtr, mapa I zmniejszyć.

W tym samouczku skorzystamy z Funkcje strzałek: Jeśli chcesz dowiedzieć się więcej o tej nowej składni funkcji, możesz sprawdzić ten samouczek, który opublikowaliśmy na ten temat.

Filtr lub szyk.prototyp.filtr

Pierwszą funkcją, o której porozmawiamy filtr, lub, aby użyć pełnej nazwy, szyk.prototyp.filtr. Ta funkcja jest w rzeczywistości metodą szyk Obiekt i to, co robi, jest bardzo proste: zwraca nową tablicę złożoną przez elementy oryginalnej tablicy, które przechodzą test zaimplementowany w ciele.

Żeby było jasne, zobaczmy przykład. Załóżmy, że mamy szereg słów i chcemy „filtrować” słowa skomponowane dokładnie trzy litery. Moglibyśmy uzyskać to, czego chcemy, używając Do pętla, pisanie:

const słowa = [„house”, „pióra”, „książka”, „komputer”, „samochód”]; const Shortwords = []; // moglibyśmy użyć standardowego stylu C do pętli… dla (niech i = 0; i < words.length; i++)  if (words[i].length == 3)  shortWords.push(words[i])   //… or a for… of loop for (let word of words)  if (word.length == 3)  shortWords.push(word);   

Zarówno powyższe przykłady, jak i oba osiągamy ten sam wynik. Po wykonaniu kodu tablica „krótkich słów” będzie miała dwóch członków: „Pen” i „samochód”. Możesz jednak zauważyć, że zwłaszcza pierwszy przykład jest dość gadatliwy. Zobaczmy, jak możemy osiągnąć ten sam wynik przy mniejszym kodzie, używając filtr:

const Shortwords = słowa.Filtr ((element) => element.długość == 3);

Otrzymaliśmy dokładnie ten sam wynik. Jest jednak jedna różnica: tym razem, używając również strzałka Funkcja, napisaliśmy wszystko w jednym wierszu kodu!. Oto jak filtr Działa: przyjmuje tylko jeden „obowiązkowy” argument, który jest inną funkcją, zwrotem oddzwonienia.

To wywołanie zwrotne, z kolei akceptuje jeden argument, który jest elementem obecnie przetwarzanej oryginalnej tablicy. Jeśli element przejdzie test (w tym przypadku, jeśli długość łańcucha jest równa 3), element jest wstawiany do nowej tablicy.

Mapa lub szyk.prototyp.mapa

mapa (szyk.prototyp.mapa) Metoda, robi coś innego. Akceptuje również funkcję wywołania zwrotnego jako jedyny obowiązkowy argument, ale zwraca nową tablicę złożoną przez elementy wynikające z zastosowania wspomnianego oddzwaniania do wszystkich elementów oryginalnej tablicy.

Przykład wszystko wyjaśni wszystko. Tym razem załóżmy, że chcemy uzyskać tablicę, która powinna zawierać wszystkie struny wewnątrz tablicy „słów”, ale w formie górnej. W jednym wierszu moglibyśmy napisać:

const uppercasedwords = słowa.mapa ((element) => element.ToupperCase ());

Po wykonaniu powyższego kodu tablica „Uppercased słów” będzie:

[„House”, „Pen”, „Book”, „komputer”, „samochód”]

Oddzwonienie zaakceptowane jako argument przez mapa, ma tylko jeden obowiązkowy argument, który jest elementem oryginalnej tablicy, która jest przetwarzana. Wartość wynikająca z zastosowania wywołania zwrotnego do każdego elementu oryginalnej tablicy jest zwracana (pamiętaj: funkcje strzałek bez kręconych klamr. Rezultatem w tym przypadku jest nowa tablica złożona przez wyższą wersję wszystkich elementów w oryginalnej.

Zmniejszyć lub szyk.prototyp.zmniejszyć

zmniejszyć, Lub szyk.prototyp.zmniejszyć Metoda działa w inny sposób: akceptuje zwrot oddzwonienia, który przyjmuje dwa obowiązkowe argumenty. Pierwszy to tak zwane akumulator, a drugi to Aktualna wartość. Zamiast tworzyć nową tablicę, ta funkcja wyższego rzędu korzysta z dostarczonego wywołania zwrotnego, również nazywana reduktor, Do zmniejszyć tablica do jednej wartości, która jest zwracana. Jest to w rzeczywistości prostsze niż się wydaje, zobaczmy podstawowy przykład.

Załóżmy, że mamy tablicę zawierającą pewne liczby:

Const Number = [15, 0.50, 200];

Teraz wyobraź sobie, że chcemy uzyskać sumę wszystkich liczb zawartych w tablicy. Znowu moglibyśmy użyć pętli lub, jak chcemy zademonstrować, zmniejszyć, w następujący sposób:

Niech TotalPrice = Liczby.redukuj ((akumulator, currentValue) => akumulator + currentValue);

zmniejszyć Metoda, jak wspomniano powyżej, przyjmuje funkcję wywołania zwrotnego, która przyjmuje dwa obowiązkowe argumenty. Pierwszy to akumulator: Ten argument zgromadzi wyniki wytwarzane za każdym razem, gdy wywołuje funkcja wywołania zwrotnego. Drugi jest Aktualna wartość, który reprezentuje obecny element oryginalnej tablicy, która jest przetwarzana.

Jedną ważną rzeczą do zauważenia jest to, że jeśli nie określono inaczej (za chwilę zobaczymy, jak to zrobić), po raz pierwszy wywołanie funkcji wywołania zwrotnego wartość akumulatora będzie pierwszym elementem tablicy. Możemy zdać sobie sprawę, że po prostu logując wartość akumulator i Aktualna wartość, Za każdym razem, gdy wykonywane jest oddzwonienie:

Niech TotalPrice = Liczby.redukuj ((akumulator, currentValue) => konsola.log (akumulator, currentValue); zwróć akumulator + CurrentValue; ); 

Wyjście powyższego kodu będzie:

15 0.5 15.5 200 

Jak można zauważyć, jeśli wartość początkowa dla akumulator nie jest wyraźnie dostarczany, pierwszy element tablicy jest używany (15) i, bardzo ważny, indeks pierwszego elementu przetworzonego przez tablicę jest1, Tak więc w tym przypadku pierwszy element, który ma być przetworzony 0.5 (Druga).

Jeśli się nad tym zastanowić, ma to sens: w przeciwnym razie pierwszy element tablicy zostanie policzony dwa razy! (Warto zauważyć, że moglibyśmy ręcznie określić wskaźnik pierwszego elementu tablicy, który ma zostać przetworzony CurrentIndex opcjonalny argument zwrotu oddzwonienia, podając go po Aktualna wartość). Zgodnie z oczekiwaniami, ostateczna wartość Całkowita wartość będzie 215.5:

Całkowita wartość 215.5 

W powyższym przykładzie elementy oryginalnej tablicy „liczby” były prostymi liczbami, więc typy podstawowe W JavaScript. Co jeśli byłyby przedmiotami? Załóżmy, że mamy szereg obiektów, z których każdy ma trzy nieruchomości: nazwa, cena i waluta cenowa:

const items = [nazwa: „Book”, cena: 15, waluta: „EUR”, Nazwa: „Car”, Cena: 15000, Waluta: „EUR”, Nazwa: „Laptop”, cena: 1200 , waluta: „eur”]; 

To, co chcemy tutaj uzyskać, to suma wszystkich cen przedmiotów. Problem natychmiast pojawia się: nie chcemy bezpośrednio sumować każdej pozycji tablicy, ponieważ w tym przypadku pracujemy z obiektami, ale cena właściwość każdego z nich. Dlatego powinniśmy skorzystać z opcjonalnego parametru zaakceptowanego przez zmniejszyć, który jest wartość początkowa:

Niech finalPrice = elementy.Zmniejsz ((akumulator, currentValue) => akumulator + CurrentValue.Cena, 0)

Cena ostateczna Otrzymujemy, zgodnie z oczekiwaniami, jest 16215. Gdybyśmy nie określali wartość początkowa, Podając go po funkcji zwrotnej (0), pierwszy element tablicy „elementów” byłby używany jako wartość początkowa dla akumulator. Ponieważ jest to obiekt, wynik nie byłby zgodny z oczekiwaniami!

Wnioski

W tym samouczku nauczyliśmy się wiedzieć, co definiuje funkcję wyższego rzędu i dlaczego można je używać w JavaScript. Nauczyliśmy się również znać i używać trzech funkcji wyższego rzędu zawartych w standardowej bibliotece JavaScript, takich jak filtr, mapa I zmniejszyć. Jeśli jesteś zainteresowany innymi tematami JavaScript, możesz sprawdzić nasze samouczki na obietnice lub funkcjach strzałek.

Powiązane samouczki Linux:

• Wprowadzenie do automatyzacji, narzędzi i technik Linuksa
• Mastering Bash Script Loops
• Rzeczy do zainstalowania na Ubuntu 20.04
• Mint 20: Lepsze niż Ubuntu i Microsoft Windows?
• Rzeczy do zrobienia po zainstalowaniu Ubuntu 20.04 Focal Fossa Linux
• Zagnieżdżone pętle w skryptach Bash
• Jak często musisz ponownie uruchomić serwer Linux?
• Samouczek debugowania GDB dla początkujących
• Obsługa danych wejściowych użytkownika w skryptach Bash
• Jak podwójnie rozruch Kali Linux i Windows 10