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

Annons

JavaScript ES6 fö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 förändringarna var tillägget av pilfunktioner i JavaScript. Pilfunktioner är ett nytt sätt att skriva JavaScript-funktionsuttryck, vilket ger dig två olika sätt att skapa funktioner i din app.

Pilarfunktioner kräver lite justering om du är expert på traditionella JavaScript-funktioner. Låt oss titta på vad dessa är, hur de fungerar och hur de gynnar dig.

Vad är JavaScript-pilfunktioner?

Pilfunktioner är ett nytt sätt att skriva funktionella uttryck som var ingår i utgivningen av JavaScript ES6 Vad är ES6 och vad Javascript-programmerare behöver vetaES6 hänvisar till version 6 av ECMA Script (Javascript) programmeringsspråk. Låt oss nu titta på några större förändringar som ES6 medför till JavaScript. Läs mer . De liknar de JavaScript-uttryck du har använt med några olika regler.

Pilfunktioner är alltid anonyma funktioner, har olika regler för detta, och har en enklare syntax än traditionella funktioner.

Dessa funktioner använder en ny piltoken:

=>

Om du någonsin har arbetat i Python liknar dessa funktioner mycket Python Lambda-uttryck En nybörjarguide för att förstå Python Lambda-funktionerLambdas i Python är en av de mest användbara, viktiga och intressanta funktionerna att veta om. Så här använder du dem och varför de är användbara. Läs mer .

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

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

Det finns många små förändringar att gå igenom, 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å siffror; först med den traditionella funktionsmetoden:

 låt addnum = funktion (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:

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

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

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

låt addnum = (num1, num2) => num1 + num2;

Returtangenten och de lockiga hängslen är nu borta. Det som finns kvar är en mycket ren en-linjefunktion som är nästan hälften av koden som den ursprungliga funktionen. Du får samma resultat med mycket mindre skriftlig kod.

Det finns mer att 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 inkluderade.

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 parenteser.

låt kvadrat = x => x * x kvadrat (2); >>4

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

let helloFunction = () => Console.log ("Hej läsare!"); helloFunction (); >> Hej läsare!

Enkla funktioner som dessa använder mycket mindre kod. Föreställ dig hur mycket lättare ett komplex projekt som ett JavaScript-bildspel Hur man bygger ett JavaScript-bildspel i tre enkla stegIdag visar jag dig hur du bygger ett Javacript-bildspel från grunden - låt oss hoppa rätt in! Läs mer blir när du har ett enklare sätt att skriva funktioner.

Använda detta

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

När du använder pilfunktioner detta kommer att definieras av den bifogande funktionen. Detta kan skapa problem som dyker upp när du skapar kapslade funktioner och behov detta att applicera på din huvudfunktion

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

funktion Person () {var det = detta; // Du måste tilldela 'detta' till en ny variabel that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

Tilldela värdet på detta till en variabel gör den läsbar när du ringer en funktion inuti din huvudfunktion. Detta är rörigt, här är ett bättre sätt att göra detta med hjälp av pilfunktioner.

funktion Person () {this.age = 0; setInterval (() => {this.age ++; // Nu kan du använda 'detta' utan en ny variabel deklarerad}, 1000); }

De är bra för funktioner, men de bör inte användas för att skapa metoder i ett objekt. Pilfunktioner använder inte rätt scoping för detta.

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

låt pizza = { toppings: 5, removeToppings: () => {this.toppings--; } } // Ett pizzaobjekt med 5 pålägg. > Pizza. >> {toppings: 5, removeToppings: f} pizza.removeToppings (); // Metoden kommer inte att göra någonting mot objektet> pizza. >> {toppings: 5, removeToppings: f} // Har fortfarande 5 toppings.

Arbeta med matriser

Med hjälp av pilfunktioner kan du förenkla koden som används för att arbeta med matrismetoder. Matriser och matrismetoder är mycket viktiga delar av JavaScript 5 JavaScript-arraymetoder du bör behärska idagVill du förstå JavaScript-arrayer men inte klara dem? Kontrollera våra JavaScript-arrayexempel för vägledning. Läs mer 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.

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

Detta är en ganska enkel funktion som lägger till varje värde i matrisen. Du kan skriva samma funktion med mindre kod med hjälp av en pilfunktion.

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

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

Skapa objektlitteraturer

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

låt createObject = funktion createName (first, last) {return {first: first, last: last}; };

Du kan skapa samma objekt med en pilfunktion med mindre kod. Med hjälp av pilnotation måste du linda in funktionskroppen i parentes. Här är den förbättrade syntaxen med pilfunktioner.

låt createArrowObject = (first, last) => ({first: first, last: last});

JavaScript-pilfunktioner och bortom

Du känner nu till några olika sätt JavaScript-pilfunktioner gör ditt liv enklare som utvecklare. De förkortar syntaxen, ger dig mer kontroll med detta, göra objekt lättare att skapa och ge 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. Men det är så mycket mer du kan göra.

Vill du lära dig mer om JavaScript? Vår JavaScript-fuskark The Ultimate JavaScript Cheat SheetFå en snabb uppdatering av JavaScript-element med det här fusksidan. Läs mer ger värdefull information och lära sig mer om hur JavaScript fungerar Vad är JavaScript och hur fungerar det?Om du lär dig webbutveckling är det här du behöver veta om JavaScript och hur det fungerar med HTML och CSS. Läs mer kan göra dig till en bättre utvecklare.