JavaScript-pilfunksjoner kan gjøre deg til en bedre utvikler

Annonse

JavaScript ES6 brakte spennende forandringer i webutviklingens verden. Nye tillegg til JavaScript-språket ga nye muligheter.

En av de mer populære endringene var tillegg av pilfunksjoner i JavaScript. Pilfunksjoner er en ny måte å skrive JavaScript-funksjonuttrykk, og gir deg to forskjellige måter å lage funksjoner i appen din.

Pilfunksjonene krever litt justering hvis du er en ekspert på tradisjonelle JavaScript-funksjoner. La oss se på hva disse er, hvordan de fungerer og hvordan de kommer deg til gode.

Hva er JavaScript-pilfunksjoner?

Pilfunksjoner er en ny måte å skrive funksjonsuttrykk som var inkludert i utgivelsen av JavaScript ES6 Hva er ES6 og hva Javascript-programmerere trenger å viteES6 viser til versjon 6 av ECMA Script (Javascript) programmeringsspråk. La oss nå se på noen viktige endringer som ES6 fører til JavaScript. Les mer . De ligner på JavaScript-funksjonens uttrykk du har brukt, med noen litt forskjellige regler.

Pilfunksjoner er alltid anonyme funksjoner, har forskjellige regler for dette, og har en enklere syntaks enn tradisjonelle funksjoner.

Disse funksjonene bruker et nytt piltoken:

=>

Hvis du noen gang har jobbet i Python, ligner disse funksjonene veldig Python Lambda-uttrykk En nybegynnerguide for å forstå Python Lambda-funksjonerLambdas i Python er en av de mest nyttige, viktige og interessante funksjonene å vite om. Slik bruker du dem og hvorfor de er nyttige. Les mer .

Syntaksen for disse funksjonene er litt renere enn normale funksjoner. Det er noen få nye regler du må huske på:

• Funksjons nøkkelordet blir fjernet
• Retursøkkelordet er valgfritt
• Krøllete seler er valgfritt

Det er mange små endringer å gå over, så la oss begynne med en grunnleggende sammenligning av funksjonsuttrykk.

Slik bruker du pilfunksjoner

Pilfunksjoner er enkle å bruke. Det er enklere å forstå pilfunksjoner når man sammenligner side om side med tradisjonelle funksjonsuttrykk.

Her er et funksjonsuttrykk som legger til to tall; først ved bruk av den tradisjonelle funksjonsmetoden:

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

Det er en ganske enkel funksjon som tar to argumenter og returnerer summen.

Her er uttrykket endret til en pilfunksjon:

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

Funkssyntaxen er ganske forskjellig ved bruk av en pilfunksjon. Funksjonens nøkkelord fjernes; pilens token lar JavaScript vite at du skriver en funksjon.

De krøllete selene og returordet er fortsatt der. Disse er valgfrie med pilfunksjoner. Her er et enda enklere eksempel på den samme funksjonen:

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

Retursøkkelordet og de krøllete selene er nå borte. Det som er igjen er en veldig ren enlinjefunksjon som er nesten halvparten av koden som den opprinnelige funksjonen. Du får samme resultat med mye mindre skrevet kode.

Det er mer pilfunksjoner. la oss dykke dypere slik at du får en bedre følelse av hva de kan gjøre.

Pilfunksjonsfunksjoner

Pilfunksjoner har mange forskjellige bruksområder og funksjoner inkludert.

Vanlige funksjoner

Pilfunksjoner kan bruke ett eller flere argumenter. Hvis du bruker to eller flere argumenter, må du legge ved dem i parentes. Hvis du bare har ett argument, trenger du ikke å bruke parentes.

la kvadrat = x => x * x kvadrat (2); >>4

Pilfunksjoner kan brukes uten argumenter. Hvis du ikke bruker noen argumenter i funksjonen din, må du bruke tom parentes.

la helloFunction = () => Console.log ("Hallo leser!"); helloFunction (); >> Hei leser!

Enkle funksjoner som disse bruker mye mindre kode. Tenk hvor mye enklere et kompleks er prosjekt som en JavaScript-lysbildefremvisning Slik bygger du et JavaScript SlideShow i tre enkle trinnI dag skal jeg vise deg hvordan du bygger et Javacript-lysbildefremvisning fra bunnen av - la oss hoppe rett inn! Les mer blir når du har en enklere måte å skrive funksjoner på.

Bruker dette

Konseptet av dette pleier å være den vanskeligste delen av å bruke JavaScript. Pilfunksjoner lager dette enklere å bruke.

Når du bruker pilfunksjoner dette vil bli definert av den vedlagte funksjonen. Dette kan skape problemer som dukker opp når du oppretter nestede funksjoner og behov dette å bruke på hovedfunksjonen din

Her er et populært eksempel som viser løsningen du må bruke med vanlige funksjoner.

funksjon Person () {var det = dette; // Du må tilordne 'dette' til en ny variabel that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

Tildele verdien av dette til en variabel gjør den lesbar når du kaller en funksjon inne i hovedfunksjonen. Dette er rotete, her er en bedre måte å gjøre dette ved å bruke pilfunksjoner.

funksjon Person () {this.age = 0; setInterval (() => {this.age ++; // Nå kan du bruke 'dette' uten en ny variabel deklarert}, 1000); }

Selv om de er flotte for funksjoner, bør de ikke brukes til å lage metoder i et objekt. Pilfunksjoner bruker ikke riktig scoping for dette.

Her er et enkelt objekt som lager en metode inne ved hjelp av en pilfunksjon. Metoden skal redusere pålegg variabel etter en når den blir kalt. I stedet fungerer det ikke i det hele tatt.

la pizza = { pålegg: 5, removeToppings: () => {this.toppings--; } } // Et pizzaobjekt med 5 pålegg. > Pizza. >> {toppings: 5, removeToppings: f} pizza.removeToppings (); // Metoden vil ikke gjøre noe med objektet> pizza. >> {toppinger: 5, removeToppings: f} // Har fortsatt 5 pålegg.

Arbeide med matriser

Ved hjelp av pilfunksjoner kan du forenkle koden som brukes til å arbeide med matrismetoder. Arrays og matrismetoder er veldig viktige deler av JavaScript 5 JavaScript-array-metoder du bør mestre i dagVil du forstå JavaScript-matriser, men ikke greie å få tak i dem? Se eksempler på JavaScript-array for veiledning. Les mer så du vil bruke dem mye.

Det er noen nyttige metoder som kart metode som kjører en funksjon på alle elementer i en matrise og returnerer den nye arrayen.

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

Dette er en ganske enkel funksjon som tilfører en verdi til hver verdi i matrisen. Du kan skrive den samme funksjonen med mindre kode ved å bruke en pilfunksjon.

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

Det er mye lettere å lese nå.

Opprette objektlitterære

Pilfunksjoner kan brukes til å opprette objektsbokstaver i JavaScript. Vanlige funksjoner kan lage dem, men de er litt lenger.

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

Du kan lage det samme objektet med en pilfunksjon ved å bruke mindre kode. Ved å bruke pilnotasjon må du pakke inn funksjonslegemet i parentes. Her er den forbedrede syntaks med pilfunksjoner.

la createArrowObject = (først, sist) => ({første: først, sist: sist});

JavaScript-pilfunksjoner og utover

Du vet nå om forskjellige måter JavaScript-pilfunksjoner gjør livet ditt enklere som utvikler. De forkorter syntaks, gir deg mer kontroll med dette, gjøre objekter enklere å lage og gi deg en ny måte å jobbe med matrismetoder.

Innføringen av pilfunksjoner, sammen med mange andre funksjoner, i JavaScript ES6, viser hvor viktig JavaScript har blitt for webutvikling. Det er imidlertid så mye mer du kan gjøre.

Vil du lære mer om JavaScript? Vår JavaScript jukseark The Ultimate JavaScript Cheat SheetFå en rask oppdatering på JavaScript-elementer med dette juksearket. Les mer gir verdifull informasjon og lære mer om hvordan JavaScript fungerer Hva er JavaScript, og hvordan fungerer det?Hvis du lærer nettutvikling, her er hva du trenger å vite om JavaScript og hvordan det fungerer med HTML og CSS. Les mer kan gjøre deg til en bedre utvikler.