JavaScript-nuolitoiminnot voivat tehdä sinusta paremman kehittäjän

Mainos

JavaScript ES6 toi jännittäviä muutoksia verkkokehityksen maailmaan. Uudet lisäykset JavaScript-kielelle toivat uusia mahdollisuuksia.

Yksi suosituimmista muutoksista oli nuolitoimintojen lisääminen JavaScriptiin. Nuolitoiminnot ovat uusi tapa kirjoittaa JavaScript-funktiolausekkeita, mikä antaa sinulle kaksi eri tapaa luoda toimintoja sovellukseesi.

Nuolitoiminnot vievät hieman säätämistä, jos olet perinteisten JavaScript-toimintojen asiantuntija. Katsotaanpa mitä nämä ovat, miten ne toimivat ja miten ne hyödyttävät sinua.

Mitkä ovat JavaScript-nuolitoiminnot?

Nuolitoiminnot ovat uusi tapa kirjoittaa funktiolausekkeita, jotka olivat sisältyy JavaScript ES6: n julkaisuun Mikä on ES6 ja mitä Javascript-ohjelmoijien on tiedettäväES6 viittaa ECMA Script (Javascript) -ohjelmointikielen versioon 6. Katsokaamme nyt joitain merkittäviä muutoksia, jotka ES6 tuo JavaScriptiin. Lue lisää . Ne ovat samanlaisia ​​kuin käyttämäsi JavaScript-funktiolausekkeet, joilla on hieman erilaisia ​​sääntöjä.

Nuolitoiminnot ovat aina nimettömiä toimintoja, joilla on erilaiset säännöt Tämä, ja niiden syntaksi on yksinkertaisempi kuin perinteisten toimintojen.

Nämä toiminnot käyttävät uutta nuolimerkkiä:

=>

Jos olet koskaan työskennellyt Pythonissa, nämä toiminnot ovat hyvin samanlaisia ​​kuin Python Lambda -lausekkeet Aloittelijan opas Python-lambda-toimintojen ymmärtämiseksiPythonin lambdat ovat yksi hyödyllisimmistä, tärkeimmistä ja mielenkiintoisimmista ominaisuuksista, joista tietää. Näin käytät niitä ja miksi he ovat hyödyllisiä. Lue lisää .

Näiden funktioiden syntaksi on hiukan puhtaampi kuin normaalit toiminnot. Muutamia uusia sääntöjä on pidettävä mielessä:

• Funktion avainsana poistetaan
• Paluu-avainsana on valinnainen
• Kiharat olkaimet ovat valinnaisia

Siellä on paljon pieniä muutoksia, jotka ylitetään, joten aloitetaan funktion lausekkeiden vertailulla.

Kuinka käyttää nuolitoimintoja

Nuolitoiminnot ovat helppokäyttöisiä. Nuolitoimintojen ymmärtäminen on helpompaa, kun niitä verrataan rinnakkain perinteisiin funktiolausekkeisiin.

Tässä on funktiolauseke, joka lisää kaksi numeroa; ensin käyttämällä perinteistä toimintomenetelmää:

 anna addnum = funktio (num1, num2) {palata num1 + num2; }; addnum (1,2); >>3

Se on melko yksinkertainen toiminto, joka ottaa kaksi argumenttia ja palauttaa summan.

Tässä on lauseke muutettu nuolifunktioksi:

olkoon addnum = (num1, num2) => {palauta num1 + num2;}; addnum (1,2); >>3

Funktion syntaksi on aivan erilainen nuolitoiminnon avulla. Funktion avainsana poistetaan; nuolimerkki antaa JavaScriptille tietää, että kirjoitat funktion.

Kirsikkatuet ja paluuhakusana ovat edelleen olemassa. Nämä ovat valinnaisia ​​nuolitoimintojen kanssa. Tässä on vielä yksinkertaisempi esimerkki samasta toiminnosta:

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

Palautusavainsana ja kiharaketjut ovat nyt poissa. Jäljellä on erittäin puhdas yksirivinen toiminto, joka on lähes puolet koodista alkuperäisen funktiona. Saat saman tuloksen paljon vähemmän kirjoitetulla koodilla.

Nuolitoimintoja on enemmän. sukellaan syvemmälle, jotta saat paremman tunteen siitä, mitä he voivat tehdä.

Nuolitoimintojen ominaisuudet

Nuolitoiminnoilla on monia erilaisia ​​käyttötapoja ja ominaisuuksia.

Säännölliset toiminnot

Nuolitoiminnot voivat käyttää yhtä tai useampaa argumenttia. Jos käytät kahta tai useampaa argumenttia, sinun on lisättävä ne suluihin. Jos sinulla on vain yksi argumentti, sinun ei tarvitse käyttää sulkuja.

olkoon neliö = x => x * x neliö (2); >>4

Nuolitoimintoja voidaan käyttää ilman argumentteja. Jos et käytä argumentteja toiminnassasi, sinun on käytettävä tyhjiä suluja.

anna helloFunction = () => Console.log ("Hei lukija!"); helloFunction (); >> Hei lukija!

Nämä yksinkertaiset toiminnot käyttävät paljon vähemmän koodia. Kuvittele kuinka paljon helpompaa monimutkaista projekti kuten JavaScript-diaesitys Kuinka rakentaa JavaScript-diaesitys 3 helpossa vaiheessaTänään näytän sinulle kuinka rakentaa JavaScriptin diaesitys tyhjästä - hyppäämme sisään! Lue lisää tulee, kun sinulla on yksinkertaisempi tapa kirjoittaa toimintoja.

Tämän käyttäminen

Käsite Tämä on yleensä vaikein osa JavaScriptin käyttöä. Nuolitoiminnot tekevät Tämä helpompi käyttää.

Kun käytät nuolitoimintoja Tämä määritetään sulkevan toiminnon avulla. Tämä voi aiheuttaa ongelmia, joita syntyy, kun luot sisäkkäisiä toimintoja ja tarpeita Tämä soveltaa päätoimintoosi

Tässä on suosittu esimerkki, joka näyttää kiertotavan, jota sinun on käytettävä tavallisten toimintojen kanssa.

funktio Henkilö () {var that = this; // Sinun on määritettävä 'tämä' uudelle muuttujalle that.age = 0; setInterval (funktio kasvabUp () {that.age ++; }, 1000); }

Arvon määrittäminen Tämä muuttujan kanssa tekee siitä luettavan, kun soitat päätoiminnon sisällä olevalle toiminnolle. Tämä on sotkuista, tässä on parempi tapa tehdä tämä nuolitoimintojen avulla.

funktio Henkilö () {this.age = 0; setInterval (() => {this.age ++; // Nyt voit käyttää tätä, ilman uutta muuttujaa ilmoitettuna}, 1000); }

Vaikka ne ovat erinomaisia ​​toimintoihin, niitä ei pitäisi käyttää menetelmien luomiseen objektin sisällä. Nuolitoiminnot eivät käytä oikeaa laajuutta Tämä.

Tässä on yksinkertainen esine, joka luo menetelmän sisälle nuolitoiminnon avulla. Menetelmän tulisi vähentää täytettä muuttuva yhdellä soitettaessa. Sen sijaan se ei toimi ollenkaan.

anna pizza = { lisäykset: 5, removeToppings: () => {this.toppings--; } } // Pizzaobjekti 5 lisäyksellä. > Pizzaa. >> {täytettä: 5, poistaToppings: f} pizza.removeToppings (); // Menetelmä ei tee mitään esineelle> pizza. >> {lisäykset: 5, removeToppings: f} // edelleen on 5 lisäystä.

Työskentely ryhmien kanssa

Nuolitoimintojen avulla voit yksinkertaistaa koodia, jota käytetään taulukkomenetelmien kanssa työskentelemiseen. Ryhmät ja ryhmämenetelmät ovat erittäin tärkeitä osia JavaScriptiä 5 JavaScript-array -menetelmää, jotka sinun pitäisi hallita tänäänHaluatko ymmärtää JavaScript-taulukoita, mutta et pääse käsiksi niihin? Katso ohjeita JavaScripti-taulukko-esimerkkeistämme. Lue lisää joten käytät niitä paljon.

On olemassa joitain hyödyllisiä menetelmiä, kuten kartta menetelmä, joka suorittaa funktion kaikissa taulukon elementeissä ja palauttaa uuden taulukon.

olkoon myArray = [1,2,3,4]; myArray.map (toiminto (elementti) { paluuelementti + 1; }); >> [2,3,4,5]

Tämä on melko yksinkertainen toiminto, joka lisää yhden jokaisessa taulukon arvossa. Voit kirjoittaa saman toiminnon vähemmän koodilla nuolitoiminnon avulla.

olkoon myArray = [1,2,3,4]; myArray.map (elementti => { paluuelementti + 1; }); >> [2,3,4,5]

Se on nyt paljon helpompaa lukea.

Objektikirjaimien luominen

Nuolitoimintoja voidaan käyttää objektikirjaimien luomiseen JavaScriptiin. Säännölliset toiminnot voivat luoda niitä, mutta ne ovat hieman pidempiä.

anna createObject = toiminto createName (ensimmäinen, viimeinen) {palata {ensimmäinen: ensimmäinen, viimeinen: viimeinen}; };

Voit tehdä saman objektin nuolitoiminnolla käyttämällä vähemmän koodia. Nuolimerkinnän avulla toimintorunko on kiedottava sulkeisiin. Tässä on parannettu syntaksi nuolitoimintojen kanssa.

anna luodaArrowObject = (ensimmäinen, viimeinen) => ({ensimmäinen: ensimmäinen, viimeinen: viimeinen});

JavaScript-nuolitoiminnot ja muut

Tiedät nyt joitakin erilaisia ​​tapoja, joilla JavaScript-nuolitoiminnot helpottavat elämääsi kehittäjänä. Ne lyhentävät syntaksia, antavat sinulle enemmän hallintaa käyttämällä Tämä, tee objektien luominen helpommaksi ja antaa sinulle uuden tavan työskennellä taulukkomenetelmillä.

Nuolitoimintojen ja monien muiden ominaisuuksien käyttöönotto JavaScript ES6: ssa osoittaa kuinka JavaScript on tullut tärkeäksi web-kehityksessä. Voit kuitenkin tehdä niin paljon enemmän.

Haluatko tietää enemmän JavaScripistä? Meidän JavaScript-huijausarkki Ultimate JavaScript -huijauskorttiHanki nopea päivitys JavaScript-elementeille tällä huijauskoodilla. Lue lisää tarjoaa arvokasta tietoa ja lisätietoja miten JavaScript toimii Mikä on JavaScript ja kuinka se toimii?Jos opit verkkokehitystä, tässä on mitä sinun on tiedettävä JavaScriptistä ja kuinka se toimii HTML: n ja CSS: n kanssa. Lue lisää voi tehdä sinusta paremman kehittäjän.