Funkcie šípky JavaScript z vás môžu urobiť lepšieho vývojára

Funkcie šípky JavaScript z vás môžu urobiť lepšieho vývojára

JavaScript ES6 priniesol vzrušujúce zmeny do sveta webového vývoja. Nové prírastky do jazyka JavaScript priniesli nové možnosti.





Jednou z obľúbenejších zmien bolo pridanie funkcií šípok do JavaScriptu. Funkcie šípok sú novým spôsobom písania výrazov funkcií JavaScriptu, ktoré vám poskytujú dva rôzne spôsoby vytvárania funkcií vo vašej aplikácii.



Funkcie šípok vyžadujú trochu prispôsobenia, ak ste odborníkom na tradičné funkcie JavaScriptu. Poďme sa pozrieť na to, čo to je, ako fungujú a ako vám prinášajú úžitok.





Aké sú funkcie šípky JavaScript?

Funkcie šípok sú novým spôsobom zápisu výrazov funkcií, ktoré boli zahrnuté vo vydaní JavaScriptu ES6 . Sú podobné výrazom funkcií JavaScriptu, ktoré používate, s niekoľkými mierne odlišnými pravidlami.

Funkcie šípok sú vždy anonymné funkcie, pre ktoré majú iné pravidlá



this

, a majú jednoduchšiu syntax ako tradičné funkcie.

ako nasadiť remienok na hodinky Apple

Tieto funkcie používajú nový token šípky:



=>

Ak ste niekedy pracovali v Pythone, tieto funkcie sú veľmi podobné Výrazy Python Lambda .

Syntax týchto funkcií je o niečo čistejšia ako bežné funkcie. Je potrebné mať na pamäti niekoľko nových pravidiel:



  • Kľúčové slovo funkcie je odstránené
  • Kľúčové slovo return je voliteľné
  • Kučeravé zátvorky sú voliteľné

Existuje veľa malých zmien, ktoré je potrebné prejsť, takže začnime so základným porovnaním výrazov funkcií.

Ako používať šípkové funkcie

Funkcie šípok sa ľahko používajú. Pochopenie funkcií šípok je jednoduchšie, keď ich porovnáte bok po boku s tradičnými výrazmi funkcií.

Tu je funkčný výraz, ktorý sčíta dve čísla; najskôr pomocou metódy tradičnej funkcie:

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

Je to veľmi jednoduchá funkcia, ktorá používa dva argumenty a vráti súčet.

Tu je výraz zmenený na funkciu šípky:

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

Syntax funkcie je pomocou funkcie šípky úplne odlišná. Kľúčové slovo funkcie je odstránené; token so šípkou informuje JavaScript, že píšete funkciu.

Kučeravé zátvorky a návratové kľúčové slovo stále existujú. Tieto sú voliteľné s funkciami šípok. Tu je ešte jednoduchší príklad tej istej funkcie:

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

Návratové kľúčové slovo a zložené zátvorky sú teraz preč. Zostáva veľmi čistá jednoriadková funkcia, ktorá je takmer polovicou kódu ako pôvodná funkcia. Rovnaký výsledok získate s oveľa menším počtom napísaných kódov.

Funkcií šípok je viac. ponorme sa hlbšie, aby ste mali lepší pocit z toho, čo môžu robiť.

Funkcie funkcie šípky

Funkcie šípok majú mnoho rôznych použití a zahrnutých funkcií.

ako urobiť snímku obrazovky na Microsoft povrchu

Pravidelné funkcie

Funkcie šípok môžu používať jeden alebo viac argumentov. Ak používate dva alebo viac argumentov, musíte ich uzavrieť do zátvorky. Ak máte iba jeden argument, nemusíte používať zátvorky.

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

Funkcie šípok je možné použiť bez argumentov. Ak vo svojej funkcii nepoužívate žiadne argumenty, musíte použiť prázdnu zátvorku.

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

Jednoduché funkcie, ako sú tieto, používajú oveľa menej kódu. Predstavte si, o koľko jednoduchšie je komplex projekt ako prezentácia JavaScript nastane, keď máte jednoduchší spôsob písania funkcií.

Použitie tohto

Koncept

this

býva najnáročnejšou súčasťou používania JavaScriptu. Šípkové funkcie robia

this

jednoduchšie použitie.

Keď používate funkcie šípok

this

bude definovaná uzatváracou funkciou. To môže spôsobiť problémy, ktoré sa vyskytnú pri vytváraní vnorených funkcií a potrieb

this

použiť na svoju hlavnú funkciu

Toto je populárny príklad, ktorý ukazuje riešenie, ktoré musíte použiť s bežnými funkciami.

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

Priradenie hodnoty

this

na premennú ju robí čitateľnou, keď zavoláte funkciu vo svojej hlavnej funkcii. Je to chaotický, toto je lepší spôsob, ako to urobiť pomocou funkcií šípok.

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

Aj keď sú skvelé pre funkcie, nemali by sa používať na vytváranie metód vo vnútri objektu. Funkcie šípok nepoužívajú správne rozsahy

this

.

Toto je jednoduchý objekt, ktorý vo vnútri vytvára metódu pomocou funkcie šípky. Metóda by mala znížiť polevy premenná po jednej pri volaní. Namiesto toho to nefunguje vôbec.

zvýraznený komentár na youtube
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

Práca s poliami

Pomocou šípkových funkcií môžete zjednodušiť kód používaný na prácu s metódami poľa. Polia a metódy poľa sú veľmi dôležitou súčasťou JavaScriptu takže ich budete veľa využívať.

Existuje niekoľko užitočných metód, ako napríklad mapu metóda, ktorá spustí funkciu na všetkých prvkoch poľa a vráti nové pole.

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

Jedná sa o veľmi jednoduchú funkciu, ktorá pridáva jednu ku každej hodnote v poli. Pomocou funkcie šípky môžete písať rovnakú funkciu s menším počtom kódov.

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

Teraz sa to číta oveľa jednoduchšie.

Vytváranie objektových literálov

Na vytvorenie literálov objektu v JavaScripte je možné použiť funkcie šípok. Bežné funkcie ich môžu vytvárať, ale sú o niečo dlhšie.

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

Rovnaký objekt môžete vytvoriť pomocou funkcie šípky s použitím menšieho kódu. Pomocou noty so šípkami budete musieť telo funkcie zabaliť do zátvorky. Tu je vylepšená syntax s funkciami šípok.

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

Funkcie šípky JavaScript a ďalšie

Teraz poznáte niekoľko rôznych spôsobov, ako vám funkcie šípok v jazyku JavaScript uľahčujú život vývojára. Skracujú syntax, umožňujú vám väčšiu kontrolu nad používaním

this

, uľahčite vytváranie objektov a poskytne vám nový spôsob práce s metódami poľa.

Zavedenie šípkových funkcií spolu s mnohými ďalšími funkciami v JavaScripte ES6 ukazuje, aký dôležitý je JavaScript vo vývoji webových aplikácií. Existuje však oveľa viac, čo môžete urobiť.

Chcete sa dozvedieť viac o JavaScripte? Naučte sa tieto rámce JavaScript. Navyše náš Podvádzací list JavaScript poskytuje cenné informácie a dozviete sa o nich viac ako JavaScript funguje z vás môže urobiť lepšieho vývojára.

zdieľam zdieľam Tweet E -mail 6 zvukových alternatív: najlepšie bezplatné alebo lacné aplikácie pre zvukové knihy

Ak nechcete platiť za audioknihy, tu je niekoľko skvelých aplikácií, ktoré vám umožnia počúvať ich bezplatne a legálne.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • JavaScript
O autorovi Anthony Grant(40 publikovaných článkov)

Anthony Grant je nezávislý autor, ktorý sa zaoberá programovaním a softvérom. Je odborníkom v oblasti informatiky, ktorý sa zaoberá programovaním, programom Excel, softvérom a technológiami.

Viac od Anthonyho Granta

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber