Funkcije strelice JavaScript mogu vas učiniti boljim programerima

Funkcije strelice JavaScript mogu vas učiniti boljim programerima

JavaScript ES6 donio je uzbudljive promjene u svijet web razvoja. Novi dodaci jeziku JavaScript donijeli su nove mogućnosti.





Jedna od popularnijih promjena bila je dodavanje funkcija strelica u JavaScript. Funkcije sa strelicama novi su način pisanja izraza JavaScript funkcija, koji vam daje dva različita načina za stvaranje funkcija u vašoj aplikaciji.



Funkcije strelica zahtijevaju malo prilagodbe ako ste stručnjak za tradicionalne JavaScript funkcije. Pogledajmo što su to, kako rade i kako vam koriste.





Što su JavaScript strelice?

Funkcije strelica novi su način pisanja izraza funkcija koji su bili uključeno u izdanje JavaScript ES6 . Oni su slični izrazima JavaScript funkcije koje ste koristili, s nekim malo drugačijim pravilima.

Funkcije strelica uvijek su anonimne, imaju različita pravila za



this

, i imaju jednostavniju sintaksu od tradicionalnih funkcija.

tipkovnica mog prijenosnog računala ne radi

Ove funkcije koriste novi token strelice:



=>

Ako ste ikada radili u Pythonu, ove su funkcije vrlo slične Python lambda izrazi .

Sintaksa ovih funkcija je malo čistija od normalnih funkcija. Imajte na umu nekoliko novih pravila:



  • Ključna riječ function je uklonjena
  • Ključna riječ return nije obavezna
  • Kovrčave zagrade su izborne

Mnogo je malih promjena koje treba prijeći, pa počnimo s osnovnom usporedbom izraza funkcija.

Kako koristiti funkcije strelica

Funkcije strelica su jednostavne za korištenje. Razumijevanje funkcija strelica lakše je u usporedbi s tradicionalnim izrazima funkcija.

Ovdje je izraz funkcije koji dodaje dva broja; prvo koristeći tradicionalnu metodu funkcije:

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

To je prilično jednostavna funkcija koja uzima dva argumenta i vraća zbroj.

Evo izraza promijenjenog u funkciju strelice:

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

Sintaksa funkcije je sasvim drugačija pomoću funkcije strelice. Ključna riječ function je uklonjena; token strelice omogućuje JavaScript -u da zna da pišete funkciju.

Kovrčavi zagrada i ključna riječ return još uvijek postoje. Ove su opcije izborne sa funkcijama strelica. Evo još jednostavnijeg primjera iste funkcije:

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

Ključna riječ return i uvijeni zagradi sada su nestali. Ostala je vrlo čista jednoredna funkcija koja je gotovo polovica koda kao izvorna funkcija. Dobivate isti rezultat s mnogo manje napisanog koda.

Funkcije strelica imaju još mnogo toga. zaronimo dublje kako biste bolje osjetili što mogu učiniti.

Značajke funkcije strelice

Funkcije strelica imaju mnogo različitih upotreba i značajki.

neka Windows 10 izgleda kao linux

Redovne funkcije

Funkcije strelica mogu koristiti jedan ili više argumenata. Ako koristite dva ili više argumenata, morate ih staviti u zagrade. Ako imate samo jedan argument, ne morate koristiti zagrade.

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

Funkcije strelica mogu se koristiti bez argumenata. Ako ne koristite argumente u svojoj funkciji, morate koristiti prazne zagrade.

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

Jednostavne funkcije poput ovih koriste mnogo manje koda. Zamislite koliko je kompleks lakši projekt poput JavaScript prezentacije postaje kada imate jednostavniji način pisanja funkcija.

Koristeći ovo

Koncept

this

ima tendenciju biti najteži dio korištenja JavaScripta. Funkcije strelica čine

this

lakši za korištenje.

Kada koristite funkcije strelica

this

definirat će funkcija zatvaranja. To može stvoriti probleme koji nastaju kada stvorite ugniježđene funkcije i potrebe

this

primijeniti na svoju glavnu funkciju

Evo popularnog primjera koji prikazuje zaobilazno rješenje koje morate koristiti s redovitim funkcijama.

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

Dodjeljivanje vrijednosti

this

varijabli čini čitljivom kada pozovete funkciju unutar svoje glavne funkcije. Ovo je neuredno, evo boljeg načina da to učinite pomoću funkcija strelica.

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

Iako su odlične za funkcije, ne smiju se koristiti za stvaranje metoda unutar objekta. Funkcije strelica ne koriste pravi opseg za

this

.

Evo jednostavnog objekta koji stvara metodu unutar pomoću funkcije strelice. Metoda bi trebala smanjiti preljevi promjenjiva po jedna kad se pozove. Umjesto toga, uopće ne radi.

kako uključiti način rada u zrakoplovu na mac -u
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

Rad s nizovima

Pomoću funkcija sa strelicama možete pojednostaviti kôd koji se koristi za rad s metodama polja. Nizovi i metode polja vrlo su važni dijelovi JavaScripta pa ćete ih puno koristiti.

Postoje neke korisne metode poput karta metoda koja pokreće funkciju na svim elementima niza i vraća novi niz.

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

Ovo je prilično jednostavna funkcija koja dodaje jednu svakoj vrijednosti u nizu. Istu funkciju možete napisati s manje koda pomoću funkcije strelice.

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

Sada je mnogo lakše čitati.

Stvaranje literalnih objekata

Funkcije strelica mogu se koristiti za stvaranje literala objekta u JavaScriptu. Regularne funkcije ih mogu stvoriti, ali su malo duže.

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

Možete napraviti isti objekt sa funkcijom strelice koristeći manje koda. Pomoću oznaka sa strelicama tijelo funkcije morate umotati u zagrade. Evo poboljšane sintakse sa funkcijama strelica.

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

JavaScript strelice i dalje

Sada znate neke različite načine na koje JavaScript funkcije sa strelicama olakšavaju vaš život kao razvojnom programeru. Skraćuju sintaksu, daju vam veću kontrolu korištenja

this

, olakšavaju stvaranje objekata i daju vam novi način rada s metodama polja.

Uvođenje funkcija sa strelicama, zajedno sa mnogim drugim značajkama, u JavaScriptu ES6 pokazuje koliko je JavaScript postao važan u web razvoju. Ipak, postoji još mnogo toga što možete učiniti.

Želite li saznati više o JavaScriptu? Naučite ove JavaScript okvire. Plus, naš JavaScript varalica pruža vrijedne informacije i saznaje više o tome kako JavaScript funkcionira može vas učiniti boljim programerom.

Udio Udio Cvrkut E -pošta 6 zvučnih alternativa: najbolje besplatne ili jeftine aplikacije za audio knjige

Ako ne volite plaćati audioknjige, evo nekoliko sjajnih aplikacija koje vam omogućuju besplatno i legalno slušanje.

Pročitajte Dalje Povezane teme
  • Programiranje
  • JavaScript
O autoru Anthony Grant(Objavljeno 40 članaka)

Anthony Grant je slobodni pisac koji se bavi programiranjem i softverom. On je glavni informatičar koji se bavi programiranjem, Excelom, softverom i tehnologijom.

Više od Anthonyja Granta

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu