Forstå funktioner i højere orden i JavaScript

JavaScript er et kraftfuldt sprog, der understøttes af de fleste moderne browsere, og det er et godt valg for begyndere.

Ligesom mange andre moderne programmeringssprog understøtter JavaScript funktioner, der lader dig isolere en kodeblok og genbruge den et andet sted. Du kan også bruge tildele funktioner til variabler og videregive dem som parametre, ligesom andre værdier.

Hvad er funktioner af højere orden?

Den enkleste definition af en højere-ordens funktion er en funktion, der udfører operationer på andre funktioner ved at acceptere dem som parametre eller returnere dem. Funktioner af højere orden er meget brugt i funktionelt programmeringsparadigme. Hvis du er lige at komme i gang med JavaScript, kan funktioner af højere orden være lidt svære at forstå.

Overvej følgende eksempel:

fungeretransformere(fn) {
lade resultArray = [];
Vend tilbagefungere (array) {
til (lade i = 0; i < array.length; i++) {
 resultArray.push (fn (array[i]))
 }
Vend tilbage resultatArray
 }
}

I kodeblokken ovenfor er transformere funktion er en højere-ordens funktion, der tager i fn fungerer som en parameter og returnerer en anonym funktion, der tager ind array som en parameter.

Formålet med transformere Funktionen er at ændre elementerne i arrayet. Først definerer koden en variabel resultatArray og binder det til et tomt array.

Det transformere funktion returnerer en anonym funktion, der går gennem hvert element i array, og sender derefter elementet til fn funktion til beregning, og skubber resultatet ind resultatArray. Efter afslutningen af ​​løkken returnerer den anonyme funktion resultatArray.

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

Kodeblokken ovenfor tildeler den anonyme funktion returneret af transformere funktion til den konstante variabel funktion 1. fn returnerer produktet af x som er en erstatning for matrix[i].

Koden sender også et array, som en parameter til funktion 1 og logger derefter resultatet til konsollen. En kortere måde at skrive dette på ville være:

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

JavaScript har en indbygget funktion af højere orden, der stort set gør det samme som transformere, som vi kommer ind på senere.

Forhåbentlig begynder du at forstå, hvordan funktioner af højere orden i JavaScript fungerer. Tag et kig på følgende funktion og se, om du kan gætte, hvad den gør.

fungerefilterAndTransform(fn, arrayToBeFiltered, betingelse) {
lade filtreretArray = [];
til (lade i = 0; i < arrayToBeFiltered.length; i++) {
hvis (tilstand (arrayToBeFiltered[i])) {
lade y = transform (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } andet {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
Vend tilbage filtreretArray
}

Denne kodeblok definerer en funktion, der gør, hvad du måske har mistanke om - den tjekker for elementerne i arrayet, der opfylder en bestemt betingelse og transformerer dem med transform() fungere. For at bruge denne funktion, gør du sådan noget:

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

I modsætning til transformere funktion, den filterAndTransform funktion har to funktioner som parametre: fn og tilstand. Det tilstand funktion kontrollerer, om parameteren bestået, er et lige tal og returnerer sand. Ellers returnerer den falsk.

Hvis tilstand løses til sand (betingelsen er opfyldt), først da er transformere funktion kaldet. Denne logik kan være nyttig, hvis du arbejder med et array og ønsker at transformere visse elementer. Hvis du kører denne kode i browserkonsollen, skulle du få følgende svar:

[ 1, 4, 3, 8, 5 ]

Du kan se, at funktionen kun transformerer de elementer, der opfylder en bestemt betingelse, og efterlader de elementer, der ikke opfylder betingelsen, som de er.

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

Array-metoder som map() er funktioner af højere orden, der gør det nemmere at manipulere arrays. Sådan fungerer det.

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

Når du logger transformedArray i browserkonsollen skulle du få det samme resultat, som du fik med transformere funktion nævnt tidligere:

[ 2, 4, 6, 8, 10 ]

array.map() tager to parametre ind, den første parameter refererer til selve elementet, mens den anden parameter refererer til elementets indeks (position i arrayet). Med bare array.map() du kan opnå de samme resultater som filterAndTransform fungere. Sådan gør du:

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

I kodeblokken ovenfor returnerer funktionen produktet af det aktuelle element og 2, hvis elementet er lige. Ellers returnerer det elementet urørt.

Med det indbyggede kort funktion, har du formået at eliminere behovet for flere linjer kode, hvilket resulterer i meget renere kode og færre chancer for, at der opstår fejl.

Array.filter()-funktionen i JavaScript

Når du påberåber dig filter metode på et array, skal du sørge for, at returværdien af ​​den funktion, du overfører til metoden, enten er sand eller falsk. Det filter metode returnerer et array, der indeholder elementer, der opfylder den beståede betingelse. Her er hvordan du bruger det.

fungerecheckFirstLetter(ord) {
lade vokaler = "aeiou"
hvis (vokaler.inkluderer(ord[0].tolowerCase())) {
Vend tilbage ord;
 } andet {
Vend tilbage;
 }
}
lade ord = [ "Hej", "fra", "det", "børn", "af", "planet", "Jorden" ];
lade resultat = words.filter((x) => checkFirstLetter (x))

Kodeblokken ovenfor krydser ord array og filtrerer ethvert ord, hvis første bogstav er en vokal. Når du kører koden og logger resultat variabel, bør du få følgende resultater:

[ 'af', 'Jorden' ];

Array.reduce()-funktionen i JavaScript

Det reducere() højere ordens funktion tager to parametre ind. Den første parameter er reduktionsfunktionen. Denne reduktionsfunktion er ansvarlig for at kombinere to værdier og returnere denne værdi. Den anden parameter er valgfri.

Den definerer startværdien, der skal overføres til funktionen. Hvis du vil returnere en sum af alle elementerne i et array, kan du gøre følgende:

lade a = [ 1, 2, 3, 4, 5];
lade sum = 0;
til (lade i = 0; i < a.længde; i++) {
 sum = sum + a[i];
}
konsol.log (sum);

Hvis du kører koden, sum skal være 15. Du kan også tage en anden tilgang med reducere fungere.

lade a = [ 1, 2, 3, 4, 5 ];
sum = a.reducere((c, n) => c + n);
konsol.log (sum);

Kodeblokken ovenfor er meget renere i forhold til det tidligere eksempel. I dette eksempel tager reduktionsfunktionen to parametre: c og n. c henviser til det aktuelle element mens n refererer til det næste element i arrayet.

Når koden kører, går reduceringsfunktionen gennem arrayet og sørger for at tilføje den aktuelle værdi til resultatet fra det forrige trin.

Styrken ved funktioner af højere orden

Funktioner i JavaScript er kraftfulde, men funktioner af højere orden tager tingene til det næste niveau. De er meget brugt i funktionel programmering, så du nemt kan filtrere, reducere og kortlægge arrays.

Funktioner af højere orden kan hjælpe dig med at skrive mere modulær og genbrugelig kode, når du bygger applikationer.