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

Reklame

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

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

Pilefunktioner 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 er til gavn for dig.

Hvad er JavaScript-pilefunktioner?

Pilefunktioner er en ny måde at skrive funktionsudtryk, der var inkluderet i frigivelsen af ​​JavaScript ES6 Hvad er ES6 og hvad Javascript-programmerere har brug for at videES6 henviser til version 6 af ECMA Script (Javascript) programmeringssprog. Lad os nu se på nogle større ændringer, som ES6 bringer til JavaScript. Læs mere . De ligner de JavaScript-udtryk, du har brugt, med nogle lidt forskellige regler.

Pilefunktioner er altid anonyme funktioner, har forskellige regler for

dette, og har en enklere syntaks end traditionelle funktioner.

Disse funktioner bruger en ny piltoken:

=>

Hvis du nogensinde har arbejdet i Python, ligner disse funktioner meget Python Lambda-udtryk En begyndervejledning til forståelse af Python Lambda-funktionerLambdas i Python er en af ​​de mest nyttige, vigtige og interessante funktioner at vide om. Her er, hvordan du bruger dem, og hvorfor de er nyttige. Læs mere .

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

• Funktionsnøgleordet fjernes
• Returnøgleordet er valgfrit
• Krøllede 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 pilefunktioner

Pilefunktioner er lette at bruge. At forstå pilefunktioner er lettere, når man sammenligner side om side med traditionelle funktionsudtryk.

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

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

Det er en temmelig enkel funktion, der tager to argumenter og returnerer summen.

Her er udtrykket ændret til en pilefunktion:

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

Funktionssyntaxen er ganske forskellig ved hjælp af en pilefunktion. Funktionsnøgleordet fjernes; piltoken lader JavaScript vide, at du skriver en funktion.

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

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

Returnøgleordet og de krøllede seler er nu væk. Hvad der er tilbage er en meget ren en-linjefunktion, der er næsten halvdelen af ​​koden som den originale funktion. Du får det samme resultat med langt mindre skrevet kode.

Der er flere pilefunktioner. lad os dykke dybere, så du får en bedre fornemmelse af, hvad de kan gøre.

Pilefunktionsfunktioner

Pilefunktioner har mange forskellige anvendelser og funktioner inkluderet.

Regelmæssige funktioner

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

lad firkant = x => x * x firkant (2); >>4

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

lad helloFunction = () => Console.log ("Hej læser!"); helloFunction (); >> Hej læser!

Enkle funktioner som disse bruger langt mindre kode. Forestil dig, hvor meget lettere et kompleks er projekt som et JavaScript-slideshow Sådan oprettes et JavaScript-lysbilledshow i 3 nemme trinI dag viser jeg dig, hvordan du opbygger et Javacript-slideshow fra bunden af ​​- lad os hoppe lige ind! Læs mere bliver når du har en enklere måde at skrive funktioner på.

Brug af dette

Begrebet dette har en tendens til at være den vanskeligste del af at bruge JavaScript. Pil-funktioner foretages dette lettere at bruge.

Når du bruger pilefunktioner dette defineres af den lukkende funktion. Dette kan skabe problemer, der dukker op, når du opretter indlejrede funktioner og behov dette at anvende til din hovedfunktion

Her er et populært eksempel, der viser den løsning, du skal bruge til regelmæssige funktioner.

funktion Person () {var det = dette; // Du skal tildele 'dette' til en ny variabel that.age = 0; setInterval (funktion growUp () {that.age ++; }, 1000); }

Tildeling af værdien af dette 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 pilefunktioner.

funktion Person () {this.age = 0; setInterval (() => {this.age ++; // Nu kan du bruge 'dette' uden en ny variabel deklareret}, 1000); }

Selvom de er fantastiske til funktioner, skal de ikke bruges til at oprette metoder inde i et objekt. Pilefunktioner bruger ikke den rigtige scoping til dette.

Her er et simpelt objekt, der opretter en metode inde ved hjælp af en pilefunktion. Metoden skal reducere toppings variabel efter en, når den kaldes. I stedet fungerer det slet ikke.

lad pizza = { toppings: 5, removeToppings: () => {this.toppings--; } } // En pizza-genstand med 5 topfraktioner. > Pizza. >> {toppings: 5, removeToppings: f} pizza.removeToppings (); // Metoden vil ikke gøre noget for objektet> pizza. >> {toppings: 5, removeToppings: f} // Har stadig 5 toppings.

Arbejde med matriser

Ved hjælp af pilefunktioner kan du forenkle koden, der bruges til at arbejde med matrixmetoder. Arrays og matrixmetoder er meget vigtige dele af JavaScript 5 JavaScript-arraymetoder, du skal mestre i dagVil du forstå JavaScript-matriser, men ikke få fat på dem? Se vores JavaScript-arrayeksempler for vejledning. Læs mere så du vil bruge dem meget.

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

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

Dette er en temmelig enkel funktion, der tilføjer en til enhver værdi i matrixen. Du kan skrive den samme funktion med mindre kode ved hjælp af en pilefunktion.

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

Det er meget lettere at læse nu.

Oprettelse af objektlitterære

Pilefunktioner kan bruges til at oprette objektlitterære i JavaScript. Regelmæssige funktioner kan oprette dem, men de er lidt længere.

lad createObject = funktion createName (første, sidste) {return {first: first, last: last}; };

Du kan oprette det samme objekt med en pilefunktion ved hjælp af mindre kode. Ved hjælp af pilenotation skal du pakke funktionskroppen i parentes. Her er den forbedrede syntaks med pilefunktioner.

lad createArrowObject = (første, sidste) => ({første: første, sidste: sidste});

JavaScript-pilefunktioner og videre

Du kender nu nogle forskellige måder JavaScript-pilfunktioner gør dit liv lettere som udvikler. De forkorter syntaks, giver dig mere kontrol ved hjælp af dette, gør objekter lettere at oprette og give dig en ny måde at arbejde med matrixmetoder på.

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

Vil du lære mere om JavaScript? Vores JavaScript snyder ark Det ultimative JavaScript snyderiFå en hurtig opdatering af JavaScript-elementer med dette snyderi. Læs mere giver værdifuld information og lærer mere om hvordan JavaScript fungerer Hvad er JavaScript, og hvordan fungerer det?Hvis du lærer webudvikling, her er det, du har brug for at vide om JavaScript, og hvordan det fungerer med HTML og CSS. Læs mere kan gøre dig til en bedre udvikler.