JavaScript bultu funkcijas var padarīt jūs par labāku izstrādātāju

JavaScript ES6 ienesa aizraujošas izmaiņas tīmekļa izstrādes pasaulē. Jauni JavaScript valodas papildinājumi pavēra jaunas iespējas.

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

Bultu funkcijas nedaudz jāpielāgo, ja esat tradicionālo JavaScript funkciju eksperts. Apskatīsim, kas tie ir, kā tie darbojas un kā tie jums dod labumu.

Kas ir JavaScript bultu funkcijas?

Bultu funkcijas ir jauns veids, kā rakstīt funkciju izteiksmes, kas bija iekļauts JavaScript ES6 laidienā . Tie ir līdzīgi izmantotajiem JavaScript funkciju izteicieniem ar dažiem atšķirīgiem noteikumiem.

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

this

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

Vai es varu spēlēt savas PS3 spēles savā PS4

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

=>

Ja esat kādreiz strādājis Python, šīs funkcijas ir ļoti līdzīgas Python Lambda izteiksmes .

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

Funkcijas atslēgvārds ir noņemts
Atgriešanās atslēgvārds nav obligāts
Cirtainās breketes nav obligātas

Ir jāpārskata daudzas nelielas izmaiņas, tāpēc sāksim ar funkciju izteiksmju pamata salīdzinājumu.

Kā izmantot bultiņu funkcijas

Bultas funkcijas ir viegli lietojamas. Bultu funkcijas ir vieglāk saprast, salīdzinot tās ar tradicionālajām funkciju izteiksmē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 atgriež summu.

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

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

Funkciju sintakse ir pavisam citāda, izmantojot bultiņas funkciju. Funkcijas atslēgvārds tiek noņemts; bultiņas marķieris ļauj JavaScript zināt, ka rakstāt funkciju.

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

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

Atgriešanās atslēgvārds un cirtainās breketes tagad ir pazudušas. Atliek tikai ļoti tīra vienas rindas 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.

Bultu funkcijām ir vairāk. ienirsim dziļāk, lai jūs labāk sajustu, ko viņi var darīt.

Bultiņas funkcijas

Bultas funkcijām ir daudz dažādu pielietojumu un funkciju.

kā zināt, vai kāds jūs bloķē snapchat

Regulāras funkcijas

Bultas 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 square = x => x * x  
square(2);  
>>4

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

let helloFunction = () => Console.log('Hello reader!');  
helloFunction();  
>>Hello reader!

Šādas vienkāršas funkcijas izmanto daudz mazāk koda. Iedomājieties, cik daudz vieglāk ir komplekss projekts kā JavaScript slaidrāde kļūst, kad jums ir vienkāršāks funkciju rakstīšanas veids.

Izmantojot šo

Jēdziens

this

mēdz būt sarežģītākā JavaScript lietošanas daļa. Bultas funkcijas padara

this

vieglāk izmantot.

Izmantojot bultiņu funkcijas

this

definēs norobežojošā funkcija. Tas var radīt problēmas, kas rodas, veidojot ligzdotas funkcijas un vajadzības

this

lai piemērotu jūsu galvenajai funkcijai

Šeit ir populārs piemērs, kas parāda risinājumu, kas jāizmanto parastajām funkcijām.

function Person() {  
 var that = this; //You have to assign 'this' to a new variable  
 that.age = 0;  
 setInterval(function growUp() {  
 that.age++;  
 }, 1000);  
}

Piešķirot vērtību

this

uz mainīgo padara to lasāmu, kad izsaucat funkciju savā galvenajā funkcijā. Tas ir netīrs, šeit ir labāks veids, kā to izdarīt, izmantojot bultu funkcijas.

function Person(){  
 this.age = 0;  
 setInterval(() => {  
 this.age++; // Now you can use 'this' without a new variable declared  
 }, 1000);  
}

Lai gan tie ir lieliski piemēroti funkcijām, tos nevajadzētu izmantot, lai izveidotu metodes objekta iekšienē. Bultas funkcijas neizmanto pareizo jomu

this

Šeit ir vienkāršs objekts, kas izveido metodi iekšpusē, izmantojot bultiņas funkciju. Metodei vajadzētu samazināt piedevas mainās pa vienam, kad tiek izsaukts. Tā vietā tas nedarbojas vispār.

kas ir viedā mape mac

let pizza = {  
toppings: 5,  
removeToppings: () => {  
 this.toppings--;  
 }  
}  
//A pizza object with 5 toppings  
>pizza  
>>{toppings: 5, removeToppings: f}  
pizza.removeToppings(); //The method will not do anything to the object  
>pizza  
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

Darbs ar masīviem

Izmantojot bultu funkcijas, jūs varat vienkāršot kodu, ko izmanto, lai strādātu ar masīva metodēm. Masīvi un masīva metodes ir ļoti svarīga JavaScript sastāvdaļa tāpēc jūs tos daudz izmantosit.

Ir dažas noderīgas metodes, piemēram karte metode, kas palaiž funkciju visos masīva elementos un atgriež jauno masīvu.

let myArray = [1,2,3,4];  
myArray.map(function(element){  
return element + 1;  
});  
>> [2,3,4,5]

Šī ir diezgan vienkārša funkcija, kas pievieno vienu katrai masīva vērtībai. Jūs varat rakstīt to pašu funkciju ar mazāk koda, izmantojot bultiņas funkciju.

let myArray = [1,2,3,4];  
myArray.map(element => {  
return element + 1;  
});  
>> [2,3,4,5]

Tagad to ir daudz vieglāk lasīt.

Objektu literāru veidošana

Bultu funkcijas var izmantot, lai JavaScript veidotu objektu literāļus. Parastās funkcijas var tos izveidot, taču tie ir nedaudz garāki.

let createObject = function createName(first,last) {  
 return {  
 first: first,  
 last: last  
 };  
};

Jūs varat izveidot to pašu objektu ar bultiņas funkciju, izmantojot mazāk koda. Izmantojot bultiņas apzīmējumus, funkcijas pamatteksts jāiesaiņo iekavās. Šeit ir uzlabota sintakse ar bultu funkcijām.

let createArrowObject = (first,last) => ({first:first, last:last});

JavaScript bultu funkcijas un ne tikai

Tagad jūs zināt dažus dažādus veidus, kā JavaScript bultiņas atvieglo jūsu kā izstrādātāja dzīvi. Tie saīsina sintaksi, sniedz jums lielāku kontroli, izmantojot

this

, atvieglo objektu izveidi un sniedz jaunu veidu, kā strādāt ar masīva metodēm.

Bultu funkciju ieviešana kopā ar daudzām citām funkcijām JavaScript ES6 parāda, cik svarīga JavaScript ir kļuvusi tīmekļa izstrādē. Tomēr jūs varat darīt vēl daudz.

Vai vēlaties uzzināt vairāk par JavaScript? Uzziniet šos JavaScript ietvarus. Turklāt mūsu JavaScript krāpšanās lapa sniedz vērtīgu informāciju un uzzina vairāk par kā darbojas JavaScript var padarīt jūs par labāku izstrādātāju.

Kopīgot Kopīgot Čivināt E -pasts 6 dzirdamas alternatīvas: labākās bezmaksas vai lētas audiogrāmatu lietotnes

Ja jums nepatīk maksāt par audiogrāmatām, šeit ir dažas lieliskas lietotnes, kas ļauj tās klausīties bez maksas un likumīgi.

Lasīt Tālāk Saistītās tēmas

Programmēšana
JavaScript

Par autoru Entonijs Grants(40 publicēti raksti)

Entonijs Grants ir ārštata rakstnieks, kas aptver programmēšanu un programmatūru. Viņš ir datorzinātņu profesors, kurš nodarbojas ar programmēšanu, Excel, programmatūru un tehnoloģijām.

Vairāk no Entonija Granta

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu