10 nuove funzionalità JavaScript in ES2020 che dovresti conoscere

Buone notizie: le nuove funzionalità di ES2020 sono ora finalizzate! Ciò significa che ora abbiamo un'idea completa dei cambiamenti in atto in ES2020, la nuova e migliorata specifica di JavaScript. Quindi vediamo quali sono questi cambiamenti.

# 1: BigInt

BigInt, una delle funzionalità più attese in JavaScript, è finalmente arrivata. In realtà consente agli sviluppatori di avere una rappresentazione di numeri interi molto maggiore nel loro codice JS per l'elaborazione dei dati per la gestione dei dati.

Al momento il numero massimo che puoi memorizzare come numero intero in JavaScript è pow(2, 53) - 1. Ma BigInt in realtà ti consente di andare anche oltre.  

Tuttavia, è necessario naggiungere un simbolo alla fine del numero, come puoi vedere sopra. Questo ndenota che si tratta di un BigInt e dovrebbe essere trattato in modo diverso dal motore JavaScript (dal motore v8 o da qualsiasi altro motore utilizzato).

Questo miglioramento non è compatibile con le versioni precedenti perché il sistema numerico tradizionale è IEEE754 (che semplicemente non supporta numeri di queste dimensioni).

# 2: importazione dinamica

Le importazioni dinamiche in JavaScript ti danno la possibilità di importare i file JS dinamicamente come moduli nella tua applicazione in modo nativo. È proprio come lo fai con Webpack e Babel al momento.

Questa funzione ti aiuterà a spedire codice su richiesta, meglio noto come suddivisione del codice, senza il sovraccarico di webpack o altri bundle di moduli. Puoi anche caricare in modo condizionale il codice in un blocco if-else, se lo desideri.

La cosa buona è che in realtà importi un modulo e quindi non inquina mai lo spazio dei nomi globale.

# 3: Nullish Coalescing

La fusione nulla aggiunge la capacità di controllare veramente i nullishvalori invece dei falseyvalori. Qual è la differenza tra nullishe falseyvalues, potresti chiedere?

In JavaScript, un sacco di valori sono falsey, come stringhe vuote, il numero 0, undefined, null, false, NaN, e così via.

Tuttavia, molte volte potresti voler controllare se una variabile è nulla, cioè se è o undefinedo null, come quando va bene che una variabile abbia una stringa vuota, o anche un valore falso.

In tal caso, utilizzerai il nuovo operatore di coalescenza nullo, ??

Puoi vedere chiaramente come l'operatore OR restituisce sempre un valore vero, mentre l'operatore nullo restituisce un valore non nullo.

# 4: concatenamento opzionale

La sintassi facoltativa del concatenamento consente di accedere a proprietà di oggetti profondamente nidificate senza preoccuparsi se la proprietà esiste o meno. Se esiste, fantastico! In caso contrario, undefinedverrà restituito.

Questo non funziona solo sulle proprietà degli oggetti, ma anche sulle chiamate di funzioni e sugli array. Super conveniente! Ecco un esempio:

# 5: Promise.allSettled

Il Promise.allSettledmetodo accetta una serie di promesse e si risolve solo quando tutte sono state risolte, risolte o rifiutate.

Questo non era disponibile nativamente prima, anche se alcune implementazioni simili come racee allerano disponibili. Questo porta "Esegui tutte le promesse - non mi interessano i risultati" in modo nativo in JavaScript.

# 6: String # matchAll

matchAllè un nuovo metodo aggiunto al Stringprototipo relativo alle espressioni regolari. Questo restituisce un iteratore che restituisce uno dopo l'altro tutti i gruppi corrispondenti. Diamo un'occhiata a un rapido esempio:

# 7: globalThis

Se scrivessi del codice JS multipiattaforma che potrebbe essere eseguito su Node, nell'ambiente del browser e anche all'interno di web-worker, avresti difficoltà a impossessarti dell'oggetto globale.

Questo perché è windowper i browser, globalper Node e selfper i web worker. Se ci sono più runtime, anche l'oggetto globale sarà diverso per loro.

Quindi avresti dovuto avere la tua implementazione per rilevare il runtime e quindi utilizzare il globale corretto, ovvero fino ad ora.

ES2020 ci porta globalThische si riferisce sempre all'oggetto globale, indipendentemente da dove stai eseguendo il tuo codice:

# 8: esportazioni dello spazio dei nomi del modulo

Nei moduli JavaScript era già possibile utilizzare la seguente sintassi:

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

Tuttavia, exportfino ad ora non esisteva alcuna sintassi simmetrica :

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

Questo è equivalente a quanto segue:

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

# 9: Ben definito in ordine

La specifica ECMA non specificava in quale ordine for (x in y)  eseguire. Anche se i browser hanno implementato un ordine coerente da soli prima d'ora, questo è stato ufficialmente standardizzato in ES2020.

# 10: import.meta

L' import.metaoggetto è stato creato dall'implementazione ECMAScript, con un nullprototipo.

Considera un modulo module.js:

È possibile accedere alle meta informazioni sul modulo utilizzando l' import.metaoggetto:

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

Restituisce un oggetto con una urlproprietà che indica l'URL di base del modulo. Questo sarà l'URL da cui è stato ottenuto lo script (per gli script esterni) o l'URL di base del documento del documento contenente (per gli script inline).

Conclusione

Amo la coerenza e la velocità con cui la comunità JavaScript si è evoluta e si sta evolvendo. È incredibile e davvero meraviglioso vedere come JavaScript sia derivato da un linguaggio che è stato fischiato, 10 anni fa, a uno dei linguaggi più forti, flessibili e versatili di tutti i tempi oggi.

Desideri imparare JavaScript e altri linguaggi di programmazione in un modo completamente nuovo? Vai a una nuova piattaforma per sviluppatori su cui sto lavorando per provarla oggi!

Qual è la tua caratteristica preferita di ES2020? Parlamene twittando e connettendomi con me su Twitter e Instagram!

Questo è un post del blog composto dal mio video che è sullo stesso argomento. Significherebbe il mondo per me se tu potessi mostrargli un po 'di amore!