Förstå högre ordningsfunktioner i JavaScript

JavaScript är ett kraftfullt språk som stöds av de flesta moderna webbläsare, och det är ett utmärkt val för nybörjare.

Precis som många andra moderna programmeringsspråk stöder JavaScript funktioner som låter dig isolera ett kodblock och återanvända det någon annanstans. Du kan också använda tilldela funktioner till variabler och skicka dem som parametrar, som andra värden.

Vad är högre ordningsfunktioner?

Den enklaste definitionen av en högre ordningsfunktion är en funktion som utför operationer på andra funktioner genom att acceptera dem som parametrar eller returnera dem. Funktioner av högre ordning används flitigt i funktionellt programmeringsparadigm. Om du är precis börjat med JavaScript, kan funktioner av högre ordning vara lite svåra att förstå.

Tänk på följande exempel:

fungeraomvandla(fn) {
låta resultArray = [];
lämna tillbakafungera (array) {
för (låta jag = 0; i < array.length; i++) {
 resultArray.push (fn (array[i]))
 }
lämna tillbaka resultatArray
 }
}

I kodblocket ovan visas omvandla funktion är en högre ordningsfunktion som tar in fn fungerar som en parameter och returnerar en anonym funktion som tar in array som en parameter.

Syftet med omvandla Funktionen är att modifiera elementen i arrayen. Först definierar koden en variabel resultatArray och binder den till en tom array.

De omvandla funktion returnerar en anonym funktion som går igenom varje element i array, skickar sedan elementet till fn funktion för beräkning, och skjuter in resultatet resultatArray. Efter slutförandet av slingan returnerar den anonyma funktionen resultatArray.

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

Kodblocket ovan tilldelar den anonyma funktionen som returneras av omvandla funktion till konstantvariabeln funktion1. fn returnerar produkten av x som är ett substitut för array[i].

Koden skickar också en array, som en parameter till funktion1 och loggar sedan resultatet till konsolen. Ett kortare sätt att skriva detta skulle vara:

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

JavaScript har en inbyggd högre ordningsfunktion som i princip gör samma sak som omvandla, som vi tar upp senare.

Förhoppningsvis börjar du förstå hur högre ordningsfunktioner i JavaScript fungerar. Ta en titt på följande funktion och se om du kan gissa vad den gör.

fungerafilterAndTransform(fn, arrayToBeFiltered, condition) {
låta filteredArray = [];
för (låta jag = 0; i < arrayToBeFiltered.length; i++) {
om (villkor (arrayToBeFiltered[i])) {
låta y = transform (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } annan {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
lämna tillbaka filteredArray
}

Det här kodblocket definierar en funktion som gör vad du kan misstänka – det söker efter elementen i arrayen som uppfyller ett visst villkor och transformerar dem med omvandla() fungera. För att använda den här funktionen gör du något så här:

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

till skillnad från omvandla funktion, The filterAndTransform funktion har två funktioner som parametrar: fn och skick. De skick Funktionen kontrollerar om parametern godkänts, är ett jämnt tal och returnerar sant. Annars returnerar det falskt.

Om skick löser sig till sant (villkoret är uppfyllt), först då är det omvandla funktionen kallas. Denna logik kan vara praktisk om du arbetar med en array och vill transformera vissa element. Om du kör den här koden i webbläsarkonsolen bör du få följande svar:

[ 1, 4, 3, 8, 5 ]

Du kan se att funktionen bara transformerar de element som uppfyller ett visst villkor och lämnar de element som inte uppfyller villkoret som de är.

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

Arraymetoder som map() är funktioner av högre ordning som gör det lättare att manipulera arrayer. Så här fungerar det.

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

När du loggar transformedArray i webbläsarkonsolen bör du få samma resultat som du fick med omvandla funktion som nämnts tidigare:

[ 2, 4, 6, 8, 10 ]

array.map() tar in två parametrar, den första parametern hänvisar till själva elementet, medan den andra parametern hänvisar till elementets index (position i arrayen). Med bara array.map() du kan uppnå samma resultat som filterAndTransform fungera. Så här gör du:

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

I kodblocket ovan returnerar funktionen produkten av det aktuella elementet och 2, om elementet är jämnt. Annars returnerar den elementet orört.

Med den inbyggda Karta funktion har du lyckats eliminera behovet av flera rader kod, vilket resulterat i mycket renare kod och färre chanser för buggar att uppstå.

Array.filter()-funktionen i JavaScript

När du åberopar filtrera metod på en array, se till att returvärdet för funktionen du skickar in i metoden är antingen sant eller falskt. De filtrera metod returnerar en array som innehåller element som uppfyller villkoret. Så här använder du det.

fungeracheckFirstLetter(ord) {
låta vokaler = "aeiou"
om (vokaler.inkluderar(ord[0].toLowerCase())) {
lämna tillbaka ord;
 } annan {
lämna tillbaka;
 }
}
låta ord = [ "Hallå", "från", "de", "barn", "av", "planet", "Jorden" ];
låta resultat = words.filter((x) => checkFirstLetter (x))

Kodblocket ovan korsar ord array och filtrerar alla ord vars första bokstav är en vokal. När du kör koden och loggar resultat variabel, bör du få följande resultat:

[ 'av', 'jord' ];

Array.reduce()-funktionen i JavaScript

De minska() högre ordningens funktion tar in två parametrar. Den första parametern är reduktionsfunktionen. Denna reduktionsfunktion är ansvarig för att kombinera två värden och returnera det värdet. Den andra parametern är valfri.

Den definierar det initiala värdet som ska skickas till funktionen. Om du vill returnera summan av alla element i en array kan du göra följande:

låta a = [ 1, 2, 3, 4, 5];
låta summa = 0;
för (låta jag = 0; i < a.längd; i++) {
 summa = summa + a[i];
}
trösta.log (summa);

Om du kör koden, belopp ska vara 15. Du kan också ta ett annat tillvägagångssätt med minska fungera.

låta a = [ 1, 2, 3, 4, 5 ];
summa = a.reducera((c, n) => c + n);
trösta.log (summa);

Kodblocket ovan är mycket renare i jämförelse med det tidigare exemplet. I det här exemplet tar reduktionsfunktionen in två parametrar: c och n. c hänvisar till det aktuella elementet medan n hänvisar till nästa element i arrayen.

När koden körs går reducerfunktionen genom arrayen och ser till att lägga till det aktuella värdet till resultatet från föregående steg.

Kraften i högre ordningsfunktioner

Funktioner i JavaScript är kraftfulla, men funktioner av högre ordning tar saker till nästa nivå. De används ofta i funktionell programmering, så att du enkelt kan filtrera, reducera och kartlägga arrayer.

Funktioner av högre ordning kan hjälpa dig att skriva mer modulär och återanvändbar kod när du bygger applikationer.