Forstå høyere ordensfunksjoner i JavaScript

JavaScript er et kraftig språk som støttes av de fleste moderne nettlesere, og det er et godt valg for nybegynnere.

Akkurat som mange andre moderne programmeringsspråk, støtter JavaScript funksjoner som lar deg isolere en kodeblokk og gjenbruke den et annet sted. Du kan også bruke tilordne funksjoner til variabler og sende dem som parametere, som andre verdier.

Hva er høyere ordensfunksjoner?

Den enkleste definisjonen for en funksjon av høyere orden er en funksjon som utfører operasjoner på andre funksjoner ved å akseptere dem som parametere eller returnere dem. Funksjoner av høyere orden er mye brukt i funksjonelt programmeringsparadigme. Hvis du er akkurat i gang med JavaScript, kan funksjoner av høyere orden være litt vanskelige å forstå.

Tenk på følgende eksempel:

funksjonforvandle(fn) {
la resultArray = [];
komme tilbakefunksjon (array) {
til (la jeg = 0; i < array.length; i++) {
 resultArray.push (fn (array[i]))
 }
komme tilbake resultatArray
 }
}

I kodeblokken ovenfor vises forvandle funksjon er en høyere-ordens funksjon som tar inn fn fungerer som en parameter og returnerer en anonym funksjon som tar inn array som en parameter.

Hensikten med forvandle funksjonen er å modifisere elementene i matrisen. Først definerer koden en variabel resultatArray og binder den til en tom matrise.

De forvandle funksjon returnerer en anonym funksjon som går gjennom hvert element i array, sender deretter elementet til fn funksjon for beregning, og skyver resultatet inn resultatArray. Etter at løkken er fullført, returnerer den anonyme funksjonen resultatArray.

konst funksjon1 = transform((x) => x * 2)
konsoll.log (funksjon1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Kodeblokken ovenfor tildeler den anonyme funksjonen som returneres av forvandle funksjon til konstantvariabelen funksjon 1. fn returnerer produktet av x som er en erstatning for array[i].

Koden sender også en matrise, som en parameter til funksjon 1 og logger deretter resultatet til konsollen. En kortere måte å skrive dette på er:

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

JavaScript har en innebygd funksjon av høyere orden som i utgangspunktet gjør det samme som forvandle, som vi skal dekke senere.

Forhåpentligvis begynner du å forstå hvordan høyere ordensfunksjoner i JavaScript fungerer. Ta en titt på følgende funksjon og se om du kan gjette hva den gjør.

funksjonfilterAndTransform(fn, arrayToBeFiltered, tilstand) {
la filteredArray = [];
til (la jeg = 0; i < arrayToBeFiltered.length; i++) {
hvis (tilstand (arrayToBeFiltered[i])) {
la y = transform (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } ellers {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
komme tilbake filtrertArray
}

Denne kodeblokken definerer en funksjon som gjør det du kanskje mistenker – den sjekker for elementene i matrisen som oppfyller en bestemt betingelse og transformerer dem med forvandle() funksjon. For å bruke denne funksjonen, gjør du noe som dette:

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

i motsetning til forvandle funksjon, The filterAndTransform funksjon tar to funksjoner som parametere: fn og betingelse. De betingelse funksjonen sjekker om parameteren passerte, er et partall og returnerer sant. Ellers returnerer den falsk.

Hvis betingelse løser seg til sann (betingelsen er oppfylt), først da er forvandle funksjon kalt. Denne logikken kan være nyttig hvis du jobber med en matrise og ønsker å transformere visse elementer. Hvis du kjører denne koden i nettleserkonsollen, bør du få følgende svar:

[ 1, 4, 3, 8, 5 ]

Du kan se at funksjonen bare transformerer elementene som oppfyller en bestemt betingelse, og forlater elementene som ikke oppfyller betingelsen, som de er.

Array.map() Higher-Order-funksjonen i JavaScript

Matrisemetoder som map() er funksjoner av høyere orden som gjør det lettere å manipulere matriser. Slik fungerer det.

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

Når du logger transformedArray i nettleserkonsollen bør du få det samme resultatet som du fikk med forvandle funksjon nevnt tidligere:

[ 2, 4, 6, 8, 10 ]

array.map() tar inn to parametere, den første parameteren refererer til selve elementet, mens den andre parameteren refererer til elementets indeks (posisjon i matrisen). Med bare array.map() du kan oppnå de samme resultatene som filterAndTransform funksjon. Slik gjør du det:

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

I kodeblokken ovenfor returnerer funksjonen produktet av det gjeldende elementet og 2, hvis elementet er partall. Ellers returnerer den elementet urørt.

Med den innebygde kart funksjon, har du klart å eliminere behovet for flere linjer med kode, og dermed resultert i mye renere kode og færre sjanser for at feil skal oppstå.

Array.filter()-funksjonen i JavaScript

Når du påkaller filter metode på en matrise, sørg for at returverdien til funksjonen du sender inn i metoden enten er sann eller usann. De filter metoden returnerer en matrise som inneholder elementer som oppfyller betingelsen som ble bestått. Her er hvordan du bruker det.

funksjonsjekk FirstLetter(ord) {
la vokaler = "aeiou"
hvis (vokaler.inkluderer(ord[0].tolowerCase())) {
komme tilbake ord;
 } ellers {
komme tilbake;
 }
}
la ord = [ "Hallo", "fra", "de", "barn", "av", "planet", "Jord" ];
la resultat = ord.filter((x) => checkFirstLetter (x))

Kodeblokken ovenfor krysser ord array og filtrerer alle ord hvis første bokstav er en vokal. Når du kjører koden og logger resultat variabel, bør du få følgende resultater:

[ 'av', 'Jord' ];

Array.reduce()-funksjonen i JavaScript

De redusere() høyere ordens funksjon tar inn to parametere. Den første parameteren er reduksjonsfunksjonen. Denne reduksjonsfunksjonen er ansvarlig for å kombinere to verdier og returnere den verdien. Den andre parameteren er valgfri.

Den definerer startverdien som skal overføres til funksjonen. Hvis du vil returnere summen av alle elementene i en matrise, kan du gjøre følgende:

la a = [ 1, 2, 3, 4, 5];
la sum = 0;
til (la jeg = 0; i < a.length; i++) {
 sum = sum + a[i];
}
konsoll.log (sum);

Hvis du kjører koden, sum skal være 15. Du kan også ta en annen tilnærming med redusere funksjon.

la a = [ 1, 2, 3, 4, 5 ];
sum = a.redusere((c, n) => c + n);
konsoll.log (sum);

Kodeblokken ovenfor er mye renere sammenlignet med det tidligere eksemplet. I dette eksemplet tar reduksjonsfunksjonen inn to parametere: c og n. c refererer til det gjeldende elementet mens n refererer til neste element i matrisen.

Når koden kjører, går reduksjonsfunksjonen gjennom matrisen, og sørger for å legge til gjeldende verdi til resultatet fra forrige trinn.

Kraften til funksjoner av høyere orden

Funksjoner i JavaScript er kraftige, men funksjoner av høyere orden tar ting til neste nivå. De er mye brukt i funksjonell programmering, slik at du enkelt kan filtrere, redusere og kartlegge arrays.

Funksjoner av høyere orden kan hjelpe deg med å skrive mer modulær og gjenbrukbar kode når du bygger applikasjoner.