Efektīvi izmantot bultiņu funkcijas JavaScript

JavaScript ir ievērojami attīstījies gadu gaitā un izstrādātājiem nodrošinājis arvien jaudīgākus rīkus. Viens no nozīmīgākajiem uzlabojumiem jaunākajās versijās ir Arrow-funkciju (=>) ieviešana ar ES6. Šī jaunā sintakse ne tikai padara funkcijas kompaktākas, bet arī atrisina problēmas, kas saistītas ar this kontekstu. Šajā rokasgrāmatā es tev sniegšu pamatprasmes par Arrow-funkcijām un parādīšu, kā tās jēgpilni izmantot savā kodā.

Galvenās atziņas

• Arrow-funkcijas piedāvā īsāku sintaksi funkciju deklarēšanai un intuitīvi uztver this kontekstu.
• Tās ir īpaši noderīgas funkcijās, kas sagaida atgrieztos vērtības izteiksmes veidā.
• Arrow-funkciju izmantošana var padarīt kodu vieglāk lasāmu un uzturamu.

Solim pa solim instrukcija

Arrow-funkcijām ir sava sintakse, kas atšķiras no tradicionālās funkciju deklarācijas. Apskatīsim kopā dažādus šīs sintakses aspektus, lai tu saprastu, kā tā darbojas un kur vari to izmantot.

Vispirms tradicionālās funkcijas JavaScript. Šeit ir piemērs, kā funkciju deklarēt, izmantojot function atslēgvārdu:

Mēs nododam šo funkciju, piemēram, setTimeout, lai izpildītu anonīmu funkciju pēc sekundes:

Tā ir standarta metode, kā izmantot funkcijas JavaScript. Bet mēs varam uzlabot šo sintaksi, izslēdzot function atslēgvārdu un vietā izmantojot Arrow-funkciju. Tā sasniedz to pašu mērķi, bet prasa mazāk koda rindu. Sintakse izskatās šādi:

Ja mēs ņemam praktisku piemēru, lai to ilustrētu. Es deklarēju masīvu, kas satur vērtības no 1 līdz 5:

Tagad mēs varam izmantot metodi findIndex, lai atrastu konkrētas vērtības (piemēram, 3) indeksu masīvā. Izmantojot tradicionālās funkcijas, kods izskatās šādi:

Tas darbojas, bet ļaujiet mums izmantot Arrow-funkciju, lai uzlabotu kodu. Mēs izslēdzam function atslēgvārdu un izmantojam Arrow sintaksi:

Mēs varam pat saīsināt funkcijas ķermeni, izslēdzot izliektās iekavas un return atslēgvārdu. Tā rezultātā rodas vēl kompaktāka forma:

Tas darbojas perfekti, un mēs iegūstam vēlamo indeksu.

Arrow-funkcija ir kompakta un ievērojami atvieglo sintaksi. Vēl viena priekšrocība ir this apstrāde. Apskatīsim objektu piemēru. Tev ir objekts, kuram ir metode, kas piekļūst īpašībai objektā:

Ja tu šo metodi izsauc ar setTimeout un to raksti kā tradicionālu funkciju, tas radīs problēmu. this iznākums vairs nebūs gaidītais objekts:

Šis this būs nenoteikts. Tomēr, ja tu nomaini function atslēgvārdu ar Arrow-funkciju, this paliek piestiprināts apkārtējā kontekstā:

Šeit iznākumam vajadzētu būt pareizam un attēlot tekstu konsolē. Arrow-funkcija šajā piemērā ir novērst this konteksta zudumu.

Kur vēl mēs varam izmantot Arrow-funkcijas? Tās ir īpaši praktiskas, ja vēlies nodot funkcijas tādām metodēm kā map, filter vai reduce. Šīs metodes gaida funkciju kā argumentu un gūst labumu no īsākas sintakses. Šeit ir vienkāršs piemērs ar map, kas kvadrē masīva elementus:

Vēl viena noderīga Arrow-funkciju iezīme ir tā, ka tev nav nepieciešamas izliektās iekavas, ja tava funkcija atgriež tikai izteiksmi. Tas padara kodu vēl vienkāršāku un saprotamāku:

Tomēr ņem vērā, ka noteiktās situācijās, piemēram, ar vairākas rindas funkciju ķermeņiem, function atslēgvārda izmantošana ir obligāta. Tā ir tava atbildība izvēlēties piemērotāko metodi atkarībā no konteksta.

Kopsavilkums - Arrow-funkcijas JavaScript skaidri izskaidrotas

Arrow-funkcijas ir vērtīga paplašināšana JavaScript, kas ne tikai samazina rakstīšanas piepūli, bet arī uzlabo koda lasāmību. Pateicoties viņu intuitīvajai this apstrādei, tās ir īpaši noderīgas mūsdienu tīmekļa lietojumprogrammās. Ja tu izmanto Arrow-funkcijas piemērotās vietās savā kodā, tu vari gūt nozīmīgas priekšrocības uzturējamībā.