JavaScripti kõrgema järgu funktsioonide mõistmine

JavaScript on võimas keel, mida toetab enamik kaasaegseid brausereid, ja see on suurepärane valik algajatele.

Nagu paljud teised kaasaegsed programmeerimiskeeled, toetab JavaScript funktsioone, mis võimaldavad teil koodiploki eraldada ja seda kusagil mujal uuesti kasutada. Saate kasutada ka muutujatele funktsioonide määramist ja edastada neid parameetritena, nagu ka muid väärtusi.

Mis on kõrgema järgu funktsioonid?

Kõrgemat järku funktsiooni lihtsaim määratlus on funktsioon, mis sooritab toiminguid teiste funktsioonidega, aktsepteerides neid parameetritena või tagastades need. Kõrgema järgu funktsioone kasutatakse laialdaselt funktsionaalse programmeerimise paradigma. Kui te olete alles alustasin JavaScriptiga, võib kõrgema järgu funktsioone olla pisut raske mõista.

Kaaluge järgmist näidet:

funktsiooniteisendada(fn) {
lase resultArray = [];
tagasifunktsiooni (massiivi) 





instagram viewer
{
jaoks (lase i = 0; i < massiiv.pikkus; i++) {
 resultArray.push (fn (massiiv[i]))
 }
tagasi resultArray
 }
}

Ülaltoodud koodiplokis on teisendada funktsioon on kõrgemat järku funktsioon, mis võtab sisse fn funktsiooni parameetrina ja tagastab anonüümse funktsiooni, mis võtab sisse massiivi parameetrina.

Eesmärk teisendada funktsioon on muuta massiivi elemente. Esiteks määratleb kood muutuja resultArray ja seob selle tühja massiiviga.

The teisendada funktsioon tagastab anonüümse funktsiooni, mis liigub läbi iga elemendi massiivi, seejärel edastab elemendi fn arvutamise funktsiooni ja surub tulemuse sisse resultArray. Pärast tsükli lõpetamist tagastab anonüümne funktsioon resultArray.

konst funktsioon1 = teisendus((x) => x * 2)
konsool.log (function1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Ülaltoodud koodiplokk määrab anonüümse funktsiooni, mille tagastab teisendada funktsioon konstantsele muutujale funktsioon 1. fn tagastab toote x mis on asendaja massiiv[i].

Kood edastab parameetrina ka massiivi funktsioon 1 ja seejärel logib tulemuse konsooli. Lühem viis selle kirjutamiseks oleks järgmine:

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

JavaScriptil on sisseehitatud kõrgema järgu funktsioon, mis teeb põhimõtteliselt sama asja, mis teisendada, mida käsitleme hiljem.

Loodetavasti hakkate mõistma, kuidas JavaScripti kõrgema järgu funktsioonid töötavad. Vaadake järgmist funktsiooni ja vaadake, kas saate arvata, mida see teeb.

funktsioonifilterAndTransform(fn, arrayToBeFiltered, tingimus) {
lase filteredArray = [];
jaoks (lase i = 0; i < arrayToBeFiltered.length; i++) {
kui (tingimus (arrayToBeFiltered[i])) {
lase y = teisendus (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } muidu {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
tagasi filtreeritudArray
}

See koodiplokk määratleb funktsiooni, mis teeb seda, mida võiks kahtlustada – see kontrollib massiivi elemente, mis vastavad teatud tingimustele ja teisendab need teisenda() funktsiooni. Selle funktsiooni kasutamiseks tehke midagi sellist:

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

Erinevalt sellest teisendada funktsioon, The filterAndTransform Funktsioon võtab parameetritena kaks funktsiooni: fn ja tingimus. The tingimus funktsioon kontrollib, kas parameeter on läbitud, on paarisarv ja tagastab tõene. Vastasel juhul tagastab see vale.

Kui tingimus lahendab tõeseks (tingimus on täidetud), alles siis on teisendada kutsutud funktsioon. See loogika võib olla kasulik, kui töötate massiiviga ja soovite teatud elemente teisendada. Kui käivitate selle koodi brauseri konsoolis, peaksite saama järgmise vastuse:

[ 1, 4, 3, 8, 5 ]

Näete, et funktsioon muudab ainult need elemendid, mis vastavad teatud tingimusele, jättes tingimusele mittevastavad elemendid selliseks, nagu on.

Array.map() kõrgema järgu funktsioon JavaScriptis

Massiivimeetodid nagu map() on kõrgemat järku funktsioonid, mis muudavad massiividega manipuleerimise lihtsamaks. See toimib järgmiselt.

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

Kui logite teisendatudArray brauseri konsoolis peaksite saama sama tulemuse, mille saite rakendusega teisendada varem mainitud funktsioon:

[ 2, 4, 6, 8, 10 ]

array.map() võtab kaks parameetrit, esimene parameeter viitab elemendile endale, teine ​​parameeter aga elemendi indeksile (positsioonile massiivis). Koos lihtsalt array.map() võite saavutada samu tulemusi kui filterAndTransform funktsiooni. Seda saate teha järgmiselt.

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

Ülaltoodud koodiplokis tagastab funktsioon praeguse elemendi ja 2 korrutise, kui element on paaris. Vastasel juhul tagastab see elemendi puutumata.

Sisseehitatud kaart funktsiooni abil on teil õnnestunud kaotada vajadus mitme koodirea järele, mille tulemuseks on palju puhtam kood ja väiksem võimalus vigade esinemiseks.

Funktsioon Array.filter() JavaScriptis

Kui kutsute esile filter meetodi massiivi puhul, veenduge, et meetodile edastatava funktsiooni tagastusväärtus on kas tõene või väär. The filter meetod tagastab massiivi, mis sisaldab läbitud tingimusele vastavaid elemente. Siin on, kuidas seda kasutada.

funktsioonicheckFirstLetter(sõna) {
lase täishäälikud = "aeiou"
kui (täishäälikud.sisaldab(sõna[0].to LowCase())) {
tagasi sõna;
 } muidu {
tagasi;
 }
}
lase sõnad = [ "Tere", "alates", "te", "lapsed", "of", "planeet", "Maa" ];
lase tulemus = words.filter((x) => checkFirstLetter (x))

Ülaltoodud koodiplokk läbib sõnad massiivi ja filtreerib mis tahes sõna, mille esimene täht on täishäälik. Kui käivitate koodi ja logite sisse tulemus muutuja, peaksite saama järgmised tulemused:

[ 'of', "Maa" ];

Funktsioon Array.reduce() JavaScriptis

The vähenda () kõrgemat järku funktsioon võtab kaks parameetrit. Esimene parameeter on redutseerimisfunktsioon. See vähendamise funktsioon vastutab kahe väärtuse kombineerimise ja selle väärtuse tagastamise eest. Teine parameeter on valikuline.

See määrab funktsioonile edastatava algväärtuse. Kui soovite tagastada massiivi kõigi elementide summa, saate teha järgmist.

lase a = [ 1, 2, 3, 4, 5];
lase summa = 0;
jaoks (lase i = 0; i < a.pikkus; i++) {
 summa = summa + a[i];
}
konsool.log (summa);

Kui käivitate koodi, summa peaks olema 15. Saate kasutada ka teistsugust lähenemist vähendada funktsiooni.

lase a = [ 1, 2, 3, 4, 5 ];
summa = a.reduce((c, n) => c + n);
konsool.log (summa);

Ülaltoodud koodiplokk on varasema näitega võrreldes palju puhtam. Selles näites on redutseerimisfunktsioonil kaks parameetrit: c ja n. c viitab praegusele elemendile while n viitab massiivi järgmisele elemendile.

Kui kood töötab, läbib redutseerimisfunktsioon massiivi, lisades kindlasti eelmise sammu tulemusele praeguse väärtuse.

Kõrgema taseme funktsioonide jõud

JavaScripti funktsioonid on võimsad, kuid kõrgema järgu funktsioonid viivad asjad järgmisele tasemele. Neid kasutatakse laialdaselt funktsionaalses programmeerimises, võimaldades teil massiive hõlpsalt filtreerida, vähendada ja kaardistada.

Kõrgema järjekorra funktsioonid aitavad teil rakenduste loomisel kirjutada modulaarsemat ja korduvkasutatavat koodi.