JavaScript ES6 Funkce

V tomto kurzu se dozvíte o nové funkce v nejnovější verzi JavaScript.

co je ECMAScript 6 (nebo ES6)

ECMAScript 2015 (nebo ES6) je šesté a hlavní vydání standardu specifikace jazyka ECMAScript. Definuje standard pro implementaci JavaScriptu.

ES6 přinesl významné změny v jazyce JavaScript., Zavádí několik nových funkcí, jako je například, blok-scoped proměnné, nové smyčky pro iterace přes pole a objekty, šablony literály, a mnoho dalších vylepšení, aby se JavaScript programování jednodušší a více zábavy. V této kapitole budeme diskutovat o některé z nejlepších ES6 funkcí, které můžete použít ve svém každodenním kódování JavaScript.

Klíčové slovo let

ES6 představuje novélet Klíčové slovo pro deklaraci proměnných. Před ES6 byl jediným způsobem, jak deklarovat proměnnou v JavaScriptu, Klíčové slovo var., Uvidíme, jaký je mezi nimi rozdíl.

existují dva kritické rozdíly mezi var a let. Proměnné deklarované v var klíčové slovo je funkce rozsahem a vztyčena na vrcholu v rámci své působnosti, vzhledem k tomu, že proměnné deklarované v let klíčové slovo jsou blok-scoped ({}) a nejsou zvedla.

Block scoping jednoduše znamená, že mezi dvojicí složených závorek je vytvořen nový rozsah, tj. {}., Proto, pokud jste deklarovat proměnnou pomocí let klíčové slovo uvnitř smyčky, neexistuje vnější smyčky, jak je ukázáno v následujícím příkladu:

Jak můžete vidět ve výše uvedeném příkladu proměnná i v prvním bloku není přístupný mimo for smyčka. To nám také umožňuje znovu použít stejný název proměnné vícekrát, protože jeho rozsah je omezen na blok ({}), což má za následek menší deklaraci proměnné a čistší kód.,

Klíčové slovo const

novéconst Klíčové slovo umožňuje definovat konstanty. Konstanty jsou pouze pro čtení, nemůžete jim přiřadit nové hodnoty. Jsou také blokové jako let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

Nicméně, stále můžete změnit vlastnosti objektu, nebo prvky pole:

…Loop

nováfor...of loop nám umožňuje velmi snadno iterovat pole nebo jiné iterable objekty., Také kód uvnitř smyčky je proveden pro každý prvek iterable objektu. Zde je příklad:

for...of smyčka nefunguje s objekty, protože nejsou iterable. Pokud chcete iterovat vlastnosti objektu ,můžete použít smyčkufor-in.

Šablony Literály

Šablony literály poskytují snadný a čistý způsob, jak vytvořit multi-line řetězce a provést řetězec interpolace. Nyní můžeme vložit proměnné nebo výrazy do řetězce na jakémkoli místě bez jakýchkoli potíží.,

šablony literály jsou vytvořeny pomocí back-tick (` `) (grave accent) znak namísto obvyklých dvojitých nebo jednoduchých uvozovek. Proměnné nebo výrazy mohou být umístěny uvnitř řetězce pomocí syntaxe${...}. Porovnejte následující příklady a podívejte se, jak užitečné je:

zatímco v ES5 jsme museli něco takového napsat:

výchozí hodnoty pro funkční parametry

nyní můžete v ES6 zadat výchozí hodnoty parametrů funkce., To znamená, že pokud nejsou k dispozici žádné argumenty pro funkci, když se nazývá tyto výchozí hodnoty parametrů budou použity. Jedná se o jednu z nejočekávanějších funkcí v JavaScriptu. Zde je příklad:

Zatímco v ES5, aby se dosáhlo stejného museli jsme napsat něco jako toto:

Šipka Funkce

Šipka Funkce jsou další zajímavé funkce v ES6. Poskytuje stručnější syntaxi pro psaní funkčních výrazů výběrem functiona return klíčová slova.,

funkce šipek jsou definovány pomocí nové syntaxe, notace fat arrow (=>). Podívejme se, jak to vypadá:

jak vidíte, thre není function a return Klíčové slovo v deklaraci funkce šipky.

závorky můžete také přeskočit, tj. () v případě, že existuje přesně jeden parametr, ale vždy jej budete muset použít, pokud máte nulový nebo více než jeden parametr.,

navíc, pokud je v těle funkce více než jeden výraz, musíte jej zabalit ({}). V tomto případě musíte také použít příkaz return pro vrácení hodnoty.

existuje několik variant, jak můžete psát funkce šipek. Zde jsou nejčastěji používané:

existuje důležitý rozdíl mezi pravidelnými funkcemi a funkcemi šipky., Na rozdíl od normální funkce, šíp funkce nemá své vlastní this trvá this z vnější funkce, kde je definována. V JavaScriptu je this aktuální kontext provádění funkce.,

pochopit, jasně, pojďme podívejte se na následující příklady:

Přepisování stejný příklad pomocí ES6 šablony literály a šíp funkce:

Jak můžete jasně vidět, this klíčové slovo ve výše uvedeném příkladu se odkazuje na kontext, funkce obvodových arrow funkce, která je objektem Person (linka č.-9), na rozdíl od předchozího příkladu, kde se odkazuje na globální objekt Window (linka č.-9).

třídy

V ECMAScript 5 a starší třídy nikdy neexistovaly v JavaScriptu., Třídy jsou zavedeny v ES6, který vypadá podobně jako třídy v jiných objektově orientovaných jazycích, jako je Java, PHP, atd., nicméně nefungují přesně stejným způsobem. Třídy ES6 usnadňují vytváření objektů, implementují dědičnost pomocí klíčového slova extends a kód znovu použijí.

V ES6 můžete deklarovat třídu pomocí novéhoclass Klíčové slovo následované názvem třídy. Názvy konvenčních tříd jsou psány v Titulkupříklad (tj. kapitalizace prvního písmene každého slova).,

ve výše uvedeném příkladu Třída čtverce dědí z obdélníku pomocí klíčového slova extends. Třídy, které dědí z jiných tříd, se označují jako odvozené třídy nebo dětské třídy.

Také, musíte zavolat super() u dítěte konstruktoru třídy před přístupem kontextu (this)., Například, pokud vynecháte super() volat getArea() metoda na náměstí objekt, který bude mít za následek chybu, protože getArea() metody vyžadují přístup do this klíčové slovo.