JavaScript per pastaruosius metus žymiai pasikeitė ir plėtotojams suteikė vis galingesnius įrankius. Vienas iš svarbiausių patobulinimų naujesnėse versijose yra Arrow-funkcijų (=>) pristatymas su ES6. Ši nauja sintaksė ne tik daro funkcijas kompaktiškesnes, bet ir sprendžia problemas, susijusias su this kontekstu. Šiame vadove aš tau parodysiu Arrow-funkcijų pagrindus ir kaip jas efektyviai naudoti tavo kode.
Svarbiausios įžvalgos
- Arrow-funkcijos siūlo trumpesnę sintaksę funkcijų deklaravimui ir intuityviai nustato this kontekstą.
- Jos ypač naudingos funkcijose, kurios tikisi grąžinimo reikšmių kaip išraiškas.
- Arrow-funkcijų naudojimas gali padaryti kodą lengviau skaitomą ir prižiūrimą.
Žingsnis po žingsnio vadovas
Arrow-funkcijos turi savo sintaksę, kuri skiriasi nuo tradicinės funkcijų deklaracijos. Pažvelkime kartu į įvairius šios sintaksės aspektus, kad suprastum, kaip ji veikia ir kur ją gali pritaikyti.
Pirmiausia pažvelkime į tradicines funkcijas JavaScript. Štai pavyzdys, kaip funkciją galima deklaruoti naudojant function raktinį žodį:
Pavyzdžiui, mes perduodame šią funkciją į setTimeout, kad vykdytume anoniminę funkciją po sekundės:
Tai yra standartinis būdas naudoti funkcijas JavaScript. Bet mes galime patobulinti šią sintaksę, pašalindami function raktinį žodį ir vietoj to naudodami Arrow-funkciją. Ji siekia to paties tikslo, tačiau reikalauja mažiau kodų eilučių. Sintaksė atrodo taip:
Paimkime praktinį pavyzdį, kad tai pademonstruotume. Aš deklaruoju masyvą, kuriame yra vertės nuo 1 iki 5:
Dabar galime naudoti findIndex metodą, kad surastume tam tikros vertės (pvz., 3) indeksą masyve. Naudojant tradicines funkcijas, kodas atrodytų taip:
Tai veikia, bet leiskite mums naudoti Arrow-funkciją, kad patobulintume kodą. Mes pašaliname function raktinį žodį ir naudojame Arrow-sintaksę:
Mes netgi galime dar labiau sutrumpinti funkcijos turinį, pašalindami skliaustus ir return raktinį žodį. Tai suteikia dar kompaktiškesnę formą:
Tai veikia puikiai, ir mes gauname norimą indeksą.
Arrow-funkcija yra kompaktiška ir žymiai supaprastina sintaksę. Dar vienas privalumas yra this valdymas. Pažvelkime į objektų pavyzdį. Tu turi objektą, kuris turi metodą, prie kurio galima kreiptis į savybę objekte:
Jei tu kviečią šį metodą su setTimeout ir rašai jį kaip tradicinę funkciją, tai sukelia problemą. this išvestis nebe bus lūkestis objektas:
this bus nenurodytas. Tačiau, jei pakeisi function raktinį žodį į Arrow-funkciją, this liks aplinkiniame kontekste:
Čia išvestis turėtų būti teisinga ir parodyti tekstą konsolėje. Arrow-funkcija šiuo pavyzdžiu neleido prarasti this konteksto.
Kur dar galime naudoti Arrow-funkcijas? Jos ypač naudingos, kai reikia perduoti funkcijas tokiems metodams kaip map, filter ar reduce. Šie metodai tikisi funkcijos kaip argumento ir naudosis trumpesne sintakse. Štai paprastas pavyzdys su map, kuris kvadratuoja masyvo elementus:
Dar vienas naudingas Arrow-funkcijų bruožas yra tas, kad nereikia skliaustų, kai tavo funkcija grąžina tik išraišką. Tai daro kodą dar paprastesnį ir aiškesnį:
Tačiau atkreipkite dėmesį, kad tam tikrose situacijose, pvz., su daugiakrypčių funkcijų kūnais, function raktinio žodžio naudojimas vis tiek lieka privalomas. Taigi, tai tavo sprendimas pasirinkti tinkamą metodą pagal kontekstą.
Santrauka - Arrow-funkcijos JavaScript aiškiai paaiškintos
Arrow-funkcijos yra vertinga plėtra JavaScript, kuri ne tik sumažina rašymo pastangas, bet ir pagerina kodo skaitomumą. Dėl savo intuityvaus this valdymo jos ypač naudingos šiuolaikinėse interneto programose. Jei tu tinkamai naudoji Arrow-funkcijas savo kode, gali pasinaudoti žymiu priežiūros pagerinimu.
Dažnai užduodami klausimai
Kas yra Arrow-funkcijos JavaScript?Arrow-funkcijos yra kompaktiška sintaksė funkcijų deklaravimui, kurios buvo pristatytos ES6.
Kaip Arrow-funkcijos skiriasi nuo tradicinių funkcijų?Arrow-funkcijos naudoja kitokią sintaksę ir išlaiko this kontekstą, o tradicinės funkcijos to nedaro.
Kada turėčiau naudoti Arrow-funkcijas?Naudok Arrow-funkcijas, kai rašai trumpas funkcijas arba perduodi funkcijas kaip argumentus kitoms funkcijoms.
Ar Arrow-funkcijos yra visiška alternatyva tradicinėms funkcijoms?Ne visada. Tam tikrais atvejais, pvz., su metodais, kurie priklauso nuo this konteksto, turi naudoti tradicines funkcijas, kad pasiektum norimus funkcionalumus.
Ar yra Arrow-funkcijų trūkumų?Taip, Arrow-funkcijos negali būti naudojamos kaip konstruktorinės funkcijos, ir jos negali būti naudojamos objektuose ar klasėse, kur this turi specifinę reikšmę.
