Zde jsou příklady, vše nové, v ECMAScript 2016, 2017, a 2018

podle rajaraodv

je těžké sledovat, co je nového v JavaScript (ECMAScript). A je ještě těžší najít užitečné příklady kódu.

Takže v tomto článku se budu pokrýt všechny 18 funkcí, které jsou uvedeny v TC39 je hotové návrhy, které byly přidány v ES2016, ES2017, a ES2018 (konečný návrh) a ukázat jim, s užitečné příklady.

Toto je docela dlouhý příspěvek, ale měl by být snadno čitelný. Přemýšlejte o tom jako o “ čtení Netflixu.“Na konci tohoto slibuji, že budete mít spoustu znalostí o všech těchto funkcích.

OK, pojďme přes tyto jeden po druhém.

Array.prototyp.obsahuje

includes je jednoduchý metodu instance na Pole a pomáhá snadno zjistit, zda je položka v Poli (včetně NaN na rozdíl od indexOf).

ECMAScript 2016 nebo ES7-Array.prototyp.zahrnuje()

Drobnosti: Spec JavaScript lidé chtěli pojmenovat contains, ale to bylo zřejmě již používá Mootools tak oni používali includes .

Umocňování infix operator

Matematické operace jako je sčítání a odčítání mít infix operátory jako + a - , resp. Podobně jako u nich se operátor infix ** běžně používá pro operaci exponentu. V ECMAScript 2016 bylo místo Math.powzavedeno ** .

ECMAScript 2016 nebo ES7 — ** Exponent infix operátora

Objekt.hodnoty()

Object.values() je nová funkce, která je podobná Object.keys() ale vrátí všechny hodnoty Objektu je vlastní vlastnosti, bez jakékoliv hodnoty(y) v prototypového řetězu.

ECMAScript 2017 (ES8— – objekt.hodnoty()

námitka.položky()

Object.entries() souvisí s Object.keys , ale místo návratu jen klíče, vrátí oba klíče a hodnoty v poli módy. Díky tomu je velmi jednoduché dělat věci, jako je použití objektů ve smyčkách nebo převod objektů do Map.

Příklad 1:

ECMAScript 2017 (ES8) – použití objektu.položky () ve smyčkách

příklad 2:

ECMAScript 2017 (ES8) – použití objektu.položky() převod Objektu na Mapě

String polstrování

Dvě metody instance byly přidány do Řetězce — String.prototype.padStart a String.prototype.padEnd — povolit přidávání/prepending buď prázdný řetězec, nebo nějaký jiný řetězec na začátku nebo na konci původní řetězec.

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

to se hodí, když chceme zarovnat věci ve scénářích, jako je hezké zobrazení tisku nebo tisk terminálu.

3.1 padStart příklad:

V příkladu níže, máme seznam čísel, různých délek. Chceme předepíše „0“, takže všechny položky mají stejnou délku 10 číslic pro účely zobrazení. Můžeme použít padStart(10, '0'), abychom toho snadno dosáhli.

ECMAScript 2017 — padStart příklad

3.2 padEnd příklad:

padEnd opravdu přijde vhod, když jsme tisk více položek různých délek a chtějí hned-sladit je správně.

níže uvedený příklad je dobrým realistickým příkladem toho, jak se padEnd, padStart a Object.entries spojí a vytvoří krásný výstup.

ECMAScript 2017-padEnd, padStart a Object.Položky příklad

3.3 ⚠️ padStart a padEnd na Emojis a další double-byte znaky

Emojis a další double-byte znaky jsou reprezentovány pomocí několika bajtů unicode. Takže padStart a padEnd nemusí fungovat podle očekávání!⚠️

například: řekněme, že se snažíme pad řetězec heart dostat 10 znaky s ❤️ emoji. Výsledek bude vypadat níže:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

je to proto, že ❤ is je 2 Kódové body dlouhé ('\u2764\uFE0F' )! Samotné slovo heart má 5 znaků, takže nám zbývá jen celkem 5 znaků. Takže to, co se stane, je, že JS vycpává dvě srdce pomocí '\u2764\uFE0F' a to produkuje ❤❤❤❤. Pro poslední jednoduše používá první bajt srdce \u2764, který produkuje ❤

takže skončíme s: ❤️❤️❤heart

PS: můžete použít tento odkaz se podívat na unicode char konverze.

objekt.getOwnPropertyDescriptors

Tato metoda vrací všechny údaje (včetně getter geta setter set metody) pro všechny vlastnosti daného objektu. Hlavní motivací přidat tento je umožnit mělké kopírování / klonování objektu do jiného objektu, který také kopie getter a setter funkce jako protiklad k Object.assign .

objekt.přiřaďte mělké kopie všech detailů kromě funkcí getter a setter původního zdrojového objektu.

níže uvedený příklad ukazuje rozdíl mezi Object.assign a Object.getOwnPropertyDescriptors spolu s Object.defineProperties kopírovat původní objekt Car do nového objektu ElectricCar . Uvidíte, že pomocí Object.getOwnPropertyDescriptors, discount getter a setter funkce jsou také zkopírovány do cílového objektu.

před…

před použitím objektu.přiřadit

po…

ECMAScript 2017 (ES8) – objekt.getOwnPropertyDescriptors

Přidat koncové čárky ve funkci parametry

Toto je menší aktualizace, která nám umožňuje mít koncové čárky po poslední parametr funkce. Proč? Chcete-li pomoci s nástroji, jako je Git vina, abyste zajistili, že budou obviňováni Pouze noví vývojáři.

níže uvedený příklad ukazuje problém a řešení.

ECMAScript 2017 (ES 8) — Trailing comma v parametr funkce

Poznámka: můžete také volat funkce s koncové čárky!

Async / wait

to je zdaleka nejdůležitější a nejužitečnější funkce, pokud se mě zeptáte. Asynchronní funkce nám umožňují nezabývat se peklem zpětného volání a celý kód vypadat jednoduše.

Klíčové slovo async říká Překladači JavaScriptu, aby zacházel s funkcí odlišně. Kompilátor se zastaví, kdykoli dosáhne klíčového slova await v rámci této funkce. Předpokládá, že výraz po await vrátí slib a čeká, až bude slib vyřešen nebo odmítnut, než se přesune dále.

v níže uvedeném příkladu volá funkce getAmount dvě asynchronní funkce getUser a getBankBalance . Můžeme to udělat slibně, ale použití async await je elegantnější a jednodušší.

ECMAScript 2017 (ES 8) – Async čeká na základní příklad

6.1 asynchronní funkce samy vracejí slib.

pokud čekáte na výsledek z asynchronní funkce, musíte k zachycení výsledku použít syntaxi then programu Promise.

V následujícím příkladu, chceme se přihlásit výsledek pomocí console.log, ale ne v rámci doubleAndAdd. Chceme tedy počkat a pomocí syntaxe then předat výsledek console.log .

ECMAScript 2017 (ES 8) — Asynchronní Čekají na sebe Slib, že se vrátí

6.2 Volání async/await v paralelní

V předchozím příkladu voláme čekají dvakrát, ale pokaždé, když čekáme na jednu vteřinu (celkem 2 sekundy). Místo toho ji můžeme paralelizovat, protože a a b nejsou na sobě závislé pomocí Promise.all.

ECMAScript 2017 (ES 8) – Použití Promise.všechny paralelizovat async/await

6.3 zpracování Chyb async/await funkce

Existují různé způsoby řešení chyb při použití asynchronní čekají.

Varianta 1 — Použití try catch v rámci funkce

ECMAScript 2017 — Použití try catch rámci asynchronní/čeká na funkci

Možnost 2— Chytit každý čekají výraz

Protože každý await výraz vrátí Slib, můžete chytit chyby na každém řádku, jak je znázorněno níže.

ECMAScript 2017 — Použití try catch každý čekají výraz

Varianta 3 — Chytit celý async-await funkce

ECMAScript 2017 — Chytit celý asynchronní/čeká na funkci na konci

ECMAScript je v současné době v konečném návrhu a bude v červnu nebo v červenci 2018. Všechny níže uvedené funkce jsou ve fázi 4 a budou součástí ECMAScript 2018.

1. Sdílená paměť a atomika

Jedná se o obrovskou, docela pokročilou funkci a je jádrem vylepšení motorů JS.

hlavní myšlenkou je přinést nějaký multi-threading funkce do Javascriptu, takže JS vývojáři mohou psát high-výkon, souběžné programy v budoucnosti tím, že umožňuje spravovat paměti samy o sobě místo toho, aby JS engine správa paměti.

to se provádí novým typem globálního objektu s názvem SharedArrayBuffer, který v podstatě ukládá data do sdíleného paměťového prostoru. Tato data lze tedy sdílet mezi hlavním vláknem JS a vlákny web-worker.

až dosud, pokud chceme sdílet data mezi hlavním vláknem JS a webovými pracovníky, museli jsme data zkopírovat a odeslat do druhého vlákna pomocí postMessage . Už ne!

stačí použít SharedArrayBuffer a data jsou okamžitě přístupná jak hlavním vláknem, tak více vlákny webového pracovníka.

ale sdílení paměti mezi vlákny může způsobit závodní podmínky. Aby se zabránilo závodním podmínkám, je zaveden globální objekt „Atomics“. Atomics poskytuje různé metody pro uzamčení sdílené paměti, když vlákno používá svá data. Poskytuje také metody pro bezpečnou aktualizaci těchto dat v této sdílené paměti.

doporučuje se používat tuto funkci prostřednictvím některé knihovny, ale právě teď nejsou nad touto funkcí postaveny žádné knihovny.

Pokud máte zájem, doporučuji k přečtení:

  1. Od Pracovníků do Sdílené Paměti — lucasfcosta
  2. kreslený úvod do SharedArrayBuffers — Lin Clark
  3. Sdílené paměti a atomics — Dr. Axel Rauschmayer

2. Tagged Template literal restriction removed

nejprve musíme objasnit, co je „Tagged Template literal“, abychom tuto funkci lépe porozuměli.

v ES2015+ existuje funkce nazvaná tagged template literal, která umožňuje vývojářům přizpůsobit, jak jsou řetězce interpolovány. Například, ve standardním způsobem, struny jsou odvozeny jako níže…

V označených doslovný, můžete si napsat funkci pro příjem napevno části řetězcový literál, například , a nahrazení proměnných, například, , jako parametry do vlastní funkce (například greet ), a vrátit se, co chcete z této vlastní funkci.

níže uvedený příklad ukazuje, že naše vlastní funkce “ Tag „greet připojuje denní dobu jako “ dobré ráno!““Dobré odpoledne,“ a tak dále v závislosti na denní době na řetězec doslovný a vrátí vlastní řetězec.

Tag funkce příklad, který ukazuje vlastní řetězec interpolace

Teď, když jsme diskutovali o tom, co „Tagged“ funkce jsou, mnozí lidé chtějí použít tuto funkci v různých oblastech, jako Terminál pro příkazy a požadavky HTTP pro skládání Uri, a tak dále.

⚠️problém s Tagged Řetězcový literál

Takže pokud máte Označeny funkce, které interně používá některé jiné domény pravidla (jako Terminál pravidla), které může být nutné použít \ubla123abla, že nevypadá jako \u0049 nebo \u{@F804}, pak dostanete chybu syntaxe.

V ES2018, pravidla jsou uvolněné, aby bylo takové zdánlivě neplatné escape znaky tak dlouho, jak Tagged funkce vrací hodnoty v objektu s „vařené“ majetku (kde neplatné znaky jsou „undefined“), a pak „raw“ majetku (s tím, co chcete).

“ dotall “ příznak pro regulární výraz

v současné době v regulárním výrazu, ačkoli tečka(„.“) má odpovídat jednomu znaku, neodpovídá novým řádkovým znakům jako \n \r \f etc.

například:

//Before/first.second/.test('first\nsecond'); //false

Toto příslušenství umožňuje, aby operátor tečka na jakýkoli jeden znak. Abychom zajistili, že to nic nezlomí, musíme při vytváření regulárního výrazu použít příznak \s, aby to fungovalo.

//ECMAScript 2018/first.second/s.test('first\nsecond'); //true Notice: /s ?? 

Tady je celkové API z návrhu doc:

ECMAScript 2018 — Regex dotAll funkce umožňuje odpovídající i \n přes „.“via / s flag

RegExp pojmenovaná skupina zachytí ?

toto vylepšení přináší užitečnou funkci RegExp z jiných jazyků, jako je Python, Java a tak dále s názvem “ pojmenované skupiny.“Tato funkce umožňuje vývojářům psát RegExp poskytnout názvy (identifikátory) ve formátu(?<name>...) pro různé části skupiny v RegExp. Poté mohou pomocí tohoto jména snadno uchopit jakoukoli skupinu, kterou potřebují.

4.1 základní pojmenovaná skupina příklad

ECMAScript 2018-Regex pojmenované skupiny příklad

4.2 Pomocí Pojmenovaných skupin uvnitř regex sám

můžeme použít \k<group name> formát zpátky referenční skupiny v rámci regex sám. Následující příklad ukazuje, jak to funguje.

ECMAScript 2018 — Regex jménem skupiny zpět odkazování pomocí \k<název skupiny>

4.3 Pomocí pojmenovaných skupin v Řetězci.prototyp.nahradit

pojmenovaná funkce skupiny je nyní pečena do metody instance řetězce replace. Takže můžeme snadno zaměnit slova v řetězci.

například změňte „křestní jméno, příjmení“ na „příjmení, křestní jméno“.

ECMAScript 2018 — Pomocí RegEx je jménem funkce skupiny v nahrazování funkce

Ostatní vlastnosti pro Objekty,

Zbytek operátor ... (tři tečky) nám umožňuje extrahovat Objekt vlastnosti, které jsou již vytěžena.

5.1 můžete použít zbytek pomoci extrahovat pouze vlastnosti, které chcete,

ECMAScript 2018 — Objekt destructuring přes rest

5.2 Ještě lépe, můžete odstranit nežádoucí položky! ??

ECMAScript 2018 — Objekt destructuring přes zbytek

Šíření vlastnosti pro Objekty,

Šíření vlastnosti také vypadat stejně jako ostatní vlastnosti se třemi tečkami ... ale rozdíl je, že používáte šíření vytvořit (restrukturalizaci) nové objekty.

Tip: operátor spreadu se používá na pravé straně znaménka equals. Zbytek se používá na levé straně znaménka rovná se.

ECMAScript 2018 — Objekt restrukturalizace prostřednictvím šíření

RegExp Lookbehind Tvrzení

Tohle je příslušenství k RegEx, který nám umožňuje zajistit nějaký řetězec existuje, okamžitě se *před* některé další řetězec.

nyní můžete použít skupinu (?<=…) (otazník, méně než, rovná se), abyste hledali pozitivní tvrzení.

pozitivní tvrzení: řekněme, že chceme zajistit, aby znak # existoval před slovem winning (tj. Zde je, jak byste to napsat.

ECMAScript 2018 — (?<=…) for positive assertion

Negativní Tvrzení: řekněme, že chceme extrahovat čísla z řádků, které mají € známky a ne $ znamení, než ta čísla.

ECMAScript 2018 – (?<!…) pro negativní tvrzení

RegExp Unicode Vlastnost Uniká

To nebylo snadné napsat RegEx, aby odpovídaly různé unicode znaky. Věci jako \w , \W , \d odpovídá pouze anglickým znakům a číslům. Ale co čísla v jiných jazycích, jako je Hindština,řecký, a tak dále?

to je místo, kde uniká vlastnost Unicode. Ukázalo se, že Unicode přidává vlastnosti metadat pro každý symbol (znak) a používá je ke seskupování nebo charakterizaci různých symbolů.

například, Unicode databáze skupin všechny Hindština znaky(हिन्दी) v rámci majetku se nazývá Script s hodnotou Devanagari a další vlastnost s názvem Script_Extensions se stejnou hodnotou Devanagari. Takže můžeme hledat Script=Devanagari a získat všechny hindské znaky.

Devanagari lze použít pro různé indické jazyky, jako je Marathi, Hindština, sanskrt atd.

počínaje ECMAScript 2018 můžeme použít \p k úniku znaků spolu s {Script=Devanagari}, aby odpovídaly všem těmto indickým znakům. To znamená, že v regulárním výrazu můžeme použít: \p{Script=Devanagari}, aby odpovídaly všem znakům Devanagari.

ECMAScript 2018 — ukazuje, \p
//The following matches multiple hindi character/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true //PS:there are 3 hindi characters h

Podobně, Unicode databáze skupin všech řeckých znaků pod Script_Extensions (a Script ) majetku s hodnotou Greek . Takže můžeme hledat všechny řecké znaky pomocí Script_Extensions=Greek nebo Script=Greek .

to znamená, že můžeme použít: \p{Script=Greek} v regulárním výrazu pro shodu všech řeckých znaků.

ECMAScript 2018 — ukazuje, \p
//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

Dále, Unicode databáze prodejen různých typů Emojis pod boolean vlastnosti Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, a Emoji_Modifier_Base s vlastností hodnoty jako `true`. Takže můžeme hledat všechny emodži jednoduše výběrem Emoji, aby to byla pravda.

to znamená, že můžeme použít: \p{Emoji}, \Emoji_Modifier a tak dále, aby odpovídaly různým druhům emodži.

následující příklad vše vyjasní.

ECMAScript 2018 — ukazuje, jak \p lze použít pro různé emojis

a Konečně, můžeme použít velké „P“(\P ) escape znak, místo malé p (\p ), negovat zápasy.

  1. ECMAScript 2018 Návrh

Slib.prototyp.konečně()

finally() je nová metoda instance, která byla přidána do Promise. Hlavní myšlenkou je umožnit spuštění zpětného volání po resolve nebo reject, aby se věci vyčistily. Zpětné volání finally je voláno bez jakékoli hodnoty a je vždy provedeno bez ohledu na to, co se děje.

podívejme se na různé případy.

ECMAScript 2018 — konečně() do vyřešení případu
ECMAScript 2018 — konečně() v případě odmítnout
ECMASCript 2018 — konečně() omylem vyhozen z Slíbit případě
ECMAScript 2018 — Chyba při vyvolání z v rámci **chytit**

Asynchronní Iterace

To je *extrémně* užitečné funkce. V podstatě nám umožňuje snadno vytvářet smyčky asynchronního kódu!

Tato funkce přidává nové „pro-čekají-“ smyčka, která nám umožňuje asynchronní volání funkcí, které vracejí sliby (nebo Pole s partou sliby) ve smyčce. Skvělá věc je, že smyčka čeká na vyřešení každého slibu, než udělá další smyčku.

ECMAScript 2018 – Async iterátor přes for-wait-of

to je do značné míry to!

pokud to bylo užitečné, klikněte prosím na tleskání ? tlačítko dolů pod několikrát ukázat svou podporu! ⬇⬇⬇ ??

Moje Další Příspěvky

  1. Podívejte se na tyto užitečné ECMAScript 2015 (ES6) tipy a triky
  2. 5 JavaScript „Špatné“ Části, Které Jsou Opraveny V ES6
  3. Je „Třída“ V ES6 Nové „Špatné“ Části?

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.