Strēlītes funkcijas JavaScript - efektīva lietošana

JavaScript pamatā ir funkcijas. Agrāk tās bija saistītas ar atslēgas vārda function lietošanu, taču ES6 piedāvā jaunu un elegantāku rakstīšanas veidu, izmantojot tā sauktās bultfunkcijas. Šī jaunā sintakse ne tikai saīsina kodu, bet arī atrisina dažas ar šo kontekstu saistītas problēmas. Šajā rokasgrāmatā uzzināsiet visu, kas jums jāzina par bultiņu funkcijām.

Galvenās atziņas

• Arrow funkcijas piedāvā īsāku sintaksi salīdzinājumā ar parastajām funkcijām.
• Tām nav sava šī konteksta, kas padara tās īpaši praktiskas izmantošanai atpakaļsaukuma funkcijās.
• Ja funkcija atgriež tikai izteiksmi, ir iespējams noņemt loka iekavas un atgriešanas paziņojumu.

Ievads par bultu funkcijām

Bultu funkcijas parasti izmanto, lai padarītu kodu lasāmāku un kompaktāku. Tā vietā, lai rakstītu funkciju, varat izmantot jauno sintaksi, lai deklarētu funkciju īsāk.

Lai saprastu, kas ir Arrow funkcijas, kā labu sākumpunktu var izmantot tradicionālās funkcijas. Ja funkciju deklarējat ar atslēgas vārdu function, tā parasti ir nedaudz garāka un mazāk eleganta. Šeit ir standarta funkcijas piemērs JavaScript:

Funkcija doIt() { console.log("Doing it"); }

Šis ir sākumpunkts, no kura mēs pāriesim pie Arrow funkcijām.

Solis Nr. 1: Arrow funkcijas deklarēšana

Funkcijas atslēgvārda vietā parametrus var vienkārši ielikt iekavās un pēc tam izmantot bultiņu, kurai seko funkcijas ķermenis. Lūk, kā iepriekšējā funkcija izskatās kā Arrow funkcija:

Tas, ko mēs darām, ir šāds: const doIt = () => { console.log("Doing it"); };

Kā redzat, sintakse ir daudz kompaktāka. Pēc pirmā mēģinājuma varat pārbaudīt, vai funkcija darbojas pareizi.

2. solis: Arrow funkciju lietošana ar masīviem

Vēl vienu lielu Arrow funkciju priekšrocību var redzēt, izmantojot tās ar masīviem. Ņemsim piemēru. Pieņemsim, ka jums ir skaitļu masīvs, un jūs vēlaties atrast konkrēta skaitļa pozīciju. Šeit mēs izmantojam metodi findIndex, lai atrastu indeksu:

const numbers = [2, 3, 4, 5]; const index = numbers.findIndex((element) => element === 3); console.log(index);

Arrow funkcija ievērojami vienkāršo koda lasāmību un samazina vajadzību pēc papildu funkcijas atslēgvārda.

Solis Nr. 3: Arrow funkciju saīsināšana

Ja Arrow funkcijai ir tikai viena izteiksme, varat izlaist loka iekavas un atslēgas vārdu return. Lūk, kā tas izskatās, ja mēs saīsinām funkciju findIndex vēl vairāk:

const index = numbers.findIndex(element => element === 3);

Tas ir ne tikai īsāks, bet arī elegantāks. Jūs varat pārbaudīt funkciju un pārliecināties, ka tā joprojām darbojas pareizi.

Solis Nr. 4: Darbs ar atslēgas vārdu this

Izšķiroša Arrow funkciju priekšrocība ir darbs ar kontekstu this. Klasiskajās funkcijās tas bieži kļūst neprognozējams, īpaši tad, ja funkcija tiek izmantota kā atpakaļsaukums. Savukārt bulttaustes funkcijas sasaista this ar kontekstu, kurā tas tika definēts.

Aplūkojiet šādu piemēru:

const obj = { text: "Text", print: function() { console.log(this.text); } };

obj.print(); // Izvadīts "Teksts".

Tomēr, ja lietojat setTimeout ar parasto funkciju, konteksts mainās:

setTimeout(function() { console.log(this.text); }, 1000); // Izejas nenoteiktas.

Izmantojot bultfunkciju setTimeout ietvaros, jūs iegūstat tādu pašu rezultātu kā ar klasisko funkciju, nezaudējot kontekstu:

setTimeout((() => { console.log(this.text); }, 1000); // Izejas "text".

Solis 5: saglabājiet piešķiršanu this

Jūs varat arī piesaistīt this mainīgajam, lai nodrošinātu piekļuvi tam. Tomēr šis modelis bieži vien ir mazāk elegants nekā Arrow funkciju izmantošana.

const self = this; setTimeout(function() { console.log(self.text); }, 1000);

Bultu funkciju priekšrocības

• Tās ir īsākas un elegantākas salīdzinājumā ar parasto funkciju deklarācijām.
• Tām nav sava this konteksta, kas atvieglo to izmantošanu atpakaļsaukuma funkcijās.
• Sintakse ļauj padarīt kodu daudz lasāmāku.

Kopsavilkums

Arrow funkcijas piedāvā praktisku veidu, kā efektīvi deklarēt JavaScript funkcijas. Jaunā sintakse ne tikai uzlabo lasāmību, bet arī ievērojami vienkāršo this konteksta apstrādi. Bultiņu funkcijas vajadzētu izmantot galvenokārt tad, ja nepieciešamas atpakaļsaukuma funkcijas vai īsākas funkciju izteiksmes.