Rodyklės funkcijos "JavaScript" - efektyvus naudojimas

Funkcijos yra "JavaScript" pagrindas. Anksčiau jos buvo siejamos su raktiniu žodžiu function, tačiau ES6 siūlo naują ir elegantiškesnį rašymo būdą - vadinamąsias rodyklines funkcijas. Ši naujoji sintaksė ne tik sutrumpina kodą, bet ir išsprendžia kai kurias su šiuo kontekstu susijusias problemas. Šiame vadove sužinosite viską, ką reikia žinoti apie rodyklines funkcijas.

Pagrindinės žinios

• Funkcijos rodyklės siūlo trumpesnę sintaksę, palyginti su įprastinėmis funkcijomis.
• Jos neturi savo šio konteksto, todėl jas ypač praktiška naudoti grįžtamojo ryšio funkcijose.
• Pašalinti lenktinius skliaustelius ir grąžinimo sakinį galima, jei funkcija grąžina tik išraišką.

Įvadas į rodyklių funkcijas

Šaulių funkcijos paprastai naudojamos siekiant padaryti kodą skaitomesnį ir kompaktiškesnį. Užuot rašę funkciją, galite naudoti naują sintaksę, kad deklaruotumėte trumpesnę funkciją.

Norint suprasti, kas yra Arrow funkcijos, kaip gerą atspirties tašką galima naudoti tradicines funkcijas. Jei funkciją deklaruojate naudodami raktinį žodį function, ji paprastai būna šiek tiek ilgesnė ir ne tokia elegantiška. Štai standartinės "JavaScript" funkcijos pavyzdys:

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

Tai pradinis taškas, nuo kurio pereisime prie strėlių funkcijų.

1 žingsnis: funkcijos "Arrow" deklaravimas

Vietoj raktinio žodžio function parametrus galite tiesiog įrašyti į skliaustelius ir tada naudoti rodyklę, po kurios rašomas funkcijos kūnas. Štai kaip atrodo ankstesnė funkcija kaip funkcija su rodykle:

Tai rodo, kaip atrodys tokia rodyklė: const doIt = () => { console.log("Doing it"); };

Kaip matote, sintaksė daug kompaktiškesnė. Po pirmojo bandymo galite patikrinti, ar funkcija veikia teisingai.

2 žingsnis: rodyklės funkcijų naudojimas su masyvais

Dar vieną didelį rodyklės funkcijų privalumą galima pastebėti naudojant jas su masyvais. Paimkime pavyzdį. Tarkime, kad turite skaičių masyvą ir norite rasti tam tikro skaičiaus poziciją. Šiuo atveju indeksui rasti naudojame metodą findIndex:

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

Funkcija Arrow labai supaprastina kodo skaitomumą ir sumažina papildomo funkcijos raktažodžio poreikį.

3 veiksmas: "Arrow" funkcijų sutrumpinimas

Jei Arrow funkcija turi tik vieną išraišką, galite praleisti laužtinius skliaustus ir raktinį žodį return. Štai kaip tai atrodo, kai dar labiau sutrumpiname funkciją findIndex:

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

Tai ne tik trumpiau, bet ir elegantiškiau. Galite išbandyti funkciją ir įsitikinti, kad ji vis dar veikia teisingai.

4 žingsnis: darbas su raktiniu žodžiu this

Lemiamas "Arrow" funkcijų privalumas yra darbas su kontekstu this. Klasikinėse funkcijose tai dažnai tampa nenuspėjama, ypač kai funkcija naudojama kaip grįžtamasis skambutis. Kita vertus, strėlių funkcijos susieja this su kontekstu, kuriame jis buvo apibrėžtas.

Pažvelkite į toliau pateiktą pavyzdį:

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

obj.print(); // Išvedamas "Tekstas"

Tačiau jei setTimeout naudojate su įprastine funkcija, kontekstas pasikeičia:

SetTimeout(function() { console.log(this.text); }, 1000); // Išeina neapibrėžtas

Naudodami rodyklės funkciją per setTimeout, gausite tokį patį rezultatą kaip ir su klasikine funkcija, neprarasdami konteksto:

SetTimeout((() => { console.log(this.text); }, 1000); // Išeina "tekstas"

5 veiksmas: išsaugokite priskyrimą this

Taip pat galite susieti this su kintamuoju, kad užtikrintumėte prieigą prie jo. Tačiau šis modelis dažnai būna ne toks elegantiškas, kaip naudojant rodyklės funkcijas.

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

Šaulių funkcijų privalumai

• Jos yra trumpesnės ir elegantiškesnės, palyginti su įprastinėmis funkcijų deklaracijomis.
• Jos neturi savo this konteksto, todėl jas paprasčiau naudoti atgalinio iškvietimo funkcijose.
• Sintaksė leidžia padaryti kodą daug skaitomesnį.

Apibendrinimas

Funkcijos rodyklės yra praktiškas būdas efektyviai deklaruoti "JavaScript" funkcijas. Naujoji sintaksė ne tik pagerina skaitomumą, bet ir gerokai supaprastina this konteksto tvarkymą. Funkcijas rodykles visų pirma turėtumėte naudoti tada, kai reikia atgalinio iškvietimo funkcijų arba trumpesnių funkcijų išraiškų.