Funkce šipek JavaScript z vás mohou udělat lepšího vývojáře

Funkce šipek JavaScript z vás mohou udělat lepšího vývojáře

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. Arrow functions are new way to write JavaScript function expressions, giving you two different ways to create functions in your app.



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





Jaké jsou funkce šipky JavaScriptu?

Šipkové funkce jsou nový způsob zápisu výrazů funkcí, které byly součástí vydání JavaScriptu ES6 . Jsou podobné výrazům funkcí JavaScriptu, které používáte, s trochu odlišnými pravidly.

Arrow functions are always anonymous functions, have different rules for



this

, a mají jednodušší syntaxi než tradiční funkce.

Mohu hrát hry ps3 na svém ps4?

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



=>

Pokud jste někdy pracovali v Pythonu, jsou tyto funkce velmi podobné Výrazy Python Lambda .

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
  • Klíčové slovo return je nepovinné
  • Kudrnaté závorky jsou volitelné

Existuje mnoho malých změn, které je třeba projít, takže začněme základním porovnáním výrazů funkcí.

Jak používat šipkové funkce

Šipkové funkce se snadno používají. Porovnání funkcí šipek je snazší, když je porovnáte bok po boku s tradičními výrazy funkcí.

Zde je funkční výraz, který sčítá 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á vezme dva argumenty a vrátí 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 dává JavaScriptu vědět, že píšete funkci.

Kudrnaté závorky a návratové klíčové slovo stále existují. Ty jsou volitelné s funkcemi š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. Získáte stejný výsledek s mnohem méně napsaným kódem.

Šipkových funkcí je více. Pojďme se ponořit hlouběji, abyste měli lepší představu o tom, co mohou dělat.

Funkce funkce šipky

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

jak vytvořit vlastní snapchat filtr

Pravidelné funkce

Funkce šipek mohou používat jeden nebo více argumentů. Pokud používáte dva nebo více argumentů, musíte je uzavřít do závorek. Pokud máte pouze jeden argument, nemusíte používat závorky.

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

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

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

Jednoduché funkce, jako jsou tyto, používají mnohem méně kódu. Představte si, jak jednodušší je komplex projekt jako JavaScriptová prezentace nastane, když máte jednodušší způsob psaní funkcí.

Pomocí tohoto

Koncept

this

bývá nejsložitější částí používání JavaScriptu. Funkce šipek

this

snadnější použití.

Když používáte šipkové funkce

this

bude definována uzavírací funkcí. To může způsobit problémy, které se vyskytnou při vytváření vnořených funkcí a potřeb

this

použít 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; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Přiřazení hodnoty

this

na proměnnou je čitelná, když zavoláte funkci uvnitř vaší hlavní funkce. To je nepořádek, tady je lepší způsob, jak to udělat pomocí šipek.

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

I když jsou skvělé pro funkce, neměly by být použity k vytváření metod uvnitř objektu. Funkce šipek nepoužívají správné rozsahy

this

.

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

bezplatné aplikace pro slovní hry pro Android
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áce s poli

Pomocí funkcí šipek můžete zjednodušit kód používaný pro práci s metodami pole. Pole a metody pole jsou velmi důležitou součástí JavaScriptu takže je budete hodně využí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(function(element){
return element + 1;
});
>> [2,3,4,5]

Jedná se o velmi jednoduchou funkci, která přidává jednu ke každé hodnotě v poli. Pomocí funkce šipky můžete napsat stejnou funkci s menším počtem kódů.

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

Teď se to čte mnohem snáz.

Vytváření objektových literálů

K vytváření literálů objektu v JavaScriptu lze použít šipkové funkce. Běžné funkce je mohou vytvořit, ale jsou trochu delší.

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

Stejný objekt můžete vytvořit pomocí funkce šipky s použitím menšího počtu kódů. Pomocí šipkového zápisu budete muset zabalit tělo funkce do závorek. Zde je vylepšená syntaxe s funkcemi šipek.

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

Funkce šipky JavaScriptu a další

Nyní znáte několik různých způsobů, jak vám funkce šipek JavaScript usnadňují život vývojáře. Zkracují syntaxi, dávají vám větší kontrolu pomocí

this

, usnadní vytváření objektů a poskytne vám nový způsob práce s metodami pole.

Zavedení funkcí šipek spolu s mnoha dalšími funkcemi v JavaScriptu ES6 ukazuje, jak důležitý je JavaScript ve vývoji webu. Je toho ale mnohem víc, co můžete udělat.

Chcete se dozvědět více o JavaScriptu? Naučte se tyto rámce JavaScript. Navíc naše Podváděcí list JavaScript poskytuje cenné informace a dozvíte se o nich více jak JavaScript funguje z vás může udělat lepšího vývojáře.

Podíl Podíl tweet E-mailem 6 zvukových alternativ: Nejlepší bezplatné nebo levné aplikace pro audioknihy

Pokud vás nebaví platit za audioknihy, zde je několik skvělých aplikací, které vám umožní poslouchat je zdarma a legálně.

Číst dále Související témata
  • Programování
  • JavaScript
O autorovi Anthony Grant(40 článků zveřejněno)

Anthony Grant je autor na volné noze pokrývající programování a software. Je počítačovým vědcem, který se zabývá programováním, Excelem, softwarem a technologiemi.

Více od Anthonyho Granta

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru