Funkce šipek JavaScriptu vám mohou pomoci zlepšit vývojáře

reklama

JavaScript ES6 přinesl vzrušující změny do světa webového vývoje. Nové přírůstky do jazyka JavaScript přinesly nové možnosti.

Jednou z nejpopulárnějších změn bylo přidání funkcí šipek do JavaScriptu. Funkce šipek jsou novým způsobem, jak psát výrazy funkcí jazyka JavaScript, což vám dává dva různé způsoby vytváření funkcí v aplikaci.

Pokud jste odborníkem na tradiční funkce JavaScriptu, trochu se přizpůsobí funkce šipek. Pojďme se podívat, co to je, jak fungují a jak vám prospívají.

Co jsou funkce šipek JavaScript?

Funkce šipek jsou novým způsobem, jak psát výrazy funkcí, které byly součástí vydání JavaScriptu ES6 Co je ES6 a co potřebují programátoři Javascriptu vědětES6 odkazuje na verzi 6 programovacího jazyka ECMA Script (Javascript). Podívejme se nyní na některé významné změny, které ES6 přináší do JavaScriptu. Přečtěte si více . Jsou podobné výrazům funkce JavaScript, které jste používali, s některými mírně odlišnými pravidly.

Funkce šipek jsou vždy anonymní funkce, mají různá pravidla tento, a mají jednodušší syntaxi než tradiční funkce.

Tyto funkce používají nový token šipky:

=>

Pokud jste někdy pracovali v Pythonu, jsou tyto funkce velmi podobné Python Lambda výrazy Průvodce pro začátečníky k porozumění funkcím Python LambdaLambdy v Pythonu jsou jednou z nejužitečnějších, nejdůležitějších a nejzajímavějších funkcí, o kterých byste měli vědět. Zde je návod, jak je používat a proč jsou užitečné. Přečtěte si více .

Syntaxe těchto funkcí je o něco čistší než normální funkce. Je třeba mít na paměti několik nových pravidel:

• Klíčové slovo funkce je odstraněno
• Návratové klíčové slovo je volitelné
• Kudrnaté složené závorky jsou volitelné

Je zde spousta malých změn, takže začněme základním porovnáním funkčních výrazů.

Jak používat funkce šipek

Funkce šipek se snadno používají. Pochopení funkcí šipek je snazší, když jsou porovnány vedle sebe s tradičními funkčními výrazy.

Zde je funkční výraz, který přidává dvě čísla; nejprve pomocí metody tradiční funkce:

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

Je to docela jednoduchá funkce, která bere dva argumenty a vrací součet.

Zde je výraz změněn na funkci šipky:

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

Syntaxe funkce je zcela odlišná pomocí funkce šipky. Klíčové slovo funkce je odstraněno; token šipky informuje JavaScript, že píšete funkci.

Kudrnaté závorky a návratové klíčové slovo jsou stále k dispozici. Jsou volitelné s funkcí šipek. Zde je ještě jednodušší příklad stejné funkce:

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

Návratové klíčové slovo a složené závorky jsou nyní pryč. Zbývá velmi čistá jednořádková funkce, která je téměř polovinou kódu jako původní funkce. Stejný výsledek získáte s mnohem méně napsaným kódem.

Existuje více funkcí šipek. pojďme se ponořit hlouběji, abyste získali lepší pocit, co mohou dělat.

Funkce šipky

Funkce šipek mají mnoho různých použití a funkcí.

Pravidelné funkce

Funkce šipek mohou používat jeden nebo více argumentů. Pokud používáte dva nebo více argumentů, musíte je uvést v závorkách. Pokud máte pouze jeden argument, nemusíte používat závorky.

nechť čtverec = x => x * x čtverec (2); >>4

Funkce šipek lze použít bez argumentů. Pokud ve své funkci nepoužíváte žádné argumenty, musíte použít prázdnou závorku.

let helloFunction = () => Console.log ("Ahoj čtenáři!"); helloFunction (); >> Ahoj čtenáři!

Jednoduché funkce, jako jsou tyto, používají mnohem méně kódu. Představte si, jak snadnější je komplex projekt jako prezentace JavaScriptu Jak vytvořit prezentaci JavaScript ve 3 snadných krocíchDnes vám ukážu, jak sestavit Javacript slideshow od nuly - pojďme skočit přímo dovnitř! Přečtěte si více se stane, když máte jednodušší způsob psaní funkcí.

Pomocí tohoto

Koncept tento bývá nejzložitější součástí používání JavaScriptu. Funkce šipek tento snadnější použití.

Při použití funkcí se šipkami tento bude definována uzavírací funkcí. To může způsobit problémy, které se objeví, když vytvoříte vnořené funkce a potřebujete tento aplikovat na vaši hlavní funkci

Zde je populární příklad, který ukazuje řešení, které musíte použít s běžnými funkcemi.

function Person () {var that = this; // Musíte to přiřadit nové proměnné that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

Přiřazení hodnoty tento Díky proměnné je čitelná, když voláte funkci uvnitř vaší hlavní funkce. To je chaotický, tady je lepší způsob, jak toho dosáhnout pomocí funkcí šipek.

function Person () {this.age = 0; setInterval (() => {this.age ++; // Nyní můžete použít 'this' bez deklarované nové proměnné}, 1000); }

I když jsou skvělé pro funkce, neměly by se používat k vytváření metod uvnitř objektu. Funkce šipek nepoužívají správné vyhledávání tento.

Zde je jednoduchý objekt, který vytvoří metodu uvnitř pomocí funkce šipky. Metoda by měla snížit polevy při volání proměnná jedna. Místo toho to vůbec nefunguje.

ať pizza = { toppings: 5, removeToppings: () => {this.toppings--; } } // Objekt pizzy s 5 zálivkami. > pizza. >> {zálivky: 5, removeToppings: f} pizza.removeToppings (); // Metoda neudělá nic s objektem> pizza. >> {toppings: 5, removeToppings: f} // Stále má 5 zálivek.

Práce s poli

Pomocí funkcí šipek můžete zjednodušit kód používaný pro práci s metodami matic. Pole a metody pole jsou velmi důležité součásti JavaScriptu 5 JavaScript Array metody, které byste měli zvládnout dnesChcete porozumět polím jazyka JavaScript, ale nemůžete se s nimi vypořádat? Pokyny naleznete v našich příkladech pole JavaScriptu. Přečtěte si více takže je budete hodně používat.

Existuje několik užitečných metod, jako je mapa metoda, která spouští funkci na všech prvcích pole a vrací nové pole.

let myArray = [1,2,3,4]; myArray.map (funkce (prvek) { návratový prvek + 1; }); >> [2,3,4,5]

Toto je docela jednoduchá funkce, která přidává jednu ke každé hodnotě v poli. Stejnou funkci můžete napsat pomocí menšího kódu pomocí funkce šipky.

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

Nyní je mnohem snazší číst.

Vytváření literálů objektů

Funkce šipek lze použít k vytvoření literálů objektů v JavaScriptu. Běžné funkce je mohou vytvořit, ale jsou o něco déle.

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

Pomocí menšího kódu můžete vytvořit stejný objekt pomocí funkce šipky. Pomocí zápisu se šipkami budete muset zalomit funkční tělo do závorek. Zde je vylepšená syntaxe s funkcemi šipek.

nechte createArrowObject = (první, poslední) => ({první: první, poslední: poslední});

Funkce šipek JavaScript a dále

Nyní víte několik různých způsobů, jak funkce šipek JavaScript usnadňují život vývojáře. Zkracují syntaxi, díky čemuž mají větší kontrolu tento, usnadnit vytváření objektů a poskytnout vám nový způsob práce s metodami matic.

Zavedení funkcí se šipkami, spolu s mnoha dalšími funkcemi, v JavaScriptu ES6 ukazuje, jak důležitý se JavaScript stal ve vývoji webových aplikací. Je toho však ještě mnohem víc.

Chcete se dozvědět více o JavaScriptu? Náš JavaScript cheat sheet The Ultimate JavaScript Cheat SheetZískejte rychlý opakovací test na prvky JavaScript s tímto podvádět. Přečtěte si více poskytuje cenné informace a dozvědět se více o jak funguje JavaScript Co je to JavaScript a jak to funguje?Pokud se učíte vývoj webových aplikací, potřebujete vědět o JavaScriptu a o tom, jak to funguje s HTML a CSS. Přečtěte si více může z vás udělat lepšího vývojáře.