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

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

JavaScript ES6 brakte spennende endringer i verden av webutvikling. 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 -funksjonsuttrykk på, og gir deg to forskjellige måter å lage funksjoner i appen din.



Pilfunksjoner krever litt justering hvis du er ekspert på tradisjonelle JavaScript -funksjoner. La oss se på hva disse er, hvordan de fungerer, og hvordan de er til fordel for deg.





Hva er JavaScript -pilfunksjoner?

Pilfunksjoner er en ny måte å skrive funksjonsuttrykk på inkludert i utgivelsen av JavaScript ES6 . De ligner på JavaScript -funksjonsuttrykkene du har brukt, med noen litt forskjellige regler.

Pilfunksjoner er alltid anonyme funksjoner, har forskjellige regler for



this

, og har en enklere syntaks enn tradisjonelle funksjoner.

hvilket tv -program skal jeg se basert på det jeg liker

Disse funksjonene bruker et nytt piltoken:



=>

Hvis du noen gang har jobbet i Python, ligner disse funksjonene veldig på Python Lambda -uttrykk .

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



  • Funksjonsnøkkelordet er fjernet
  • Retursøkeordet er valgfritt
  • Krøllete seler er valgfrie

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. Å forstå pilfunksjoner er lettere når det sammenlignes side om side med tradisjonelle funksjonsuttrykk.

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

let addnum = function(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:

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

Funksjonssyntaksen er ganske annerledes ved hjelp av en pilfunksjon. Funksjonsnøkkelordet er fjernet; piltoken gir JavaScript beskjed om at du skriver en funksjon.

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

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

Retursøkeordet 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 det samme resultatet med mye mindre skrevet kode.

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

Pilfunksjoner

Pilfunksjoner har mange forskjellige bruksområder og funksjoner inkludert.

hvordan slår jeg av bixby

Vanlige funksjoner

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

let square = x => x * x
square(2);
>>4

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

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

Enkle funksjoner som disse bruker mye mindre kode. Tenk hvor mye lettere et kompleks er prosjekt som en JavaScript -lysbildefremvisning blir når du har en enklere måte å skrive funksjoner på.

Bruker dette

Konseptet av

this

pleier å være den vanskeligste delen av å bruke JavaScript. Pilfunksjoner gjør

this

lettere å bruke.

Når du bruker pilfunksjoner

this

vil bli definert av den omsluttende funksjonen. Dette kan skape problemer som dukker opp når du oppretter nestede funksjoner og behov

this

å søke på hovedfunksjonen din

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

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

Tilordne verdien av

this

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.

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

Selv om de er gode for funksjoner, bør de ikke brukes til å lage metoder inne i et objekt. Pilfunksjoner bruker ikke riktig omfang for

this

.

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

hvordan spille civ 5 flerspiller uten damp
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

Arbeider med matriser

Ved å bruke pilfunksjoner kan du forenkle koden som brukes til å arbeide med matrisemetoder. Matriser og matrisemetoder er svært viktige deler av JavaScript så du kommer til å 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 matrisen.

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

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

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

Det er mye lettere å lese nå.

Lag objektlitteratur

Pilfunksjoner kan brukes til å lage objektbokstaver i JavaScript. Vanlige funksjoner kan lage dem, men de er litt lengre.

let 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 pilnotasjonen må du pakke inn funksjonskroppen i parentes. Her er den forbedrede syntaksen med pilfunksjoner.

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

JavaScript Arrow Functions and Beyond

Du kjenner nå noen forskjellige måter JavaScript -pilfunksjoner gjør livet ditt lettere som utvikler. De forkorter syntaksen, gir deg mer kontroll ved å bruke

this

, gjør objekter enklere å lage og gir deg en ny måte å jobbe med matrisemetoder.

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

Vil du lære mer om JavaScript? Lær disse JavaScript -rammene. Pluss, vår JavaScript jukseark gir verdifull informasjon og lære mer om hvordan JavaScript fungerer kan gjøre deg til en bedre utvikler.

Dele Dele kvitring E -post 6 hørbare alternativer: De beste gratis eller billige lydbokappene

Hvis du ikke liker å betale for lydbøker, er det noen flotte apper som lar deg lytte til dem gratis og lovlig.

Les neste Relaterte temaer
  • Programmering
  • JavaScript
Om forfatteren Anthony Grant(40 artikler publisert)

Anthony Grant er frilansskribent som dekker programmering og programvare. Han er en datavitenskap som jobber med programmering, Excel, programvare og teknologi.

Mer fra Anthony Grant

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere