Înțelegerea funcțiilor de ordin superior în JavaScript

JavaScript este un limbaj puternic acceptat de majoritatea browserelor moderne și este o alegere excelentă pentru începători.

La fel ca multe alte limbaje de programare moderne, JavaScript acceptă funcții care vă permit să izolați un bloc de cod și să-l reutilizați în altă parte. De asemenea, puteți utiliza funcții de atribuire variabilelor și le puteți transmite ca parametri, ca și alte valori.

Ce sunt funcțiile de ordin superior?

Cea mai simplă definiție pentru o funcție de ordin superior este o funcție care efectuează operații asupra altor funcții acceptându-le ca parametri sau returnându-le. Funcțiile de ordin superior sunt foarte utilizate în paradigma de programare functionala. Daca esti tocmai am început cu JavaScript, funcțiile de ordin superior ar putea fi puțin greu de înțeles.

Luați în considerare următorul exemplu:

funcţietransforma(fn) {
lăsa resultArray = [];





instagram viewer

întoarcerefuncţie (matrice) {
pentru (lăsa i = 0; i < array.length; i++) {
 resultArray.push (fn (matrice[i]))
 }
întoarcere resultArray
 }
}

În blocul de cod de mai sus, transforma funcția este o funcție de ordin superior care ia în fn funcția ca parametru și returnează o funcție anonimă care acceptă matrice ca parametru.

Scopul transforma funcția este de a modifica elementele din matrice. În primul rând, codul definește o variabilă resultArray și îl leagă la o matrice goală.

The transforma funcția returnează o funcție anonimă care circulă prin fiecare element în matrice, apoi trece elementul la fn funcția de calcul și împinge rezultatul în resultArray. După finalizarea buclei, funcția anonimă returnează resultArray.

const function1 = transform((X) => X * 2)
consolă.log (funcția1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Blocul de cod de mai sus atribuie funcția anonimă returnată de transforma funcţie la variabila constantă functia 1. fn returnează produsul de X care este un substitut pentru matrice[i].

Codul transmite, de asemenea, o matrice, ca parametru către functia 1 și apoi înregistrează rezultatul în consolă. Un mod mai scurt de a scrie asta ar fi:

consolă.log (transform((X) => X * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript are o funcție încorporată de ordin superior care, practic, face același lucru ca transforma, pe care o vom trata mai târziu.

Sperăm că începi să înțelegi cum funcționează funcțiile de ordin superior în JavaScript. Aruncă o privire la următoarea funcție și vezi dacă poți ghici ce face.

funcţiefilterAndTransform(fn, arrayToBeFiltered, condiție) {
lăsa filteredArray = [];
pentru (lăsa i = 0; i < arrayToBeFiltered.length; i++) {
dacă (condiție (arrayToBeFiltered[i])) {
lăsa y = transformare (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } altfel {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
întoarcere filteredArray
}

Acest bloc de cod definește o funcție care face ceea ce ați putea bănui - verifică elementele din matrice care îndeplinesc o anumită condiție și le transformă cu transforma() funcţie. Pentru a utiliza această funcție, faceți ceva de genul acesta:

filterAndTransform((X) => X * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

spre deosebire de transforma funcția, The filterAndTransform funcția are două funcții ca parametri: fn și condiție. The condiție funcția verifică dacă parametrul a trecut, este un număr par și returnează adevărat. În caz contrar, returnează false.

Dacă condiție se rezolvă la adevărat (condiția este îndeplinită), numai atunci este transforma funcția numită. Această logică ar putea fi utilă dacă lucrați cu o matrice și doriți să transformați anumite elemente. Dacă rulați acest cod în consola browserului, ar trebui să obțineți următorul răspuns:

[ 1, 4, 3, 8, 5 ]

Puteți vedea că funcția transformă doar elementele care îndeplinesc o anumită condiție, lăsând elementele care nu îndeplinesc condiția așa cum sunt.

Funcția de ordin superior Array.map() în JavaScript

Metode de matrice precum map() sunt funcții de ordin superior care facilitează manipularea tablourilor. Iată cum funcționează.

lăsa matrice = [ 1, 2, 3, 4, 5 ];
lăsa transformedArray = array.map((X) => X * 2);

Când vă logați transformedArray în consola browserului, ar trebui să obțineți același rezultat pe care l-ați obținut cu transforma funcția menționată mai devreme:

[ 2, 4, 6, 8, 10 ]

array.map() preia doi parametri, primul parametru se referă la elementul în sine, în timp ce al doilea parametru se referă la indicele elementului (poziția în matrice). Cu doar array.map() puteți obține aceleași rezultate ca și filterAndTransform funcţie. Iată cum o faci:

lăsa matrice = [ 1, 2, 3, 4, 5 ];
lăsa transformedArray = array.map((X) => X % 20? X * 2: X);

În blocul de cod de mai sus, funcția returnează produsul elementului curent și 2, dacă elementul este par. În caz contrar, returnează elementul neatins.

Cu încorporat Hartă funcție, ați reușit să eliminați necesitatea mai multor linii de cod, rezultând astfel un cod mult mai curat și mai puține șanse să apară erori.

Funcția Array.filter() în JavaScript

Când invoci filtru metoda pe o matrice, asigurați-vă că valoarea returnată a funcției pe care o treceți în metodă este fie adevărată, fie falsă. The filtru metoda returnează o matrice care conține elemente care îndeplinesc condiția trecută. Iată cum îl folosești.

funcţiecheckFirstLetter(cuvânt) {
lăsa vocale = "aeiou"
dacă (vocale.cuprinde(cuvânt[0].laLowerCase())) {
întoarcere cuvânt;
 } altfel {
întoarcere;
 }
}
lăsa cuvinte = [ "Buna ziua", "din", "cel", "copii", "de", "planetă", "Pământ" ];
lăsa rezultat = cuvinte.filtru((X) => checkFirstLetter (x))

Blocul de cod de mai sus traversează cuvinte matrice și filtrează orice cuvânt a cărui primă literă este o vocală. Când rulați codul și înregistrați rezultat variabilă, ar trebui să obțineți următoarele rezultate:

[ 'de', 'Pământ' ];

Funcția Array.reduce() în JavaScript

The reduce() funcția de ordin superior preia doi parametri. Primul parametru este funcția de reducere. Această funcție de reducere este responsabilă pentru combinarea a două valori și returnarea acelei valori. Al doilea parametru este opțional.

Acesta definește valoarea inițială de transmisă funcției. Dacă doriți să returnați o sumă a tuturor elementelor dintr-o matrice, puteți face următoarele:

lăsa a = [ 1, 2, 3, 4, 5];
lăsa suma = 0;
pentru (lăsa i = 0; i < a.lungime; i++) {
 suma = suma + a[i];
}
consolă.log (suma);

Dacă rulați codul, sumă ar trebui să fie 15. De asemenea, puteți adopta o abordare diferită cu reduce funcţie.

lăsa a = [ 1, 2, 3, 4, 5 ];
suma = a.reduce((c, n) => c + n);
consolă.log (suma);

Blocul de cod de mai sus este mult mai curat în comparație cu exemplul anterior. În acest exemplu, funcția de reducere ia doi parametri: c și n. c se referă la elementul curent while n se referă la următorul element din matrice.

Când rulează codul, funcția de reducere trece prin matrice, asigurându-vă că adăugați valoarea curentă la rezultatul de la pasul anterior.

Puterea funcțiilor de ordin superior

Funcțiile din JavaScript sunt puternice, dar funcțiile de ordin superior duc lucrurile la nivelul următor. Sunt utilizate pe scară largă în programarea funcțională, permițându-vă să filtrați, să reduceți și să mapați cu ușurință matricele.

Funcțiile de ordin mai înalt vă pot ajuta să scrieți cod mai modular și reutilizabil atunci când construiți aplicații.