JavaScript -pilefunktioner kan gøre dig til en bedre udvikler

JavaScript -pilefunktioner kan gøre dig til en bedre udvikler

JavaScript ES6 medførte spændende ændringer i verden af ​​webudvikling. Nye tilføjelser til JavaScript -sproget bragte nye muligheder.





En af de mere populære ændringer var tilføjelsen af ​​pilfunktioner til JavaScript. Pilfunktioner er en ny måde at skrive JavaScript -funktionsudtryk på, hvilket giver dig to forskellige måder at oprette funktioner i din app på.



Pilfunktioner kræver lidt justering, hvis du er ekspert i traditionelle JavaScript -funktioner. Lad os se på, hvad disse er, hvordan de fungerer, og hvordan de gavner dig.





Hvad er JavaScript -pilefunktioner?

Pilfunktioner er en ny måde at skrive funktionsudtryk på inkluderet i udgivelsen af ​​JavaScript ES6 . De ligner de JavaScript -funktionsudtryk, du har brugt, med nogle lidt forskellige regler.

Pilfunktioner er altid anonyme funktioner, har forskellige regler for



this

, og har en enklere syntaks end traditionelle funktioner.

bedste hdmi -kabel til 4k 2018

Disse funktioner bruger et nyt piltoken:



=>

Hvis du nogensinde har arbejdet i Python, ligner disse funktioner meget Python Lambda udtryk .

Syntaksen for disse funktioner er lidt renere end normale funktioner. Der er et par nye regler, du skal huske på:



  • Funktionsnøgleordet fjernes
  • Retursøgeordet er valgfrit
  • Krøllet seler er valgfri

Der er mange små ændringer at gå over, så lad os begynde med en grundlæggende sammenligning af funktionsudtryk.

Sådan bruges pilfunktioner

Pilefunktioner er lette at bruge. Det er lettere at forstå pilefunktioner, når det sammenlignes side om side med traditionelle funktionsudtryk.

Her er et funktionsudtryk, der tilføjer to tal; først ved hjælp af den traditionelle funktionsmetode:

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

Det er en ret simpel funktion, der tager to argumenter og returnerer summen.

Her er udtrykket ændret til en pilfunktion:

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

Funktionssyntaksen er ganske anderledes ved hjælp af en pilfunktion. Funktionsnøgleordet fjernes; pilen token lader JavaScript vide, at du skriver en funktion.

De krøllede seler og nøgleordet retur er der stadig. Disse er valgfri med pilefunktioner. Her er et endnu enklere eksempel på den samme funktion:

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

Retursøgeordet og de krøllede seler er nu væk. Tilbage er en meget ren enlinjefunktion, der er næsten halvdelen af ​​koden som den originale funktion. Du får det samme resultat med meget mindre skrevet kode.

Der er mere til pilefunktioner. lad os dykke dybere, så du får en bedre fornemmelse af, hvad de kan.

Pilfunktionsfunktioner

Pilefunktioner har mange forskellige anvendelser og funktioner inkluderet.

hvordan man skriver en professionel rapport

Regelmæssige funktioner

Pilefunktioner kan bruge et eller flere argumenter. Hvis du bruger to eller flere argumenter, skal du omslutte dem i parentes. Hvis du kun har et argument, behøver du ikke bruge parenteser.

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

Pilefunktioner kan bruges uden argumenter. Hvis du ikke bruger nogen argumenter i din funktion, skal du bruge tom parentes.

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

Enkle funktioner som disse bruger meget mindre kode. Forestil dig, hvor meget lettere et kompleks projekt som et JavaScript -diasshow bliver, når du har en enklere måde at skrive funktioner på.

Brug af denne

Begrebet

this

har en tendens til at være den vanskeligste del af at bruge JavaScript. Pilefunktioner gør

this

lettere at bruge.

Når du bruger pilfunktioner

this

vil blive defineret af den omsluttende funktion. Dette kan skabe problemer, der opstår, når du opretter indlejrede funktioner og behov

this

at anvende til din hovedfunktion

Her er et populært eksempel, der viser den løsning, du skal bruge med almindelige funktioner.

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

Tildeling af værdien af

this

til en variabel gør den læsbar, når du kalder en funktion inde i din hovedfunktion. Dette er rodet, her er en bedre måde at gøre dette ved hjælp af pilfunktioner.

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

Selvom de er gode til funktioner, bør de ikke bruges til at oprette metoder inde i et objekt. Pilefunktioner bruger ikke det rigtige omfang til

this

.

Her er et simpelt objekt, der skaber en metode inde ved hjælp af en pilfunktion. Metoden skal reducere toppings variabel med en, når den kaldes. I stedet virker det slet ikke.

hvordan man får osx på windows
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

Arbejde med arrays

Ved hjælp af pilfunktioner kan du forenkle den kode, der bruges til at arbejde med matrixmetoder. Arrays og array -metoder er meget vigtige dele af JavaScript så du vil bruge dem meget.

Der er nogle nyttige metoder som kort metode, der kører en funktion på alle elementer i et array og returnerer det nye array.

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

Dette er en ret simpel funktion, der tilføjer en til hver værdi i arrayet. Du kan skrive den samme funktion med mindre kode ved hjælp af en pilfunktion.

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

Det er meget lettere at læse nu.

Oprettelse af objektlitteratur

Pilfunktioner kan bruges til at oprette objektlitteraler i JavaScript. Almindelige funktioner kan oprette dem, men de er lidt længere.

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

Du kan lave det samme objekt med en pilfunktion ved hjælp af mindre kode. Ved hjælp af pilenotation skal du vikle funktionsdelen i parentes. Her er den forbedrede syntaks med pilefunktioner.

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

JavaScript -pilefunktioner og videre

Du kender nu nogle forskellige måder JavaScript -pilefunktioner gør dit liv lettere som udvikler. De forkorter syntaksen, giver dig mere kontrol ved hjælp af

this

, gør objekter lettere at oprette og giver dig en ny måde at arbejde med array -metoder på.

Indførelsen af ​​pilefunktioner sammen med mange andre funktioner i JavaScript ES6 viser, hvor vigtig JavaScript er blevet til webudvikling. Der er dog meget mere, du kan gøre.

Vil du lære mere om JavaScript? Lær disse JavaScript -rammer. Plus, vores JavaScript snydeblad giver værdifuld information og lærer mere om hvordan JavaScript fungerer kan gøre dig til en bedre udvikler.

Del Del Tweet E -mail 6 hørbare alternativer: De bedste gratis eller billige lydbogsapps

Hvis du ikke har lyst til at betale for lydbøger, her er nogle gode apps, der lader dig lytte til dem gratis og lovligt.

Læs Næste Relaterede emner
  • Programmering
  • JavaScript
Om forfatteren Anthony Grant(40 artikler udgivet)

Anthony Grant er freelance skribent om programmering og software. Han er en datalogi med stor fokus på programmering, Excel, software og teknologi.

Mere fra Anthony Grant

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere