„JavaScript“ rodyklės funkcijos gali paversti jus geresniu kūrėju

Skelbimas

„JavaScript ES6“ atnešė įdomių pokyčių interneto svetainių kūrimo pasaulyje. Nauji „JavaScript“ kalbos papildymai suteikė naujų galimybių.

Vienas iš populiariausių pakeitimų buvo rodyklių funkcijų įtraukimas į „JavaScript“. Rodyklių funkcijos yra naujas būdas rašyti „JavaScript“ funkcijų išraiškas, suteikiančias du skirtingus būdus, kaip sukurti funkcijas programoje.

Rodyklių funkcijos šiek tiek pakoreguojamos, jei esate tradicinių „JavaScript“ funkcijų ekspertas. Pažvelkime, kas tai yra, kaip jie veikia ir kokia nauda jums.

Kas yra „JavaScript“ rodyklės funkcijos?

Rodyklių funkcijos yra naujas būdas parašyti funkcijų išraiškas, kurios buvo įtrauktas į „JavaScript ES6“ leidimą Kas yra ES6 ir ką turi žinoti „Javascript“ programuotojaiES6 nurodo ECMA scenarijaus („Javascript“) programavimo kalbos 6 versiją. Pažvelkime į keletą esminių pokyčių, kuriuos ES6 sukelia „JavaScript“. Skaityti daugiau . Jie yra panašūs į jūsų naudojamus „JavaScript“ funkcijos išraiškas su keliomis šiek tiek skirtingomis taisyklėmis.

Rodyklių funkcijos visada yra anoniminės funkcijos, joms galioja skirtingos taisyklės taiir turi paprastesnę sintaksę nei tradicinės funkcijos.

Šios funkcijos naudoja naują rodyklės žetoną:

=>

Jei kada nors dirbote Python'e, šios funkcijos yra labai panašios į Python Lambda išraiškos Pradedančiųjų vadovas, kaip suprasti „Python Lambda“ funkcijasLambdai Python'e yra viena iš naudingiausių, svarbiausių ir įdomiausių funkcijų, apie kurias reikia žinoti. Štai kaip juos naudoti ir kodėl jie naudingi. Skaityti daugiau .

Šių funkcijų sintaksė yra šiek tiek švaresnė nei įprastų funkcijų. Reikia atsiminti keletą naujų taisyklių:

• Funkcijos raktinis žodis pašalinamas
• Grąžinimo raktinis žodis yra neprivalomas
• Garbanotos petnešos yra neprivalomos

Reikia padaryti daug mažų pakeitimų, todėl pradėkime nuo pagrindinio funkcijos išraiškų palyginimo.

Kaip naudotis rodyklių funkcijomis

Rodyklių funkcijas lengva naudoti. Rodyklės funkcijas lengviau suprasti palyginus jas su tradicinėmis funkcijų išraiškomis.

Čia yra funkcijos išraiška, pridedanti du skaičius; pirmiausia naudojant tradicinį funkcijos metodą:

 tegul addnum = function (num1, num2) {return num1 + num2; }; papildinys (1,2); >>3

Tai gana paprasta funkcija, kuri atima du argumentus ir grąžina sumą.

Čia išraiška pakeista į rodyklės funkciją:

tegul addnum = (num1, num2) => {grįžti num1 + num2;}; papildinys (1,2); >>3

Funkcijos sintaksė yra gana skirtinga naudojant rodyklės funkciją. Funkcijos raktinis žodis pašalinamas; rodyklės ženklas leidžia „JavaScript“ žinoti, kad rašote funkciją.

Vis dar yra garbanoti petnešos ir grįžtamasis žodis. Tai yra pasirenkama su rodyklių funkcijomis. Štai dar paprastesnis tos pačios funkcijos pavyzdys:

tegul addnum = (num1, num2) => num1 + num2;

Grįžtamojo raktinio žodžio ir garbanotų petnešų nebėra. Liko labai švari vienos eilutės funkcija, kuri yra beveik pusė kodo, kaip pradinė funkcija. Jūs gausite tą patį rezultatą su daug mažiau parašytu kodu.

Rodyklių funkcijų yra daugiau. pasinerkime giliau, kad geriau jaustumėtės, ką jie gali padaryti.

Rodyklės funkcijos ypatybės

Rodyklių funkcijos naudojamos daugybe skirtingų funkcijų ir funkcijų.

Įprastos funkcijos

Rodyklių funkcijos gali naudoti vieną ar kelis argumentus. Jei naudojate du ar daugiau argumentų, turite juos įterpti skliausteliuose. Jei turite tik vieną argumentą, jums nereikia naudoti skliaustų.

tegul kvadratas = x => x * x kvadratas (2); >>4

Rodyklių funkcijas galima naudoti be argumentų. Jei savo funkcijoje nenaudojate jokių argumentų, turite naudoti tuščius skliaustus.

tegul helloFunction = () => Console.log („Sveikas skaitytojas!“); helloFunction (); >> Sveiki, skaitytojau!

Tokios paprastos funkcijos naudoja daug mažiau kodo. Įsivaizduokite, kiek lengviau komplekso projektuokite kaip „JavaScript“ skaidrių demonstraciją Kaip sukurti 3 „Java“ skaidrių demonstracijąŠiandien aš jums parodysiu, kaip sukurti „Javacript“ skaidrių demonstraciją nuo nulio - eikime į dešinę! Skaityti daugiau tampa tada, kai turite paprastesnį funkcijų rašymo būdą.

Naudojant tai

Sąvoka tai paprastai yra sudėtingiausia „JavaScript“ naudojimo dalis. Rodyklės funkcijos daro tai lengviau naudoti.

Kai naudojate rodyklės funkcijas tai bus apibrėžta uždarančia funkcija. Tai gali sukelti problemų, iškylančių kuriant įdėtas funkcijas ir poreikį tai pritaikyti savo pagrindinei funkcijai

Štai populiarus pavyzdys, kuriame parodytas sprendimas, kurį turite naudoti naudodamiesi įprastomis funkcijomis.

funkcija Asmuo () {var that = this; // Jūs turite priskirti 'tai' naujam kintamajam that.age = 0; setInterval (funkcija augtiUp () {that.age ++; }, 1000); }

Priskiriant vertės tai prie kintamojo, jis tampa skaitomas, kai iškviečiate pagrindinės funkcijos viduje esančią funkciją. Tai nepatogu, čia yra geresnis būdas tai padaryti naudojant rodyklių funkcijas.

funkcija Asmuo () {this.age = 0; setInterval (() => {this.age ++; // Dabar galite naudoti 'this' be naujo kintamojo, kuris deklaruojamas}, 1000); }

Nors jie puikiai tinka funkcijoms atlikti, jie neturėtų būti naudojami kuriant metodus objekto viduje. Rodyklių funkcijos nenaudoja tinkamos apimties tai.

Štai paprastas objektas, sukuriantis metodą viduje naudojant rodyklės funkciją. Metodas turėtų sumažinti užpildai kinta vienu, kai pašauktas. Vietoje to visai neveikia.

tegul pica = { papildymai: 5, removeToppings: () => {this.toppings--; } } // Pica objektas su 5 padažais. > pica. >> {papildymai: 5, removeToppings: f} pizza.removeToppings (); // Metodas nieko nepadarys objektui> pica. >> {papildymai: 5, removeToppings: f} // Vis dar yra 5 priedai.

Darbas su masyvais

Naudodami rodyklių funkcijas galite supaprastinti kodą, naudojamą dirbant su masyvo metodais. Masyvai ir masyvo metodai yra labai svarbi „JavaScript“ dalis 5 „JavaScript“ masyvo metodai, kuriuos turėtumėte įsisavinti šiandienNorite suprasti „JavaScript“ masyvus, bet negalite su jais susipažinti? Peržiūrėkite mūsų „JavaScript“ masyvo pavyzdžius. Skaityti daugiau taigi jūs daug jų naudosite.

Yra keletas naudingų metodų, tokių kaip žemėlapis metodas, kuris vykdo funkciją visiems masyvo elementams ir grąžina naują masyvą.

tegul myArray = [1,2,3,4]; „myArray.map“ (funkcija (elementas) { grįžtamasis elementas + 1; }); >> [2,3,4,5]

Tai gana paprasta funkcija, pridedanti vieną prie kiekvienos masyvo vertės. Tą pačią funkciją galite parašyti naudodami mažiau rodyklių naudodami rodyklės funkciją.

tegul myArray = [1,2,3,4]; „myArray.map“ (elementas => { grįžtamasis elementas + 1; }); >> [2,3,4,5]

Dabar daug lengviau skaityti.

Objektų literatūros kūrimas

Rodyklių funkcijos gali būti naudojamos kuriant objekto rašmenis „JavaScript“. Įprastos funkcijos gali jas sukurti, tačiau jos yra šiek tiek ilgesnės.

tegul createObject = funkcija createName (pirmas, paskutinis) {grįžti {pirmas: pirmas, paskutinis: paskutinis}; };

Tą patį objektą galite padaryti naudodami rodyklės funkciją, naudodami mažiau kodo. Naudodami rodyklės žymėjimą, turėsite suklijuoti funkcijos pagrindą. Čia yra patobulinta sintaksė su rodyklių funkcijomis.

tegul createArrowObject = (pirmas, paskutinis) => ({pirmas: pirmas, paskutinis: paskutinis});

„JavaScript“ rodyklės funkcijos ir ne tik

Dabar jūs žinote keletą skirtingų būdų, kaip „JavaScript“ rodyklės funkcijos palengvina jūsų, kaip kūrėjo, gyvenimą. Jie sutrumpina sintaksę, suteikia daugiau valdymo galimybių tai, palengvinkite objektų kūrimą ir suteiksite naują būdą dirbti su masyvo metodais.

Rodyklių funkcijų, kaip ir daugelio kitų funkcijų, įdiegimas „JavaScript ES6“ parodo, kokia svarbi „JavaScript“ tapo kuriant interneto svetaines. Vis dėlto galite padaryti tiek daug daugiau.

Ar norite sužinoti daugiau apie „JavaScript“? Mūsų „JavaScript“ žaidimų lapas Galutinis „JavaScript“ žaidimų kodo lapasGaukite greitą „JavaScript“ elementų atnaujinimą naudodami šį kodų lapą. Skaityti daugiau teikia vertingos informacijos ir daugiau informacijos apie kaip veikia „JavaScript“ Kas yra „JavaScript“ ir kaip jis veikia?Jei mokotės kurti internetą, štai ką reikia žinoti apie „JavaScript“ ir kaip ji veikia su HTML ir CSS. Skaityti daugiau gali padaryti jus geresniu kūrėju.