JavaScripti noolefunktsioonid võivad muuta teid paremaks arendajaks

Reklaam

JavaScript ES6 tõi veebiarenduse maailma põnevaid muudatusi. Uued täiendused JavaScripti keelde tõid uusi võimalusi.

Üks populaarsemaid muudatusi oli noolefunktsioonide lisamine JavaScripti. Noolefunktsioonid on uus viis JavaScripti funktsioonide avaldiste kirjutamiseks, pakkudes teile rakenduse funktsioonide loomiseks kahte erinevat viisi.

Noolefunktsioonid vajavad pisut kohandamist, kui olete traditsiooniliste JavaScripti funktsioonide ekspert. Vaatame lähemalt, mis need on, kuidas need töötavad ja kuidas need teile kasu toovad.

Mis on JavaScripti noolefunktsioonid?

Noolefunktsioonid on uus viis funktsioonilausete kirjutamiseks, mis olid lisatud JavaScripti ES6 väljaandesse Mis on ES6 ja mida Javascripti programmeerijad peavad teadmaES6 viitab ECMA skripti (Javascripti) programmeerimiskeele versioonile 6. Vaatleme nüüd mõnda peamist muudatust, mille ES6 JavaScripti toob. Loe rohkem . Need on sarnased JavaScripti funktsioonilausetega, mida olete kasutanud, mõnede pisut erinevate reeglitega.

Noolefunktsioonid on alati anonüümsed funktsioonid, nende jaoks on erinevad reeglid seeja süntaks on lihtsam kui traditsioonilistel funktsioonidel.

Need funktsioonid kasutavad uut nooleklahvi:

=>

Kui olete kunagi Pythonis töötanud, on need funktsioonid väga sarnased Python Lambda väljendid Python Lambda funktsioonide mõistmise juhend algajateleLambad Pythonis on üks kõige kasulikumaid, olulisemaid ja huvitavamaid funktsioone, millest teada saada. Siit saate teada, kuidas neid kasutada ja miks nad on kasulikud. Loe rohkem .

Nende funktsioonide süntaks on tavalistest funktsioonidest pisut puhtam. Pidage meeles mõned uued reeglid:

• Funktsiooni märksõna eemaldatakse
• Tagasisõna on valikuline
• Lokkis traksid on valikulised

Läbida on vaja palju väikeseid muudatusi, nii et alustame funktsioonide avaldiste põhilise võrdlusega.

Kuidas kasutada noolefunktsioone

Noolefunktsioone on lihtne kasutada. Noolefunktsioonide mõistmine on lihtsam, kui võrrelda neid traditsiooniliste funktsiooniväljenditega.

Siin on funktsiooni avaldis, mis lisab kaks numbrit; kasutades kõigepealt traditsioonilist funktsioonimeetodit:

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

See on üsna lihtne funktsioon, mis võtab vastu kaks argumenti ja tagastab summa.

Siin on väljend muudetud noolefunktsiooniks:

las addnum = (num1, num2) => {tagasta num1 + num2;}; addnum (1,2); >>3

Funktsiooni süntaks on noolefunktsiooni abil üsna erinev. Funktsiooni märksõna eemaldatakse; nooleklahv annab JavaScriptile teada, et kirjutate funktsiooni.

Lokkis traksid ja tagasisõna on endiselt alles. Need on noolefunktsioonidega valikulised. Siin on veelgi lihtsam näide samast funktsioonist:

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

Tagasisõna ja lokkis traksid on nüüd kadunud. Järele on jäänud väga puhas üherealine funktsioon, mis on algfunktsioonina peaaegu pool koodist. Sama tulemuse saate palju vähem kirjutatud koodiga.

Noolefunktsioone on veel palju. sukeldugem sügavamale, nii et tunneksid paremini, mida nad teha saavad.

Noole funktsioonid

Noolefunktsioonidel on palju erinevaid kasutusviise ja funktsioone.

Regulaarsed funktsioonid

Noolefunktsioonid võivad kasutada ühte või mitut argumenti. Kui kasutate kahte või enamat argumenti, peate need sulgudesse lisama. Kui teil on ainult üks argument, ei pea te sulgu kasutama.

olgem ruut = x => x * x ruut (2); >>4

Noolefunktsioone saab ilma argumentideta kasutada. Kui te ei kasuta oma funktsioonis ühtegi argumenti, peate kasutama tühi sulgu.

lase helloFunction = () => Console.log ("Tere lugeja!"); helloFunction (); >> Tere lugeja!

Sellised lihtsad funktsioonid kasutavad palju vähem koodi. Kujutage ette, kui palju lihtsam on kompleks projekt nagu JavaScripti slaidiseanss Kuidas luua JavaScripti slaidiseanssi 3 lihtsa sammunaTäna näitan teile, kuidas luua Javacripti slaidiseanssi nullist - lähme kohe sisse! Loe rohkem muutub siis, kui teil on lihtsam funktsioonide kirjutamise viis.

Selle kasutamine

Mõiste see kipub olema JavaScripti kasutamise kõige keerulisem osa. Noolefunktsioonid muudavad see lihtsam kasutada.

Kui kasutate noolefunktsioone see määratletakse ümbritseva funktsiooniga. See võib tekitada probleeme, mis tekivad pesastatud funktsioonide ja vajaduse loomisel see oma põhifunktsiooni rakendamiseks

Siin on populaarne näide, mis näitab lahendust, mida peate tavaliste funktsioonidega kasutama.

funktsioon Isik () {var that = this; // Peate määrama selle uuele muutujale that.age = 0; setInterval (funktsioon kasvabUp () {that.age ++; }, 1000); }

Väärtuse määramine see muutuja jaoks muudab selle loetavaks, kui helistate põhifunktsiooni sisemisele funktsioonile. See on räpane, siin on parem viis seda teha noolefunktsioonide abil.

funktsioon Isik () {see.age = 0; setInterval (() => {this.age ++; // Nüüd saate seda kasutada ilma uue muutujata, deklareeritud}, 1000); }

Kuigi need sobivad suurepäraselt funktsioonidega, ei tohiks neid kasutada meetodite loomiseks objekti sees. Noolefunktsioonid ei kasuta sobivat ulatust see.

Siin on lihtne objekt, mis loob noolefunktsiooni abil meetodi sees. Meetod peaks vähendama pealiskihid muutuvad ühe võrra, kui neid kutsutakse. Selle asemel ei tööta see üldse.

las pizza = { pealiskihid: 5, eemaldaToptid: () => {this.toppings--; } } // Pizzaobjekt, millel on 5 pealmist osa. > pitsa. >> {topised: 5, eemaldaToptid: f} pizza.removeToppings (); // Meetod ei tee objektile midagi> pitsa. >> {toppings: 5, removeToppings: f} // Ikka on 5 pealist.

Töö massiividega

Noolefunktsioonide abil saate lihtsustada massiivi meetoditega töötamiseks kasutatavat koodi. Massiivid ja massiivi meetodid on JavaScripti väga olulised osad 5 JavaScripti massiivi meetodit, mida peaksite täna õppimaKas soovite aru saada JavaScripti massiividest, kuid ei saa nendega hakkama? Juhiseid leiate meie JavaScripti massiivi näidetest. Loe rohkem seega kasutate neid palju.

Seal on mõned kasulikud meetodid, näiteks kaart meetod, mis käivitab funktsiooni massiivi kõigil elementidel ja tagastab uue massiivi.

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

See on üsna lihtne funktsioon, mis lisab massiivi igale väärtusele ühe. Sama funktsiooni saab kirjutada väiksema koodiga, kasutades noolefunktsiooni.

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

Seda on nüüd palju lihtsam lugeda.

Objektikirjanduste loomine

Noolefunktsioone saab kasutada JavaScripti objektikirjandite loomiseks. Regulaarsed funktsioonid võivad neid luua, kuid need on pisut pikemad.

lase createObject = funktsioonil createName (esimene, viimane) {tagasta {esimene: esimene, viimane: viimane}; };

Sama objekti saab teha noolefunktsiooniga, kasutades vähem koodi. Noolemärke abil peate funktsiooni korp mässima sulgudesse. Siin on parandatud süntaks noolefunktsioonidega.

lase createArrowObject = (esimene, viimane) => ({esimene: esimene, viimane: viimane});

JavaScripti noolefunktsioonid ja muud

Nüüd teate mõnda erinevat viisi, kuidas JavaScripti noolefunktsioonid teie elu arendajana lihtsustavad. Need lühendavad süntaksi, annavad teile selle kasutamisega rohkem kontrolli see, hõlbustage objektide loomist ja annate teile uue viisi massiivimeetoditega töötamiseks.

Noolefunktsioonide tutvustus koos paljude teiste funktsioonidega JavaScript ES6 näitab, kui oluliseks JavaScripti on veebiarenduses saanud. Siiski on veel nii palju teha.

Kas soovite rohkem teada saada JavaScripti kohta? Meie JavaScripti petuleht Ülim JavaScripti petulehtSelle petulehe abil saate kiiresti värskendada JavaScripti elemente. Loe rohkem pakub väärtuslikku teavet ja lisateavet kuidas JavaScript töötab Mis on JavaScript ja kuidas see töötab?Veebiarenduse õppimisel on siin vaja teada JavaScripti ning selle toimimise kohta HTML-i ja CSS-iga. Loe rohkem võib muuta teid paremaks arendajaks.