Razumevanje funkcij višjega reda v JavaScriptu

JavaScript je zmogljiv jezik, ki ga podpira večina sodobnih brskalnikov, in je odlična izbira za začetnike.

Tako kot mnogi drugi sodobni programski jeziki tudi JavaScript podpira funkcije, ki vam omogočajo, da izolirate blok kode in ga ponovno uporabite nekje drugje. Uporabite lahko tudi dodelitev funkcij spremenljivkam in jih posredujete kot parametre, tako kot druge vrednosti.

Kaj so funkcije višjega reda?

Najenostavnejša definicija funkcije višjega reda je funkcija, ki izvaja operacije na drugih funkcijah tako, da jih sprejme kot parametre ali vrne. Funkcije višjega reda se močno uporabljajo v paradigma funkcionalnega programiranja. Če ste šele začenjam z JavaScriptom, je funkcije višjega reda morda nekoliko težko razumeti.

Razmislite o naslednjem primeru:

funkcijotransformirati(fn) {
pustiti rezultatArray = [];
vrnitevfunkcijo (niz) {
za (pustiti jaz = 0; i < array.length; i++) {
 resultArray.push (fn (matrika[i]))
 }
vrnitev resultArray
 }
}

V zgornjem bloku kode je transformirati funkcija je funkcija višjega reda, ki sprejme fn funkcijo kot parameter in vrne anonimno funkcijo, ki sprejme niz kot parameter.

Namen transformirati funkcija je spreminjanje elementov v matriki. Najprej koda definira spremenljivko resultArray in ga poveže s prazno matriko.

The transformirati funkcija vrne anonimno funkcijo, ki preleti vsak element v niz, nato posreduje element v fn funkcijo za izračun in potisne rezultat v resultArray. Po zaključku zanke anonimna funkcija vrne resultArray.

konst funkcija1 = transformacija((x) => x * 2)
konzola.log (funkcija1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Zgornji blok kode dodeli anonimno funkcijo, ki jo vrne transformirati funkcijo na konstantno spremenljivko funkcija1. fn vrne izdelek iz x ki je nadomestek za niz [i].

Koda posreduje tudi matriko kot parameter funkcija1 in nato zabeleži rezultat v konzolo. Krajši način zapisa bi bil:

konzola.log (pretvorba((x) => x * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript ima vgrajeno funkcijo višjega reda, ki v bistvu počne isto kot transformirati, ki jih bomo obravnavali kasneje.

Upajmo, da začenjate razumeti, kako delujejo funkcije višjega reda v JavaScriptu. Oglejte si naslednjo funkcijo in preverite, ali lahko uganete, kaj počne.

funkcijofilterAndTransform(fn, arrayToBeFiltered, stanje) {
pustiti filteredArray = [];
za (pustiti jaz = 0; i < arrayToBeFiltered.length; i++) {
če (pogoj (arrayToBeFiltered[i])) {
pustiti y = transform (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } drugače {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
vrnitev filteredArray
}

Ta blok kode definira funkcijo, ki naredi tisto, kar morda sumite – preveri elemente v matriki, ki izpolnjujejo določen pogoj, in jih preoblikuje z transformacija() funkcijo. Če želite uporabiti to funkcijo, naredite nekaj takega:

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

Za razliko od transformirati funkcijo, The filterAndTransform funkcija sprejme dve funkciji kot parametra: fn in stanje. The stanje funkcija preveri, ali je parameter uspešen, ali je sodo število, in vrne true. V nasprotnem primeru vrne false.

če stanje razreši na true (pogoj je izpolnjen), šele takrat je transformirati imenovana funkcija. Ta logika bi vam lahko prišla prav, če delate z matriko in želite preoblikovati določene elemente. Če to kodo zaženete v konzoli brskalnika, bi morali dobiti naslednji odgovor:

[ 1, 4, 3, 8, 5 ]

Vidite lahko, da funkcija preoblikuje samo elemente, ki izpolnjujejo določen pogoj, elemente, ki ne izpolnjujejo pogoja, pa pusti takšne, kot so.

Funkcija višjega reda Array.map() v JavaScriptu

Matrične metode, kot je map() so funkcije višjega reda, ki olajšajo manipulacijo nizov. Evo, kako to deluje.

pustiti niz = [ 1, 2, 3, 4, 5 ];
pustiti transformedArray = array.map((x) => x * 2);

Ko se prijavite transformedArray v konzoli brskalnika bi morali dobiti enak rezultat, kot ste ga dobili z transformirati prej omenjena funkcija:

[ 2, 4, 6, 8, 10 ]

array.map() sprejme dva parametra, prvi parameter se nanaša na sam element, medtem ko se drugi parameter nanaša na indeks elementa (položaj v matriki). S samo array.map() lahko dosežete enake rezultate kot filterAndTransform funkcijo. To storite takole:

pustiti niz = [ 1, 2, 3, 4, 5 ];
pustiti transformedArray = array.map((x) => x % 20? x * 2: x);

V zgornjem bloku kode funkcija vrne zmnožek trenutnega elementa in 2, če je element sod. V nasprotnem primeru vrne element nedotaknjen.

Z vgrajenim zemljevid funkcijo, vam je uspelo odpraviti potrebo po več vrsticah kode, kar je povzročilo veliko čistejšo kodo in manj možnosti za pojav napak.

Funkcija Array.filter() v JavaScriptu

Ko prikličete filter metode na matriki, se prepričajte, da je vrnjena vrednost funkcije, ki jo posredujete metodi, resnična ali napačna. The filter metoda vrne matriko, ki vsebuje elemente, ki izpolnjujejo podani pogoj. Evo, kako ga uporabite.

funkcijopreveriPrvoČrko(beseda) {
pustiti samoglasniki = "samoglasniki"
če (samoglasniki.vključuje(beseda[0].toLowerCase())) {
vrnitev beseda;
 } drugače {
vrnitev;
 }
}
pustiti besede = [ "Zdravo", "od", "the", "otroci", "od", "planet", "Zemlja" ];
pustiti rezultat = besede.filter((x) => preveri prvo črko (x))

Zgornji blok kode prečka besede polje in filtrira vse besede, katerih prva črka je samoglasnik. Ko zaženete kodo in prijavite rezultat spremenljivko, bi morali dobiti naslednje rezultate:

[ 'od', 'Zemlja' ];

Funkcija Array.reduce() v JavaScriptu

The zmanjšati () funkcija višjega reda sprejme dva parametra. Prvi parameter je redukcijska funkcija. Ta redukcijska funkcija je odgovorna za združevanje dveh vrednosti in vrnitev te vrednosti. Drugi parameter je neobvezen.

Določa začetno vrednost, ki se posreduje funkciji. Če želite vrniti vsoto vseh elementov v matriki, lahko storite naslednje:

pustiti a = [ 1, 2, 3, 4, 5];
pustiti vsota = 0;
za (pustiti jaz = 0; i < a.dolžina; i++) {
 vsota = vsota + a[i];
}
konzola.log (vsota);

Če zaženete kodo, vsota mora biti 15. Lahko uporabite tudi drugačen pristop z zmanjšati funkcijo.

pustiti a = [ 1, 2, 3, 4, 5 ];
vsota = a.reduce((c, n) => c + n);
konzola.log (vsota);

Zgornji blok kode je veliko čistejši v primerjavi s prejšnjim primerom. V tem primeru ima redukcijska funkcija dva parametra: c in n. c se nanaša na trenutni element medtem ko n se nanaša na naslednji element v nizu.

Ko se koda izvaja, gre funkcija reduktorja skozi matriko in poskrbi, da rezultatu iz prejšnjega koraka doda trenutno vrednost.

Moč funkcij višjega reda

Funkcije v JavaScriptu so zmogljive, vendar funkcije višjega reda dvignejo stvari na višjo raven. Pogosto se uporabljajo v funkcionalnem programiranju, saj vam omogočajo enostavno filtriranje, zmanjšanje in preslikavo nizov.

Funkcije višjega reda vam lahko pomagajo pri pisanju bolj modularne in večkrat uporabne kode pri gradnji aplikacij.