JavaScriptin korkeamman asteen funktioiden ymmärtäminen

JavaScript on tehokas kieli, jota useimmat nykyaikaiset selaimet tukevat, ja se on loistava valinta aloittelijoille.

Kuten monet muutkin nykyaikaiset ohjelmointikielet, JavaScript tukee toimintoja, joiden avulla voit eristää koodilohkon ja käyttää sitä uudelleen jossain muualla. Voit myös määrittää muuttujille funktioita ja välittää ne parametreina, kuten muutkin arvot.

Mitä ovat korkeamman asteen toiminnot?

Yksinkertaisin määritelmä korkeamman asteen funktiolle on funktio, joka suorittaa toimintoja muille funktioille hyväksymällä ne parametreiksi tai palauttamalla ne. Korkeamman asteen toimintoja käytetään voimakkaasti toiminnallinen ohjelmointiparadigma. Jos olet juuri aloittamassa JavaScriptin käyttöä, korkeamman asteen funktioita saattaa olla hieman vaikea ymmärtää.

Harkitse seuraavaa esimerkkiä:

toimintomuuttaa(fn) {
antaa resultArray = [];
palatatoiminto (joukko) {
varten (antaa minä = 0; i < array.length; i++) {
 resultArray.push (fn (taulukko[i]))
 }





instagram viewer
palata tulosArray
 }
}

Yllä olevassa koodilohkossa muuttaa -funktio on korkeamman asteen funktio, joka ottaa vastaan fn funktio parametrina ja palauttaa anonyymin funktion, joka ottaa vastaan joukko parametrina.

Tarkoitus muuttaa tehtävänä on muokata taulukon elementtejä. Ensinnäkin koodi määrittelee muuttujan tulosArray ja sitoo sen tyhjään taulukkoon.

The muuttaa Funktio palauttaa anonyymin funktion, joka kiertää jokaisen elementin läpi joukko, siirtää sitten elementin kohteeseen fn funktio laskentaan ja työntää tuloksen tulosArray. Silmukan päätyttyä anonyymi funktio palauttaa arvon tulosArray.

konst funktio1 = muunnos((x) => x * 2)
konsoli.log (function1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Yllä oleva koodilohko määrittää anonyymin funktion, jonka palauttaa muuttaa funktio vakiomuuttujaan toiminto1. fn palauttaa tuotteen x joka on korvike array[i].

Koodi välittää myös taulukon parametrina toiminto1 ja kirjaa sitten tuloksen konsoliin. Lyhyempi tapa kirjoittaa tämä olisi:

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

JavaScriptissä on sisäänrakennettu korkeamman asteen toiminto, joka tekee periaatteessa saman asian kuin muuttaa, joita käsittelemme myöhemmin.

Toivottavasti alat ymmärtää, kuinka korkeamman asteen toiminnot JavaScriptissä toimivat. Katso seuraavaa toimintoa ja katso, voitko arvata, mitä se tekee.

toimintofilterAnd Transform(fn, arrayToBeFiltered, ehto) {
antaa filteredArray = [];
varten (antaa minä = 0; i < arrayToBeFiltered.length; i++) {
jos (ehto (arrayToBeFiltered[i])) {
antaa y = muunnos (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } muu {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
palata filteredArray
}

Tämä koodilohko määrittää funktion, joka tekee sen, mitä saatat epäillä – se tarkistaa taulukon elementit, jotka täyttävät tietyn ehdon ja muuntaa ne muuttaa() toiminto. Voit käyttää tätä toimintoa seuraavasti:

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

toisin kuin muuttaa toiminto, The filterAnd Transform funktio ottaa kaksi funktiota parametreina: fn ja kunto. The kunto funktio tarkistaa, onko parametri välitetty, onko se parillinen luku, ja palauttaa tosi. Muussa tapauksessa se palauttaa epätosi.

Jos kunto ratkaisee todeksi (ehto täyttyy), vasta sitten on muuttaa kutsuttu toiminto. Tämä logiikka voi olla hyödyllinen, jos työskentelet taulukon kanssa ja haluat muuttaa tiettyjä elementtejä. Jos suoritat tämän koodin selainkonsolissa, sinun pitäisi saada seuraava vastaus:

[ 1, 4, 3, 8, 5 ]

Voit nähdä, että funktio muuntaa vain tietyn ehdon täyttävät elementit jättäen elementit, jotka eivät täytä ehtoa, ennalleen.

Array.map() korkeamman asteen funktio JavaScriptissä

Taulukkomenetelmät, kuten map() ovat korkeamman asteen toimintoja, jotka helpottavat taulukoiden käsittelyä. Näin se toimii.

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

Kun kirjaudut muunnettuArray selainkonsolissa sinun pitäisi saada sama tulos, jonka sait kanssa muuttaa aiemmin mainittu toiminto:

[ 2, 4, 6, 8, 10 ]

array.map() ottaa kaksi parametria, ensimmäinen parametri viittaa itse elementtiin, kun taas toinen parametri viittaa elementin indeksiin (sijaintiin taulukossa). Vain kanssa array.map() voit saavuttaa samat tulokset kuin filterAnd Transform toiminto. Näin teet sen:

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

Yllä olevassa koodilohkossa funktio palauttaa nykyisen elementin ja 2:n tulon, jos elementti on parillinen. Muussa tapauksessa se palauttaa elementin koskemattomana.

Sisäänrakennetun kanssa kartta -toimintoa, olet onnistunut poistamaan useiden koodirivien tarpeen, mikä on johtanut paljon puhtaampaan koodiin ja vähemmän virheiden esiintymiseen.

Array.filter() -funktio JavaScriptissä

Kun kutsut suodattaa -menetelmä taulukossa, varmista, että menetelmään siirtämäsi funktion palautusarvo on joko tosi tai epätosi. The suodattaa menetelmä palauttaa taulukon, joka sisältää elementtejä, jotka täyttävät läpäisyn ehdon. Näin käytät sitä.

toimintocheckFirstLetter(sana) {
antaa vokaalit = "aeiou"
jos (vokaalit.sisältää(sana[0].toLowerCase())) {
palata sana;
 } muu {
palata;
 }
}
antaa sanat = [ "Hei", "alkaen", "the", "lapset", "of", "planeetta", "Maa" ];
antaa tulos = words.filter((x) => checkFirstLetter (x))

Yllä oleva koodilohko kulkee sanat taulukko ja suodattaa minkä tahansa sanan, jonka ensimmäinen kirjain on vokaali. Kun suoritat koodin ja kirjaat tulos muuttuja, sinun pitäisi saada seuraavat tulokset:

[ 'of', "Maa" ];

Array.reduce()-funktio JavaScriptissä

The vähentää() korkeamman asteen funktio ottaa kaksi parametria. Ensimmäinen parametri on vähennystoiminto. Tämä vähennysfunktio on vastuussa kahden arvon yhdistämisestä ja arvon palauttamisesta. Toinen parametri on valinnainen.

Se määrittää funktiolle välitettävän alkuarvon. Jos haluat palauttaa taulukon kaikkien elementtien summan, voit tehdä seuraavan:

antaa a = [ 1, 2, 3, 4, 5];
antaa summa = 0;
varten (antaa minä = 0; i < a.pituus; i++) {
 summa = summa + a[i];
}
konsoli.log (summa);

Jos suoritat koodin, summa pitäisi olla 15. Voit myös omaksua toisenlaisen lähestymistavan vähentää toiminto.

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

Yllä oleva koodilohko on paljon puhtaampi kuin aikaisempi esimerkki. Tässä esimerkissä vähennysfunktio ottaa kaksi parametria: c ja n. c viittaa nykyiseen elementtiin while n viittaa taulukon seuraavaan elementtiin.

Kun koodi suoritetaan, vähennystoiminto käy taulukon läpi ja varmista, että lisäät nykyisen arvon edellisen vaiheen tulokseen.

Korkeamman asteen funktioiden voima

JavaScriptin toiminnot ovat tehokkaita, mutta korkeamman asteen funktiot vievät asiat uudelle tasolle. Niitä käytetään laajasti toiminnallisessa ohjelmoinnissa, joten voit suodattaa, pienentää ja kartoittaa matriiseja helposti.

Korkeamman asteen toiminnot voivat auttaa sinua kirjoittamaan modulaarisempaa ja uudelleen käytettävää koodia sovelluksia rakennettaessa.