Funkcie šípok JavaScript vám môžu pomôcť stať sa lepším vývojárom

Reklama

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

Jednou z najpopulárnejších zmien bolo pridanie funkcií šípok do JavaScriptu. Funkcie šípok predstavujú nový spôsob písania výrazov funkcií jazyka JavaScript, ktorý vám ponúka dva rôzne spôsoby vytvárania funkcií vo vašej aplikácii.

Ak ste odborníkom na tradičné funkcie JavaScriptu, upravia sa funkcie šípok. Pozrime sa, čo to je, ako fungujú a ako vám prospievajú.

Čo sú to funkcie šípky JavaScriptu?

Funkcie šípok sú nový spôsob písania funkčných výrazov, ktoré boli zahrnuté vo vydaní JavaScriptu ES6 Čo je ES6 a čo programátori Javascriptu potrebujú vedieťES6 odkazuje na verziu 6 programovacieho jazyka ECMA Script (Javascript). Pozrime sa teraz na niektoré hlavné zmeny, ktoré ES6 prináša do JavaScriptu. Čítaj viac . Sú podobné výrazom funkcie JavaScript, ktoré ste používali, s niektorými mierne odlišnými pravidlami.

Funkcie šípok sú vždy anonymné funkcie, pre ktoré platia odlišné pravidlá totoa majú jednoduchšiu syntax ako tradičné funkcie.

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

=>

Ak ste niekedy pracovali v Pythone, tieto funkcie sú veľmi podobné Výrazy Python Lambda Príručka pre začiatočníkov k porozumeniu funkcií jazyka Python LambdaLambdy v Pythone sú jednou z najužitočnejších, najdôležitejších a najzaujímavejších funkcií, o ktorých by ste mali vedieť. Tu je návod, ako ich používať a prečo sú užitočné. Čítaj viac .

Syntax týchto funkcií je trochu čistejšia ako bežné funkcie. Nezabúdajte na niekoľko nových pravidiel:

• Kľúčové slovo funkcie sa odstráni
• Vrátené kľúčové slovo je voliteľné
• Zložené rovnátka sú voliteľné

Existuje veľa malých zmien, ktoré treba prekonať, takže začnime základným porovnaním funkčných výrazov.

Ako používať funkcie šípok

Funkcie šípok sa ľahko používajú. Pochopenie funkcií šípok je jednoduchšie pri porovnaní vedľa seba s tradičnými funkčnými výrazmi.

Toto je funkčný výraz, ktorý pridáva dve čísla; najprv použitím tradičnej funkčnej metódy:

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

Je to celkom jednoduchá funkcia, ktorá berie dva argumenty a vráti sumu.

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

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

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

Zložité zložené zátvorky a návratové kľúčové slovo sú stále k dispozícii. Sú voliteľné s funkciami šípok. Tu je ešte jednoduchší príklad rovnakej 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á predstavuje takmer polovicu kódu ako pôvodná funkcia. Rovnaký výsledok získate s oveľa menej napísaným kódom.

Existuje viac funkcií šípok. poďme sa hlbšie ponoriť, aby ste získali lepší pocit o tom, čo môžu robiť.

Funkcie šípky

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

Pravidelné funkcie

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

nech štvorček = x => x * x štvorec (2); >>4

Funkcie šípok nemôžu byť použité bez argumentov. Ak vo svojej funkcii nepoužívate žiadne argumenty, musíte použiť prázdne zátvorky.

nech helloFunction = () => Console.log („Ahoj čitateľ!“); helloFunction (); >> Ahoj čitateľ!

Jednoduché funkcie ako tieto používajú oveľa menej kódu. Predstavte si, ako oveľa jednoduchšie komplex projekt ako prezentácia JavaScriptu Ako vytvoriť prezentáciu JavaScript v 3 jednoduchých krokochDnes vám ukážem, ako zostaviť prezentáciu Javacript od nuly - poďme priamo do toho! Čítaj viac sa stane, keď budete mať jednoduchší spôsob písania funkcií.

Pomocou tohto

Koncept toto býva najkomplikovanejšou časťou používania JavaScriptu. Vytvoria sa funkcie šípok toto ľahšie sa používa.

Keď používate funkcie šípok toto bude definovaná uzatváracou funkciou. To môže spôsobiť problémy, ktoré sa objavia pri vytváraní vnorených funkcií a potrieb toto aplikovať 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; // Musíte to priradiť novej premennej that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

Priradenie hodnoty toto do premennej umožňuje, aby bol čitateľný, keď zavoláte funkciu vnútri svojej hlavnej funkcie. Je to chaotický, je to lepší spôsob, ako to dosiahnuť pomocou funkcií šípok.

funkcia Person () {this.age = 0; setInterval (() => {this.age ++; // Teraz môžete použiť „toto“ bez deklarovanej novej premennej}, 1000); }

Aj keď sú vynikajúce pre funkcie, nemali by sa používať na vytváranie metód vo vnútri objektu. Funkcia šípok nepoužíva správny rozsah toto.

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

nech pizza = { zálievky: 5, odstráňteČasti: () => {this.toppings--; } } // Pizzerský objekt s 5 zálievkami. > Pizza. >> {polevy: 5, odstrániťČasti: f} pizza.removeToppings (); // Metóda nebude s objektom nič robiť> pizzu. >> {zálivky: 5, removeToppings: f} // Stále obsahuje 5 zálievok.

Práca s poliami

Pomocou funkcií so šípkami môžete zjednodušiť kód používaný pri práci s metódami poľa. Polia a metódy poľa sú veľmi dôležité súčasti JavaScriptu 5 JavaScript Array metódy, ktoré by ste mali zvládnuť dnesChcete pochopiť polia jazyka JavaScript, ale nemôžete sa s nimi vysporiadať? Pokyny nájdete v našich príkladoch polí JavaScript. Čítaj viac takže ich budete veľa používať.

Existuje niekoľko užitočných metód, ako je pre metóda, ktorá spúšťa funkciu na všetkých prvkoch poľa a vracia nové pole.

nech myArray = [1,2,3,4]; myArray.map (function (element) { návratový prvok + 1; }); >> [2,3,4,5]

Je to celkom jednoduchá funkcia, ktorá pridáva jednu ku každej hodnote v poli. Rovnakú funkciu môžete napísať s menším kódom pomocou funkcie šípky.

nech myArray = [1,2,3,4]; myArray.map (element => { návratový prvok + 1; }); >> [2,3,4,5]

Čítanie je teraz omnoho ľahšie.

Vytváranie literálov objektov

Funkcie šípok sa dajú použiť na vytváranie literálov objektov v JavaScripte. Bežné funkcie ich môžu vytvoriť, 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 pomocou menšieho kódu. Pomocou zápisu so šípkou budete musieť zalomiť funkčné telo do zátvoriek. Tu je vylepšená syntax s funkciami šípok.

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

Funkcie šípky JavaScript a ďalej

Teraz viete niekoľko rôznych spôsobov, ako pomocou funkcií šípok JavaScript uľahčiť život vývojárom. Skracujú syntax, poskytujú vám väčšiu kontrolu nad používaním toto, uľahčujú vytváranie objektov a dávajú vám nový spôsob práce s metódami polí.

Zavedenie funkcií šípok spolu s mnohými ďalšími funkciami v skripte JavaScript ES6 ukazuje, aký dôležitý sa JavaScript stal pri vývoji webových aplikácií. Môžete však urobiť omnoho viac.

Chcete sa dozvedieť viac o JavaScripte? náš Cheat JavaScript JavaScript The Ultimate JavaScript Cheat SheetZískajte rýchly osviežujúci element v jazyku JavaScript pomocou tohto podvádzača. Čítaj viac poskytuje cenné informácie a dozvedie sa viac ako funguje JavaScript Čo je to JavaScript a ako to funguje?Ak sa učíte vývoj webových aplikácií, potrebujete vedieť o JavaScripte a o tom, ako to funguje s HTML a CSS. Čítaj viac môže z vás urobiť lepšieho vývojára.