JavaScript -pilfunktioner kan göra dig till en bättre utvecklare

JavaScript -pilfunktioner kan göra dig till en bättre utvecklare

JavaScript ES6 medförde spännande förändringar i webbutvecklingsvärlden. Nya tillägg till JavaScript -språket gav nya möjligheter.





En av de mer populära ändringarna var tillägget av pilfunktioner till JavaScript. Pilfunktioner är ett nytt sätt att skriva JavaScript -funktionsuttryck, vilket ger dig två olika sätt att skapa funktioner i din app.



Arrow -funktioner tar lite justeringar om du är expert på traditionella JavaScript -funktioner. Låt oss ta en titt på vad dessa är, hur de fungerar och hur de gynnar dig.





Vad är JavaScript -pilfunktioner?

Pilfunktioner är ett nytt sätt att skriva funktionsuttryck som var ingår i utgåvan av JavaScript ES6 . De liknar de JavaScript -funktionsuttryck du har använt, med lite olika regler.

Pilfunktioner är alltid anonyma funktioner, har olika regler för



this

, och har en enklare syntax än traditionella funktioner.

hur man tittar på åldersbegränsade videor på youtube

Dessa funktioner använder en ny piltoken:



=>

Om du någonsin har arbetat i Python liknar dessa funktioner mycket Python Lambda -uttryck .

Syntaxen för dessa funktioner är lite renare än vanliga funktioner. Det finns några nya regler att tänka på:



  • Funktionsordet tas bort
  • Retursökordet är valfritt
  • Lockiga hängslen är valfria

Det finns många små förändringar att gå över, så låt oss börja med en grundläggande jämförelse av funktionsuttryck.

Hur man använder pilfunktioner

Pilfunktioner är enkla att använda. Att förstå pilfunktioner är lättare jämfört sida vid sida med traditionella funktionsuttryck.

Här är ett funktionsuttryck som lägger till två tal; först med den traditionella funktionsmetoden:

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

Det är en ganska enkel funktion som tar två argument och returnerar summan.

Här är uttrycket ändrat till en pilfunktion:

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

Funktionssyntaxen är ganska annorlunda med hjälp av en pilfunktion. Funktionsordet tas bort; piltoken låter JavaScript veta att du skriver en funktion.

De lockiga hängslen och returordet finns fortfarande kvar. Dessa är valfria med pilfunktioner. Här är ett ännu enklare exempel på samma funktion:

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

Retursökordet och de lockiga hängslen är nu borta. Det som återstår är en mycket ren enradig funktion som är nästan hälften av koden som den ursprungliga funktionen. Du får samma resultat med mycket mindre skriven kod.

Det finns mer till pilfunktioner. låt oss dyka djupare så att du får en bättre känsla för vad de kan göra.

Pilfunktionsfunktioner

Pilfunktioner har många olika användningsområden och funktioner.

android för hallon pi 3 b+

Vanliga funktioner

Pilfunktioner kan använda ett eller flera argument. Om du använder två eller flera argument måste du bifoga dem inom parentes. Om du bara har ett argument behöver du inte använda parentes.

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

Pilfunktioner kan användas utan argument. Om du inte använder några argument i din funktion måste du använda tom parentes.

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

Enkla funktioner som dessa använder mycket mindre kod. Tänk hur mycket lättare ett komplex projekt som ett JavaScript -bildspel blir när du har ett enklare sätt att skriva funktioner.

Använd detta

Konceptet av

this

tenderar att vara den svåraste delen av att använda JavaScript. Pilfunktioner gör

this

lättare att använda.

När du använder pilfunktioner

this

kommer att definieras av den omslutande funktionen. Detta kan skapa problem som uppstår när du skapar kapslade funktioner och behov

this

att gälla för din huvudfunktion

Här är ett populärt exempel som visar den lösning du måste använda med vanliga funktioner.

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

Tilldela värdet på

this

till en variabel gör den läsbar när du kallar en funktion inuti din huvudfunktion. Det här är rörigt, här är ett bättre sätt att göra detta med hjälp av pilfunktioner.

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

Även om de är bra för funktioner, bör de inte användas för att skapa metoder inuti ett objekt. Arrow -funktioner använder inte rätt scoping för

this

.

Här är ett enkelt objekt som skapar en metod inuti med hjälp av en pilfunktion. Metoden bör minska pålägg variabel med en när den kallas. Istället fungerar det inte alls.

hur man konfigurerar gamepad på Android
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

Arbetar med matriser

Med hjälp av pilfunktioner kan du förenkla koden som används för att arbeta med matrismetoder. Arrays och array -metoder är mycket viktiga delar av JavaScript så du kommer att använda dem mycket.

Det finns några användbara metoder som Karta metod som kör en funktion på alla element i en matris och returnerar den nya matrisen.

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

Detta är en ganska enkel funktion som lägger till ett till varje värde i matrisen. Du kan skriva samma funktion med mindre kod genom att använda en pilfunktion.

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

Det är mycket lättare att läsa nu.

Skapa objektlitteratur

Pilfunktioner kan användas för att skapa objektbokstavar i JavaScript. Vanliga funktioner kan skapa dem, men de är lite längre.

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

Du kan göra samma objekt med en pilfunktion med mindre kod. Med hjälp av pilnotering måste du linda funktionskroppen inom parentes. Här är den förbättrade syntaxen med pilfunktioner.

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

JavaScript -pilfunktioner och längre bort

Du vet nu några olika sätt som JavaScript -pilfunktioner gör ditt liv enklare som utvecklare. De förkortar syntaxen, ger dig mer kontroll med

this

, gör objekt enklare att skapa och ger dig ett nytt sätt att arbeta med matrismetoder.

Införandet av pilfunktioner, tillsammans med många andra funktioner, i JavaScript ES6 visar hur viktigt JavaScript har blivit för webbutveckling. Det finns dock så mycket mer du kan göra.

Vill du lära dig mer om JavaScript? Lär dig dessa JavaScript -ramar. Plus, vår JavaScript fuskblad ger värdefull information och lär dig mer om hur JavaScript fungerar kan göra dig till en bättre utvecklare.

Dela med sig Dela med sig Tweet E-post 6 hörbara alternativ: De bästa gratis eller billiga ljudboksapparna

Om du inte vill betala för ljudböcker, här är några bra appar som låter dig lyssna på dem gratis och lagligt.

Läs Nästa Relaterade ämnen
  • Programmering
  • JavaScript
Om författaren Anthony Grant(40 artiklar publicerade)

Anthony Grant är frilansande skribent som täcker programmering och programvara. Han är en datavetenskap som sysslar med programmering, Excel, programvara och teknik.

Mer från Anthony Grant

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera