10 uutta JavaScript-ominaisuutta ES2020: ssa, jotka sinun pitäisi tietää

Hyviä uutisia - uudet ES2020-ominaisuudet ovat nyt valmiit! Tämä tarkoittaa, että meillä on nyt täydellinen käsitys ES2020: n muutoksista, JavaScriptin uudesta ja parannetusta spesifikaatiosta. Katsotaan siis mitä nämä muutokset ovat.

# 1: BigInt

BigInt, yksi JavaScriptin odotetuimmista ominaisuuksista, on vihdoin täällä. Se antaa kehittäjille oikeastaan ​​suuremman kokonaisluvun edustuksen JS-koodissaan tietojen käsittelyä varten tietojen käsittelyä varten.

Tällä hetkellä enimmäismäärä, jonka voit tallentaa kokonaislukuna JavaScriptiin, on pow(2, 53) - 1. Mutta BigInt antaa sinun mennä jopa pidemmälle.  

Sinulla on kuitenkin oltava nliitetty numeron loppuun, kuten näet yllä. Tämä ntarkoittaa, että tämä on BigInt ja JavaScript-moottori (v8-moottori tai mikä tahansa moottori, jota se käyttää) tulisi kohdella eri tavalla.

Tämä parannus ei ole taaksepäin yhteensopiva, koska perinteinen numerojärjestelmä on IEEE754 (joka ei vain tue tämän kokoisia numeroita).

# 2: Dynaaminen tuonti

Dynaaminen tuonti JavaScript antaa sinulle mahdollisuuden tuoda JS-tiedostoja dynaamisesti moduuleina sovelluksessasi natiivisti. Tämä on aivan kuten teet sen Webpackin ja Babelin kanssa tällä hetkellä.

Tämä ominaisuus auttaa sinua lähettämään kysyntäkoodin, joka tunnetaan paremmin koodin jakamisena, ilman webpackin tai muiden moduulipakettien kuluja. Voit myös ladata ehdollisesti koodin if-else-lohkoon, jos haluat.

Hyvä asia on, että tuot tosiasiallisesti moduulin, joten se ei koskaan saastuta globaalia nimitilaa.

# 3: Nullish Coalescing

Tyhjä yhdistyminen lisää mahdollisuuden tarkistaa nullisharvot arvojen sijaan falsey. Mitä eroa on nullishja falseyarvojen, saatat kysyä?

JavaScript, paljon arvoja falsey, kuten tyhjiä jouset, numero 0, undefined, null, false, NaN, ja niin edelleen.

Voit kuitenkin monta kertaa tarkistaa, onko muuttuja tyhjä - eli jos se on joko undefinedtai nullesimerkiksi silloin, kun muuttujalla on tyhjä merkkijono tai jopa väärä arvo.

Tällöin käytät uutta tyhjää yhdistämisoperaattoria, ??

Voit selvästi nähdä, kuinka OR-operaattori palauttaa aina todellisen arvon, kun taas tyhjä operaattori palauttaa arvon, joka ei ole tyhjä.

# 4: Valinnainen ketjutus

Valinnainen ketjutuksen syntaksin avulla voit käyttää syvälle sisäkkäisiä objektiominaisuuksia huolimatta siitä, onko ominaisuus olemassa vai ei. Jos se on olemassa, hienoa! Jos ei, undefinedpalautetaan.

Tämä ei toimi vain objektiominaisuuksien lisäksi myös toimintokutsujen ja taulukoiden kanssa. Erittäin kätevä! Tässä on esimerkki:

# 5: Promise.allSettled

Promise.allSettledMenetelmä hyväksyy erilaisia lupauksia ja vasta ratkaisee kun ne kaikki on ratkaistu - joko ratkaistu tai hylätään.

Tätä ei ollut aiemmin saatavana luonnollisesti, vaikka jotkut läheiset toteutukset pitivät raceja allolivat käytettävissä. Tämä tuo "Suorita kaikki lupaukset - en välitä tuloksista" natiivisti JavaScriptiin.

# 6: Merkkijono # matchAll

matchAllon Stringprototyyppiin lisätty uusi menetelmä, joka liittyy säännöllisiin lausekkeisiin. Tämä palauttaa iteraattorin, joka palauttaa kaikki vastaavat ryhmät peräkkäin. Katsotaanpa lyhyt esimerkki:

# 7: globaaliTämä

Jos kirjoitit jonkin alustan välisen JS-koodin, joka voisi toimia Solmulla, selainympäristössä ja myös verkkotyöntekijöiden sisällä, sinulla on vaikea päästä käsiksi globaaliin objektiin.

Tämä johtuu siitä, että se on windowtarkoitettu selaimille, globalNodelle ja selfverkkotyöntekijöille. Jos käyttöaikoja on enemmän, globaali kohde on erilainen myös heille.

Joten sinulla olisi pitänyt olla oma toteutus, joka havaitsee ajon ja käyttää sitten oikeaa globaalia - eli tähän asti.

ES2020 tuo meidät globalThisjoka viittaa aina globaaliin objektiin riippumatta siitä, missä suoritat koodiasi:

# 8: Moduulien nimitilan vienti

JavaScript-moduuleissa oli jo mahdollista käyttää seuraavaa syntaksia:

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

Symmetristä exportsyntaksia ei kuitenkaan ollut olemassa, toistaiseksi:

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

Tämä vastaa seuraavaa:

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

# 9: Hyvin määritelty järjestyksessä

ECMA-määrittelyssä ei määritelty, missä järjestyksessä for (x in y)  pitäisi toimia. Vaikka selaimet toteuttivat johdonmukaisen järjestyksen aiemmin, tämä on virallisesti standardoitu ES2020: ssa.

# 10: tuonti.meta

import.metaObjekti luotiin ECMAScript toteuttamista, jolla on nullprototyyppi.

Harkitse moduulia module.js:

Voit käyttää moduulin metatietoja import.metaobjektin avulla:

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

Se palauttaa objektin, jolla on urlominaisuus, joka osoittaa moduulin perus-URL-osoitteen. Tämä on joko URL-osoite, josta komentosarja on hankittu (ulkoisille komentosarjoille), tai sisältävän asiakirjan asiakirjan pohja-URL (sisäisille komentosarjoille).

Johtopäätös

Rakastan johdonmukaisuutta ja nopeutta, jolla JavaScript-yhteisö on kehittynyt ja kehittyy. On hämmästyttävää ja todella hienoa nähdä, kuinka JavaScript tuli kielestä, jota käytettiin kymmenen vuoden kuluttua, yhdeksi kaikkien aikojen vahvimmista, joustavimmista ja monipuolisimmista kielistä.

Haluatko oppia JavaScriptin ja muut ohjelmointikielet aivan uudella tavalla? Siirry uudelle kehittäjien alustalle, jonka parissa yritän kokeilla sitä tänään!

Mikä on ES2020: n suosikkiominaisuutesi? Kerro minulle siitä twiittaamalla ja ottamalla yhteyttä minuun Twitterissä ja Instagramissa!

Tämä on blogiviesti, joka koostuu videostani, joka on samasta aiheesta. Se merkitsisi maailmaa minulle, jos voisit osoittaa sille rakkautta!