10 nových funkcií JavaScriptu v ES2020, ktoré by ste mali vedieť

Dobrá správa - nové funkcie ES2020 sú už dokončené! To znamená, že teraz máme úplnú predstavu o zmenách, ktoré sa dejú v ES2020, novej a vylepšenej špecifikácii JavaScriptu. Pozrime sa teda, aké sú tieto zmeny.

# 1: BigInt

BigInt, jedna z najočakávanejších funkcií v JavaScripte, je konečne tu. V skutočnosti to umožňuje vývojárom mať oveľa väčšie celočíselné zastúpenie v ich kóde JS na spracovanie údajov na účely spracovania údajov.

V súčasnosti je maximálny počet, ktorý môžete uložiť ako celé číslo v JavaScripte pow(2, 53) - 1. Ale BigInt vám v skutočnosti umožňuje ísť ešte ďalej.  

Ako je však uvedené vyššie, nna konci čísla musíte byť pripojený. To nnaznačuje, že sa jedná o BigInt a motor v JavaScripte by s nimi mal zaobchádzať odlišne (v8 alebo akýkoľvek iný, ktorý používa).

Toto vylepšenie nie je spätne kompatibilné, pretože tradičný číselný systém je IEEE754 (ktorý jednoducho nepodporuje čísla tejto veľkosti).

# 2: Dynamický import

Dynamické importy v JavaScripte vám dávajú možnosť natívne importovať súbory JS ako moduly do vašej aplikácie. Je to podobné, ako to momentálne robíte s Webpackom a Babelom.

Táto funkcia vám pomôže dodať kód na požiadanie, známejší ako rozdelenie kódu, bez réžie webpacku alebo iných balíkov modulov. Ak chcete, môžete tiež podmienene načítať kód do bloku if-else.

Dobrá vec je, že modul skutočne importujete, a tak nikdy neznečisťuje globálny priestor názvov.

# 3: Nullish Coalescing

Nullish coalescing pridáva možnosť skutočnej kontroly nullishhodnôt namiesto falseyhodnôt. Aký je rozdiel medzi hodnotami nullisha falseyhodnotami, môžete sa opýtať?

V JavaScriptu, veľa hodnoty sú falsey, rovnako ako prázdne reťazca, číslo 0, undefined, null, false, NaNa tak ďalej.

Mnohokrát však možno budete chcieť skontrolovať, či je premenná nulová - teda či je undefinedalebo null, napríklad, keď je v poriadku, aby premenná mala prázdny reťazec alebo dokonca nesprávnu hodnotu.

V takom prípade použijete nového nulálneho operátora spájania, ??

Môžete jasne vidieť, ako operátor OR vždy vráti nepravdivú hodnotu, zatiaľ čo operátor nullish vráti nenulovú hodnotu.

# 4: Voliteľné reťazenie

Voliteľná syntax reťazenia vám umožňuje prístup k vlastnostiam hlboko vnorených objektov bez obáv, či vlastnosť existuje alebo nie. Ak existuje, super! Ak nie, undefinedbude vrátený.

Toto funguje nielen na vlastnostiach objektu, ale aj na volaniach funkcií a poliach. Super pohodlné! Tu je príklad:

# 5: Promise.allSettled

Promise.allSettledMetóda prijíma rad prísľubov a rieši iba, keď všetky z nich sú vyrovnané - buď vyriešený, alebo zamietnutá.

Toto predtým nebolo natívne k dispozícii, aj keď niektoré blízke implementácie boli racea allboli k dispozícii. Toto prináša do JavaScriptu natívne možnosť „Stačí spustiť všetky sľuby - výsledky sa nestarám“.

# 6: Reťazec # matchAll

matchAllje nová metóda pridaná k Stringprototypu, ktorá sa týka regulárnych výrazov. To vráti iterátor, ktorý vráti všetky priradené skupiny jednu za druhou. Pozrime sa na rýchly príklad:

# 7: globalThis

Ak by ste napísali nejaký multiplatformový kód JS, ktorý by sa dal spustiť na Node, v prostredí prehliadača a tiež vo vnútri webových pracovníkov, ťažko by ste sa zmocnili globálneho objektu.

Je to tak preto, lebo je to windowpre prehliadače, globalpre Node a selfpre pracovníkov webu. Ak bude runtime viac, globálny objekt sa bude líšiť aj pre ne.

Takže by ste museli mať vlastnú implementáciu detekcie behu a potom použitia správneho globálneho - teda až doteraz.

ES2020 nám prináša globalThisvždy odkazujúci na globálny objekt bez ohľadu na to, kde svoj kód vykonávate:

# 8: Exportuje sa menný priestor modulu

V moduloch JavaScriptu už bolo možné použiť nasledujúcu syntax:

import * as utils from './utils.mjs'

Avšak exportdoteraz neexistovala žiadna symetrická syntax:

export * as utils from './utils.mjs'

Toto je ekvivalentné s týmto:

import * as utils from './utils.mjs' export { utils }

# 9: Dobre definované pre-v poriadku

Špecifikácia ECMA nešpecifikovala, v akom poradí for (x in y)  by sa malo spustiť. Aj keď prehliadače doteraz implementovali konzistentné poradie, v ES2020 to bolo oficiálne štandardizované.

# 10: import.meta

import.metaObjekt bol vytvorený v súvislosti s vykonávaním ECMAScript, s nullprototypom.

Zvážte modul module.js:

K meta informáciám o module môžete pristupovať pomocou import.metaobjektu:

console.log(import.meta); // { url: "file:///home/user/module.js" }

Vráti objekt s urlvlastnosťou označujúcou základnú adresu URL modulu. Bude to buď adresa URL, z ktorej bol získaný skript (pre externé skripty), alebo základná adresa URL dokumentu, ktorý obsahuje dokument (pre vložené skripty).

Záver

Páči sa mi dôslednosť a rýchlosť, s akou sa komunita JavaScriptu vyvíjala a vyvíja. Je úžasné a skutočne úžasné sledovať, ako sa jazyk JavaScript dostal z jazyka, ktorý bol vypískaný už 10 rokov, k jednému z najsilnejších, najpružnejších a najuniverzálnejších jazykov všetkých čias.

Prajete si naučiť sa JavaScript a ďalšie programovacie jazyky úplne novým spôsobom? Prejdite na novú platformu pre vývojárov, na ktorej pracujem, aby som si ju dnes vyskúšal!

Aká je vaša obľúbená funkcia ES2020? Povedzte mi o tom tweetovaním a kontaktom so mnou na Twitteri a Instagrame!

Toto je blogový príspevok zložený z môjho videa, ktoré sa týka rovnakej témy. Znamenalo by to pre mňa svet, keby si mu mohol prejaviť lásku!