JavaScript ES6 přináší novou syntaxi a nové úžasné funkce, aby se váš kód modernější a čitelnější. To vám umožní psát méně kódu a dělat více. ES6 nás seznamuje s mnoha skvělými funkcemi, jako jsou funkce šipek, řetězce šablon, ničení tříd, moduly… a další. Pojďme se podívat.

const a let

const je nové klíčové slovo v ES6 pro deklaraci proměnných. const je silnější než var. Jakmile je proměnná použita, nelze ji znovu přiřadit., Jinými slovy, je to neměnná proměnná, s výjimkou případů, kdy se používá s objekty.

to je opravdu užitečné pro cílení na selektory. Například, když jsme mít jediné tlačítko, které spustí událost, nebo když chcete vybrat prvek HTML v Javascriptu, použít const místo var. Je to proto, že var je „zvednutý“. Vždy je vhodnější použít const, když nechcete proměnnou znovu přiřadit .,

ve výše uvedeném kódu se const nezmění a nelze jej přeřadit. Pokud se pokusíte dát novou hodnotu, vrátí vám chybu.

let může být přeřazen a přijmout nové hodnoty. Vytváří proměnnou proměnnou.

let je stejný jako const v tom, že oba jsou blokovány-rozsah. To znamená, že proměnná je k dispozici pouze v rámci svého rozsahu.,

funkce šipky

funkce šipky je opravdu úžasná a dělá váš kód čitelnější, strukturovanější a vypadá jako moderní kód. Místo toho, pomocí tohoto:

Použití:

Jak vidíte, šipka funkce se zdá být více čitelné a čisté! Už nebudete muset používat starou syntaxi.

Také můžete použít Šipky funkce s map filter reduce vestavěné funkce.,

mapa funkce s šípy vypadá více jasné a čitelné než map v ES5. S ES6 můžete psát kratší a chytřejší kód. Totéž můžete použít s filter a reduce.

šablony literály

šablony literály nebo šablony řetězce jsou docela v pohodě. Nemusíme používat operátor plus ( + ) k zřetězení řetězců, nebo když chceme použít proměnnou uvnitř řetězce.,

staré syntaxe:

S novou ES6 syntaxe:

Tak jednoduché! Je to opravdu obrovský rozdíl mezi starou syntaxí a ES6. Při hraní s řetězci vypadá doslovný řetězec v ES6 organizovanější a dobře strukturovaný než ES5.

výchozí parametry

když pracuji v PHP, obvykle používám výchozí parametry. Ty vám umožní předem definovat parametr.,

takže, když zapomenete napsat parametr, nevrátí nedefinovanou chybu, protože parametr je již definován ve výchozím nastavení. Takže když spustíte funkci se zmeškaným parametrem, bude mít hodnotu výchozího parametru t a nevrátí chybu!

Podívejte se na tento příklad:

funkce nad vrátí undefined, protože zapomněli jsme dát druhý parametr age.,

ale pokud jsme použili výchozí parametr, nevrátí se nedefinovaný a použije jeho hodnotu, když zapomeneme přiřadit parametr!

Jak vidíte, funkce vrátí hodnotu, i když nám chyběl druhý parametr. Nyní s výchozím parametrem můžeme chybu zvládnout předem.

pole a ničení objektů

zničení usnadňuje přiřazení hodnot pole nebo objektu nové proměnné.,

staré syntaxe:

S ES6 syntaxe:

S ES5, musíme přiřadit jednotlivé hodnoty pro každou proměnnou. S ES6 jsme právě vložili naše hodnoty do kudrnatých závorek, abychom získali jakoukoli vlastnost objektu.

Poznámka: pokud přiřadíte proměnnou, která není totožná s názvem Vlastnosti, vrátí se Nedefinovaná. Pokud je například název vlastnosti name a přiřadíme ji proměnné username, vrátí se Nedefinovaná.,

vždy musíme pojmenovat proměnnou stejnou jako název vlastnosti. Ale v případě, že chceme proměnnou přejmenovat, můžeme místo toho použít dvojtečku :.

pro pole používáme stejnou syntaxi jako objekt. Musíme jen nahradit kudrnaté konzoly hranatými závorkami.

Import a export

Pomocí import export v JavaScript aplikace dělá to silnější., Umožňují vytvářet samostatné a opakovaně použitelné komponenty.

Pokud jste obeznámeni s případnými JavaScript MVC framework, uvidíte, že se pomocí import export zvládnout komponenty většinu času. Jak tedy skutečně fungují?

je to jednoduché! export umožňuje exportovat modul pro použití v jiné komponentě JavaScript. Pro import tohoto modulu používáme import pro jeho použití v naší komponentě.

například máme dva soubory., První je pojmenována detailComponent.js a druhá je pojmenována homeComponent.js.

v detailComponent.jsbudeme exportovat funkci detail.

A chceme-li použít tuto funkci v homeComponent.js, budeme stačí použít import.

chceme-Li importovat více než jeden modul, můžeme jen dát je do složených závorek.,

tak cool, že?!

sliby

sliby jsou novou funkcí ES6. Je to metoda pro zápis asynchronního kódu. Může být použit, když například chceme načíst data z API, nebo když máme funkci, která vyžaduje čas, aby byla provedena. Sliby usnadňují řešení problému, takže vytvoříme náš první slib!

Pokud se přihlásíte konzole, vrátí slib. Pokud tedy chceme po načtení dat spustit funkci, použijeme slib., Slib má dva parametry: resolve a reject pro zpracování očekávané chyby.

Poznámka: Funkce načtení vrací slib sám!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

Nyní, pokud se přihlásíte konzole vrátí řadu dat.

Rest parametr a Spread operator

Ostatní parametry se používají k získání argumentu pole a vrácení nového pole.,

šíření operátor má stejnou syntaxi jako zbytek parametr, ale šíření provozovatel bere Pole sám a ne jen argumenty. Parametr Spread můžeme použít k získání hodnot pole namísto použití smyčky pro nebo jiné metody.

třídy

třídy jsou jádrem objektově orientovaného programování (OOP). Dělají váš kód bezpečnější a zapouzdřené. Použití tříd dává vašemu kódu pěknou strukturu a udržuje ji orientovanou.,

vytvořit třídu, použijte class klíčové slovo, za nímž následuje název třídy s dvěma složené závorky.

Nyní můžeme vstoupit do class metody a vlastnosti pomocí new klíčové slovo.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

dědit z jiné třídy, použijte extends klíčové slovo, za nímž následuje název třídy, kterou chcete dědit.,

o třídách se můžete dozvědět více zde.

ES6 má další úžasné funkce-můžete je prozkoumat zde.

závěr

doufám, že jste tento článek považovali za užitečný a doufám, že jsem vám mohl představit některé funkce ES6. Pokud ano, přihlaste se k odběru tohoto e-mailového seznamu a dozvíte se více o předních tématech. Díky za váš čas.

mimochodem, nedávno jsem pracoval se silnou skupinou softwarových inženýrů pro jednu z mých mobilních aplikací., Organizace byla skvělá, a zboží bylo doručeno velmi rychle, mnohem rychleji, než ostatní firmy a na volné noze jsem pracoval, a myslím, že mohu upřímně doporučit pro další projekty tam. Shoot me e-mail, pokud chcete dostat do kontaktu — [email protected].