10 nye JavaScript-funktioner i ES2020, som du bør kende

Gode ​​nyheder - de nye ES2020-funktioner er nu afsluttet! Dette betyder, at vi nu har en komplet idé om de ændringer, der sker i ES2020, den nye og forbedrede specifikation af JavaScript. Så lad os se, hvad disse ændringer er.

# 1: BigInt

BigInt, en af ​​de mest forventede funktioner i JavaScript, er endelig her. Det giver faktisk udviklere mulighed for at have meget større heltalrepræsentation i deres JS-kode til databehandling til datahåndtering.

I øjeblikket er det maksimale antal, du kan gemme som et heltal i JavaScript pow(2, 53) - 1. Men BigInt giver dig faktisk mulighed for at gå ud over det.  

Du skal dog have et ntilføjet i slutningen af ​​nummeret, som du kan se ovenfor. Dette nangiver, at dette er en BigInt og skal behandles forskelligt af JavaScript-motoren (af v8-motoren eller den motor, den bruger).

Denne forbedring er ikke bagudkompatibel, fordi det traditionelle nummersystem er IEEE754 (som bare ikke understøtter numre af denne størrelse).

# 2: Dynamisk import

Dynamisk import i JavaScript giver dig mulighed for at importere JS-filer dynamisk som moduler i din applikation. Dette er ligesom hvordan du gør det med Webpack og Babel i øjeblikket.

Denne funktion hjælper dig med at sende on-demand-anmodningskode, bedre kendt som kodedeling, uden omkostningerne til webpack eller andre modulbundlere. Du kan også betinget indlæse kode i en if-else-blok, hvis du vil.

Det gode er, at du faktisk importerer et modul, og det forurener aldrig det globale navneområde.

# 3: Nullish Coalescing

Nullish coalescing tilføjer muligheden for virkelig at kontrollere nullishværdier i stedet for falseyværdier. Hvad er forskellen mellem nullishog falseyværdier, spørger du måske?

I JavaScript, en masse værdier er falsey, ligesom tomme strenge, tallet 0, undefined, null, false, NaN, og så videre.

Mange gange vil du måske kontrollere, om en variabel er ugyldig - det vil sige, om den er enten undefinedeller null, som når det er okay for en variabel at have en tom streng eller endda en falsk værdi.

I så fald bruger du den nye nullish coalescing-operator, ??

Du kan tydeligt se, hvordan OR-operatøren altid returnerer en sandhedsværdi, mens den nullish-operator returnerer en ikke-nulllish-værdi.

# 4: Valgfri lænkning

Valgfri kædesyntaks giver dig adgang til dybt indlejrede objektegenskaber uden at bekymre dig om ejendommen eksisterer eller ej. Hvis den findes, fantastisk! Hvis ikke, undefinedreturneres.

Dette fungerer ikke kun på objektegenskaber, men også på funktionsopkald og -arrays. Super praktisk! Her er et eksempel:

# 5: Promise.allSettled

Den Promise.allSettledmetode accepterer en række løfter og kun løser når alle af dem er afgjort - enten løst eller afvist.

Dette var ikke tilgængeligt før, selvom nogle nære implementeringer kunne lide raceog allvar tilgængelige. Dette bringer "Bare kør alle løfter - jeg er ligeglad med resultaterne" indbygget i JavaScript.

# 6: String # matchAll

matchAller en ny metode tilføjet til Stringprototypen, der er relateret til Regular Expressions. Dette returnerer en iterator, der returnerer alle matchede grupper efter hinanden. Lad os se på et hurtigt eksempel:

# 7: GlobalThis

Hvis du skrev nogle JS-kode på tværs af platforme, som kunne køre på Node, i browsermiljøet og også inde i webarbejdere, ville du have svært ved at få fat i det globale objekt.

Dette skyldes, at det er windowtil browsere, globaltil Node og selftil webarbejdere. Hvis der er flere driftstider, vil det globale objekt også være anderledes for dem.

Så du ville have været nødt til at have din egen implementering af at opdage runtime og derefter bruge den korrekte globale - det vil sige indtil nu.

ES2020 bringer os, globalThissom altid refererer til det globale objekt, uanset hvor du udfører din kode:

# 8: Eksport af modulnavneområde

I JavaScript-moduler var det allerede muligt at bruge følgende syntaks:

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

Imidlertid exporteksisterede der ingen symmetrisk syntaks indtil nu:

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

Dette svarer til følgende:

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

# 9: veldefineret for-i rækkefølge

ECMA-specifikationen specificerede ikke, i hvilken rækkefølge der for (x in y)  skulle køres. Selvom browsere implementerede en ensartet rækkefølge på egen hånd før nu, er dette officielt standardiseret i ES2020.

# 10: import.meta

Det import.metaobjekt blev skabt af gennemførelsen ECMAScript, med en nullprototype.

Overvej et modul module.js:

Du kan få adgang til metaoplysninger om modulet ved hjælp af import.metaobjektet:

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

Det returnerer et objekt med en urlegenskab, der angiver modulets basis-URL. Dette vil enten være den URL, som scriptet blev hentet fra (for eksterne scripts), eller dokumentets base URL til det indeholdende dokument (for inline-scripts).

Konklusion

Jeg elsker den konsistens og hastighed, hvormed JavaScript-samfundet har udviklet sig og udvikler sig. Det er forbløffende og virkelig vidunderligt at se, hvordan JavaScript kom fra et sprog, der blev bukket på, i 10 år, til et af de stærkeste, mest fleksible og alsidige sprog nogensinde.

Ønsker du at lære JavaScript og andre programmeringssprog på en helt ny måde? Gå videre til en ny platform for udviklere, jeg arbejder på for at prøve det i dag!

Hvad er din yndlingsfunktion på ES2020? Fortæl mig om det ved at kvidre og oprette forbindelse til mig på Twitter og Instagram!

Dette er et blogindlæg sammensat af min video, der handler om det samme emne. Det ville betyde verden for mig, hvis du kunne vise det lidt kærlighed!