JavaScript bultiņu funkcijas var padarīt jūs labāku izstrādātāju

Reklāma

JavaScript ES6 ienesa aizraujošas pārmaiņas tīmekļa attīstības pasaulē. Jauni JavaScript valodas papildinājumi radīja jaunas iespējas.

Viena no populārākajām izmaiņām bija bultiņu funkciju pievienošana JavaScript. Bultu funkcijas ir jauns veids, kā rakstīt JavaScript funkciju izteicienus, sniedzot divus dažādus veidus, kā lietotnē izveidot funkcijas.

Bultu funkcijas nedaudz pielāgo, ja esat tradicionālo JavaScript funkciju eksperts. Apskatīsim, kas tie ir, kā viņi darbojas un kā tie jums noder.

Kas ir JavaScript bultiņu funkcijas?

Bultu funkcijas ir jauns veids, kā rakstīt funkciju izteiksmes, kas bija iekļauts JavaScript ES6 izlaišanā Kas ir ES6 un kas jāzina Javascript programmētājiemES6 attiecas uz ECMA Script (Javascript) programmēšanas valodas 6. versiju. Tagad apskatīsim dažas būtiskas izmaiņas, kuras ES6 rada JavaScript. Lasīt vairāk . Tie ir līdzīgi JavaScript izmantotajiem izteicieniem, kurus izmantojāt, ar dažiem nedaudz atšķirīgiem noteikumiem.

Bultu funkcijas vienmēr ir anonīmas, tām ir atšķirīgi noteikumi

šo, un tām ir vienkāršāka sintakse nekā tradicionālajām funkcijām.

Šīs funkcijas izmanto jaunu bultiņas marķieri:

=>

Ja kādreiz esat strādājis Python, šīs funkcijas ir ļoti līdzīgas funkcijām Python Lambda izteicieni Iesācēja rokasgrāmata izpratnei par Python Lambda funkcijāmLambdas Python ir viena no visnoderīgākajām, svarīgākajām un interesantākajām funkcijām, kas jāzina. Tālāk ir norādīts, kā tos izmantot un kāpēc tie ir noderīgi. Lasīt vairāk .

Šo funkciju sintakse ir nedaudz tīrāka nekā parastās funkcijas. Ir daži jauni noteikumi, kas jāpatur prātā:

• Funkcijas atslēgvārds ir noņemts
• Atgriešanās atslēgvārds nav obligāts
• Cirtaini bikšturi nav obligāti

Ir jāveic daudz nelielu izmaiņu, tāpēc sāksim ar funkciju izteiksmju pamata salīdzinājumu.

Kā izmantot bultu funkcijas

Bultas funkcijas ir ērti lietojamas. Bultas funkcijas ir vieglāk izprast, ja tās salīdzina ar tradicionālajām funkciju izpausmēm.

Šeit ir funkcijas izteiksme, kas pievieno divus skaitļus; vispirms izmantojot tradicionālo funkciju metodi:

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

Tā ir diezgan vienkārša funkcija, kas ņem divus argumentus un atdod summu.

Šeit ir izteiksme mainīta uz bultiņas funkciju:

let addnum = (num1, num2) => {atgriezt num1 + num2;}; addnum (1,2); >>3

Funkcijas sintakse ir diezgan atšķirīga, izmantojot bultas funkciju. Funkcijas atslēgvārds ir noņemts; bultiņas marķieris ļauj JavaScript uzzināt, ka rakstāt funkciju.

Cirtaini lencēm un atgriešanās atslēgvārds joprojām pastāv. Tās nav obligāti ar bultu funkcijām. Šeit ir vēl vienkāršāks tās pašas funkcijas piemērs:

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

Atgriešanās atslēgvārds un cirtainās lencītes vairs nav pieejamas. Atliek tikai ļoti tīra vienas līnijas funkcija, kas ir gandrīz puse no koda kā sākotnējā funkcija. Jūs iegūstat tādu pašu rezultātu ar daudz mazāk rakstītu kodu.

Bultas funkcijas ir vēl citas. ienirsim dziļāk, lai labāk izjustu, ko viņi var darīt.

Bultu funkcijas

Bultu funkcijām ir daudz dažādu lietojumu un funkciju.

Parastās funkcijas

Bultu funkcijas var izmantot vienu vai vairākus argumentus. Ja izmantojat divus vai vairākus argumentus, tie ir jāiekļauj iekavās. Ja jums ir tikai viens arguments, jums nav jāizmanto iekavas.

let kvadrāts = x => x * x kvadrāts (2); >>4

Bultas funkcijas var izmantot bez argumentiem. Ja savā funkcijā neizmantojat nevienu argumentu, jāizmanto tukšas iekavas.

let helloFunction = () => Console.log ("Sveiks, lasītāj!"); helloFunction (); >> Sveiks, lasītāj!

Tādas vienkāršas funkcijas kā kodu izmanto daudz mazāk. Iedomājieties, cik daudz vieglāk ir kompleksu projekts kā JavaScript slaidrāde Kā izveidot JavaScript slīdrādi 3 vienkāršos soļosŠodien es jums parādīšu, kā no jauna izveidot Javacript slaidrādi - iesim tieši šeit! Lasīt vairāk kļūst, kad jums ir vienkāršāks funkciju rakstīšanas veids.

Izmantojot šo

Jēdziens šo mēdz būt vissarežģītākā JavaScript izmantošanas sastāvdaļa. Bultu funkcijas padara šo vieglāk lietojams.

Kad izmantojat bultu funkcijas šo definēs ar norobežojošo funkciju. Tas var radīt problēmas, kas rodas, izveidojot ligzdotas funkcijas un nepieciešamību šo piemērot savai galvenajai funkcijai

Šis ir populārs piemērs, kurā parādīts risinājums, kas jums jāizmanto, izmantojot parastās funkcijas.

funkcija Persona () {var that = this; // Jums jāpiešķir “this” jaunam mainīgajam that.age = 0; setInterval (funkcija growUp () {that.age ++; }, 1000); }

Piešķirot vērtību šo mainīgajam padara to lasāmu, kad izsaucat funkciju, kas atrodas jūsu galvenās funkcijas iekšpusē. Tas ir nekārtīgi, šeit ir labāks veids, kā to izdarīt, izmantojot bulttaustiņus.

funkcija Persona () {this.age = 0; setInterval (() => {this.age ++; // Tagad jūs varat izmantot “šo” bez jauna deklarēta mainīgā}, 1000); }

Lai arī tie ir lieliski piemēroti funkcijām, tos nevajadzētu izmantot metožu radīšanai objektā. Bultu funkcijas neizmanto pareizo mērogu šo.

Šis ir vienkāršs objekts, kas izveido metodi iekšpusē, izmantojot bultas funkciju. Metodei vajadzētu samazināt virskārtas mainās par vienu, kad to sauc. Tā vietā tas nedarbojas vispār.

ļaujiet picai = { virskārtas: 5, removeToppings: () => {this.toppings--; } } // Picas objekts ar 5 virskārtām. > pica. >> {virskārtas: 5, noņemtPopings: f} pizza.removeToppings (); // Metode neko nedarīs objektam> pica. >> {virskārtas: 5, removeToppings: f} // Joprojām ir 5 virskārtas.

Darbs ar masīviem

Izmantojot bultiņu funkcijas, jūs varat vienkāršot kodu, ko izmanto darbam ar masīva metodēm. Masīvi un masīvu metodes ir ļoti svarīgas JavaScript daļas 5 JavaScript masīva metodes, kuras jums šodien vajadzētu apgūtVai vēlaties saprast JavaScript masīvus, bet nevarat ar tiem iepazīties? Norādījumus skatiet mūsu JavaScript masīva piemēros. Lasīt vairāk tāpēc jūs tos daudz izmantosit.

Ir dažas noderīgas metodes, piemēram, karte metode, kas palaiž funkciju visiem masīva elementiem un atdod jauno masīvu.

let myArray = [1,2,3,4]; myArray.map (funkcija (elements) { atgriešanās elements + 1; }); >> [2,3,4,5]

Šī ir diezgan vienkārša funkcija, kas katrai masīva vērtībai pievieno vienu. To pašu funkciju var uzrakstīt ar mazāku kodu, izmantojot bultiņas funkciju.

let myArray = [1,2,3,4]; myArray.map (elements => { atgriešanās elements + 1; }); >> [2,3,4,5]

Tagad to ir daudz vieglāk lasīt.

Objektu literāru veidošana

Bultas funkcijas var izmantot, lai JavaScript objektos izveidotu burtus. Parastās funkcijas tos var radīt, taču tie ir nedaudz garāki.

let createObject = funkcija createName (pirmais, pēdējais) {atgriešanās {pirmais: pirmais, pēdējais: pēdējais}; };

To pašu objektu var izveidot ar bultiņas funkciju, izmantojot mazāku kodu. Izmantojot bultiņu apzīmējumu, funkcijas pamatteksts būs jāiesaiņo iekavās. Šeit ir uzlabota sintakse ar bultu funkcijām.

let createArrowObject = (pirmais, pēdējais) => ({pirmais: pirmais, pēdējais: pēdējais});

JavaScript bultu funkcijas un ārpus tām

Tagad jūs zināt dažus atšķirīgus veidus, kā JavaScript bultiņu funkcijas atvieglo jūsu kā izstrādātāja dzīvi. Tie saīsina sintakse, dod lielāku kontroli, izmantojot šo, padariet objektus vieglāk izveidojamus un dodiet jaunu iespēju strādāt ar masīva metodēm.

Bultas funkciju ieviešana kopā ar daudzām citām funkcijām JavaScript ES6 parāda, cik nozīmīgs JavaScript ir kļuvis tīmekļa izstrādē. Tomēr ir vēl daudz vairāk.

Vai vēlaties uzzināt vairāk par JavaScript? Mūsu JavaScript apkrāptu lapu Ultimate JavaScript apkrāptu lapaIzmantojot šo apkrāptu lapu, ātri atjaunojiet JavaScript elementus. Lasīt vairāk sniedz vērtīgu informāciju un uzzināt vairāk par kā darbojas JavaScript Kas ir JavaScript un kā tas darbojas?Ja jūs mācāties tīmekļa attīstību, lūk, kas jums jāzina par JavaScript un kā tas darbojas ar HTML un CSS. Lasīt vairāk var padarīt jūs labāku izstrādātāju.