Uzziniet, cik elastīgas var būt JavaScript funkcijas un kā tās izmantot, lai izveidotu elastīgu, atkārtoti lietojamu kodu.

JavaScript ir spēcīga valoda, ko atbalsta lielākā daļa mūsdienu pārlūkprogrammu, un tā ir lieliska izvēle iesācējiem.

Tāpat kā daudzas citas modernas programmēšanas valodas, JavaScript atbalsta funkcijas, kas ļauj izolēt koda bloku un atkārtoti izmantot to kaut kur citur. Varat arī izmantot piešķiršanas funkcijas mainīgajiem un nodot tos kā parametrus, tāpat kā citas vērtības.

Kas ir augstākās kārtas funkcijas?

Vienkāršākā augstākas kārtas funkcijas definīcija ir funkcija, kas veic darbības ar citām funkcijām, pieņemot tās kā parametrus vai atgriežot tās. Augstākas kārtas funkcijas tiek plaši izmantotas funkcionālās programmēšanas paradigma. Ja Jums ir tikko sāku darbu ar JavaScript, augstākas pakāpes funkcijas varētu būt nedaudz grūti uztveramas.

Apsveriet šādu piemēru:

funkcijupārveidot(fn) {
ļaut resultArray = [];

atgrieztiesfunkciju (masīvs) {
priekš (ļaut i = 0; i < masīvs.garums; i++) {
resultArray.push (fn (masīvs[i]))
}

atgriezties resultArray
}
}

instagram viewer

Iepriekš esošajā koda blokā pārveidot funkcija ir augstākas kārtas funkcija, kas uzņem fn funkciju kā parametru un atgriež anonīmu funkciju, kas tiek uzņemta masīvs kā parametrs.

Mērķis pārveidot funkcija ir modificēt masīva elementus. Pirmkārt, kods definē mainīgo resultArray un saista to ar tukšu masīvu.

The pārveidot funkcija atgriež anonīmu funkciju, kas iet cauri katram elementam masīvs, pēc tam nodod elementu uz fn funkcija aprēķinam un iespiež rezultātu resultArray. Pēc cilpas pabeigšanas anonīmā funkcija atgriež resultArray.

konst funkcija1 = pārveidot((x) => x * 2)
konsole.log (function1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Iepriekš minētais koda bloks piešķir anonīmo funkciju, ko atgriež pārveidot funkciju uz konstantu mainīgo funkcija1. fn atgriež preci x kas ir aizstājējs masīvs[i].

Kods arī nodod masīvu kā parametru funkcija1 un pēc tam reģistrē rezultātu konsolē. Īsāks veids, kā to rakstīt, būtu:

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

JavaScript ir iebūvēta augstākas pakāpes funkcija, kas būtībā dara to pašu pārveidot, ko aplūkosim vēlāk.

Cerams, ka jūs sākat saprast, kā JavaScript darbojas augstākas kārtas funkcijas. Apskatiet šo funkciju un pārbaudiet, vai varat uzminēt, ko tā dara.

funkcijufiltrsAndTransform(fn, arrayToBeFiltered, nosacījums) {
ļaut filteredArray = [];

priekš (ļaut i = 0; i < arrayToBeFiltered.length; i++) {
ja (nosacījums (arrayToBeFiltered[i])) {
ļaut y = transformācija (fn)([ masīvsToBeFiltered[i] ])[0]
filteredArray.push (y)
} cits {
filteredArray.push (arrayToBeFiltered[i])
}
}

atgriezties filtrētsArray
}

Šis koda bloks definē funkciju, kas dara to, par ko varētu būt aizdomas — tā pārbauda masīvā esošos elementus, kas atbilst noteiktam nosacījumam, un pārveido tos ar pārveidot () funkciju. Lai izmantotu šo funkciju, rīkojieties šādi:

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

Atšķirībā no pārveidot funkcija, The filtrsAndTransform funkcijai kā parametri ir divas funkcijas: fn un stāvokli. The stāvokli funkcija pārbauda, ​​vai parametrs ir nodots, ir pāra skaitlis, un atgriež patiesu. Pretējā gadījumā tas atgriež nepatiesu.

Ja stāvokli atrisina uz patiesu (nosacījums ir izpildīts), tikai tad ir pārveidot izsaukta funkcija. Šī loģika varētu noderēt, ja strādājat ar masīvu un vēlaties pārveidot noteiktus elementus. Ja palaižat šo kodu pārlūkprogrammas konsolē, jums vajadzētu saņemt šādu atbildi:

[ 1, 4, 3, 8, 5 ]

Var redzēt, ka funkcija pārveido tikai tos elementus, kas atbilst noteiktam nosacījumam, atstājot tos elementus, kas neatbilst nosacījumiem.

Array.map() augstākās kārtas funkcija JavaScript

Masīva metodes, piemēram, map() ir augstākas kārtas funkcijas, kas atvieglo manipulācijas ar masīviem. Lūk, kā tas darbojas.

ļaut masīvs = [ 1, 2, 3, 4, 5 ];
ļaut transformedArray = array.map((x) => x * 2);

Kad piesakāties pārveidotsArray pārlūkprogrammas konsolē jums vajadzētu iegūt tādu pašu rezultātu, ko saņēmāt ar pārveidot iepriekš minētā funkcija:

[ 2, 4, 6, 8, 10 ]

array.map() ņem divus parametrus, pirmais parametrs attiecas uz pašu elementu, bet otrais parametrs attiecas uz elementa indeksu (pozīcija masīvā). Ar tikai array.map() jūs varat sasniegt tādus pašus rezultātus kā filtrsAndTransform funkciju. Lūk, kā to izdarīt:

ļaut masīvs = [ 1, 2, 3, 4, 5 ];
ļaut transformedArray = array.map((x) => x % 20? x * 2: x);

Iepriekš minētajā koda blokā funkcija atgriež pašreizējā elementa reizinājumu ar 2, ja elements ir pāra. Pretējā gadījumā tas atgriež elementu neskartu.

Ar iebūvēto karte funkciju, jums ir izdevies novērst vajadzību pēc vairākām koda rindiņām, tādējādi radot daudz tīrāku kodu un mazāku kļūdu rašanās iespēju.

Funkcija Array.filter() JavaScript

Kad jūs izsaucat filtru metodi masīvā, pārliecinieties, vai metodei nodotās funkcijas atgriešanas vērtība ir patiesa vai nepatiesa. The filtru metode atgriež masīvu, kurā ir elementi, kas atbilst izpildītajam nosacījumam. Lūk, kā jūs to izmantojat.

funkcijupārbaudietFirstLetter(vārdu) {
ļaut patskaņi = "patskaņi"

ja (patskaņi.ietilpst(vārdu[0].to LowCase())) {
atgriezties vārds;
} cits {
atgriezties;
}
}

ļaut vārdi = [ "Sveiki", "no", "the", "bērni", "no", "planēta", "Zeme" ];
ļaut rezultāts = vārdi.filtrs((x) => checkFirstLetter (x))

Iepriekš minētais koda bloks šķērso vārdus masīvs un filtrē jebkuru vārdu, kura pirmais burts ir patskanis. Kad palaižat kodu un reģistrējat rezultāts mainīgais, jums vajadzētu iegūt šādus rezultātus:

[ 'no', "Zeme" ];

Array.reduce() funkcija JavaScript

The samazināt () augstākas kārtas funkcijai ir divi parametri. Pirmais parametrs ir samazināšanas funkcija. Šī samazināšanas funkcija ir atbildīga par divu vērtību apvienošanu un šīs vērtības atgriešanu. Otrais parametrs nav obligāts.

Tas nosaka sākotnējo vērtību, kas jānodod funkcijai. Ja vēlaties atgriezt visu masīva elementu summu, varat rīkoties šādi:

ļaut a = [ 1, 2, 3, 4, 5];
ļaut summa = 0;

priekš (ļaut i = 0; i < a.garums; i++) {
summa = summa + a[i];
}

konsole.log (summa);

Ja palaižat kodu, summa jābūt 15. Varat arī izmantot citu pieeju, izmantojot samazināt funkciju.

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

Iepriekš minētais koda bloks ir daudz tīrāks, salīdzinot ar iepriekšējo piemēru. Šajā piemērā samazināšanas funkcijai ir divi parametri: c un n. c attiecas uz pašreizējo elementu while n attiecas uz nākamo masīva elementu.

Kad kods darbojas, reduktora funkcija iet cauri masīvam, pārliecinoties, ka iepriekšējās darbības rezultātam ir pievienota pašreizējā vērtība.

Augstākas kārtas funkciju spēks

Funkcijas JavaScript ir jaudīgas, taču augstākas pakāpes funkcijas paceļ lietas uz nākamo līmeni. Tos plaši izmanto funkcionālajā programmēšanā, ļaujot viegli filtrēt, samazināt un kartēt masīvus.

Augstākas kārtas funkcijas var palīdzēt rakstīt modulārāku un atkārtoti lietojamu kodu, veidojot lietojumprogrammas.