Ecco alcuni esempi di tutto ciò che è nuovo in ECMAScript 2016, 2017 e 2018

di rajaraodv

È difficile tenere traccia delle novità in JavaScript (ECMAScript). Ed è ancora più difficile trovare esempi di codice utili.

Quindi, in questo articolo, tratterò tutte le 18 funzionalità elencate nelle proposte finite di TC39 che sono state aggiunte in ES2016, ES2017 ed ES2018 (bozza finale) e mostrarle con esempi utili.

Questo è un post piuttosto lungo ma dovrebbe essere di facile lettura. Pensate a questo come ” Netflix binge reading.”Entro la fine di questo, prometto che avrai un sacco di conoscenze su tutte queste funzionalità.

OK, andiamo su questi uno per uno.

Matrice.prototipo.include

includes è un semplice metodo di istanza sull’Array e aiuta a trovare facilmente se un elemento è nell’Array (incluso NaNa differenza di indexOf).

Curiosità: le persone delle specifiche JavaScript volevano chiamarlo contains, ma apparentemente questo era già usato da Mootools, quindi usavano includes.

Esponenziazione infix operator

Operazioni matematiche come addizione e sottrazione hanno operatori infissi come + e -, rispettivamente. Simile a loro, l’operatore infisso ** è comunemente usato per l’operazione esponente. In ECMAScript 2016, è stato introdotto ** invece di Math.pow.

Oggetto.valori()

Object.values() è una nuova funzione simile a Object.keys() ma restituisce tutti i valori delle proprietà dell’Oggetto escludendo qualsiasi valore nella catena prototipica.

Oggetto.voci()

Object.entries() è correlato a Object.keys, ma invece di restituire solo le chiavi, restituisce sia le chiavi che i valori nella moda dell’array. Questo rende molto semplice fare cose come usare oggetti in loop o convertire oggetti in Mappe.

Esempio 1:

Esempio 2:

String padding

Due metodi di istanza sono stati aggiunti a String — String.prototype.padStart e String.prototype.padEnd — che consentono di aggiungere/anteporre una stringa vuota o qualche altra stringa all’inizio o alla fine della stringa originale.

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

Questo è utile quando vogliamo allineare le cose in scenari come pretty print display o terminal print.

3.1 padStart esempio:

Nell’esempio seguente, abbiamo un elenco di numeri di lunghezza variabile. Vogliamo anteporre “0” in modo che tutti gli elementi abbiano la stessa lunghezza di 10 cifre per scopi di visualizzazione. Possiamo usare padStart(10, '0') per ottenere facilmente questo.

3.2 Esempio padEnd:

padEnd è davvero utile quando stampiamo più articoli di varie lunghezze e vogliamo allinearli correttamente.

L’esempio seguente è un buon esempio realistico di come padEnd, padStart e Object.entries si uniscono per produrre una bella uscita.

3.3 ⚠️ padStart e padEnd su Emoji e altri caratteri a doppio byte

Emoji e altri caratteri a doppio byte sono rappresentati utilizzando più byte di unicode. Quindi padStart e padEnd potrebbero non funzionare come previsto!⚠️

Ad esempio: diciamo che stiamo cercando di tamponare la stringa heart per raggiungere 10 caratteri con l’emoji❤️. Il risultato sarà simile al di sotto:

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

Questo perché ❤️ è lungo 2 punti di codice ('\u2764\uFE0F' )! La parola heart è di per sé 5 caratteri, quindi abbiamo solo un totale di 5 caratteri lasciati a pad. Quindi quello che succede è che JS pad due cuori usando '\u2764\uFE0F' e che produce ❤️❤️. Per l’ultimo usa semplicemente il primo byte del cuore \u2764 che produce ❤

Quindi finiamo con: ❤️❤️❤heart

PS: Puoi usare questo link per controllare le conversioni di caratteri unicode.

Oggetto.getOwnPropertyDescriptors

Questo metodo restituisce tutti i dettagli (inclusi i metodi getter get e setter set) per tutte le proprietà di un determinato oggetto. La motivazione principale per aggiungere questo è consentire la copia / clonazione superficiale di un oggetto in un altro oggetto che copia anche le funzioni getter e setter rispetto a Object.assign .

Oggetto.assegna copie superficiali tutti i dettagli tranne le funzioni getter e setter dell’oggetto sorgente originale.

L’esempio seguente mostra la differenza tra Object.assign e Object.getOwnPropertyDescriptors insieme a Object.defineProperties per copiare un oggetto originale Car in un nuovo oggetto ElectricCar. Vedrai che usando Object.getOwnPropertyDescriptors ,discount le funzioni getter e setter vengono copiate anche nell’oggetto di destinazione.

PRIMA…

DOPO…

Aggiungi virgole finali nei parametri della funzione

Questo è un aggiornamento minore che ci consente di avere virgole finali dopo l’ultimo parametro della funzione. Perché? Per aiutare con strumenti come git blame per garantire che solo i nuovi sviluppatori vengano incolpati.

L’esempio seguente mostra il problema e la soluzione.

Nota: È anche possibile chiamare funzioni con virgole finali!

Async/Await

Questa, di gran lunga, è la caratteristica più importante e più utile se me lo chiedi. Le funzioni asincrone ci permettono di non gestire l’inferno di callback e rendere l’intero codice semplice.

La parola chiave async indica al compilatore JavaScript di trattare la funzione in modo diverso. Il compilatore si interrompe ogni volta che raggiunge la parola chiave await all’interno di tale funzione. Presuppone che l’espressione dopo await restituisca una promessa e attenda fino a quando la promessa non viene risolta o rifiutata prima di spostarsi ulteriormente.

Nell’esempio seguente, la funzione getAmount chiama due funzioni asincrone getUser e getBankBalance. Possiamo farlo in promessa, ma usare async await è più elegante e semplice.

6.1 Le funzioni asincrone restituiscono una Promessa.

Se si sta aspettando il risultato da una funzione asincrona, è necessario utilizzare la sintassi then di Promise per acquisire il risultato.

Nell’esempio seguente, vogliamo registrare il risultato usando console.log ma non all’interno di doubleAndAdd. Quindi vogliamo aspettare e usare la sintassi then per passare il risultato a console.log.

6.2 Chiamare async / await in parallelo

Nell’esempio precedente stiamo chiamando await due volte, ma ogni volta stiamo aspettando un secondo (totale 2 secondi). Invece possiamo parallelizzarlo poiché a e bnon dipendono l’uno dall’altro usando Promise.all.

6.3 Gestione degli errori async / await functions

Esistono vari modi per gestire gli errori quando si utilizza async await.

Opzione 1 — Usa try catch all’interno della funzione

Opzione 2-Cattura ogni espressione await

Poiché ogni espressione await restituisce una Promessa, è possibile rilevare errori su ogni riga come mostrato di seguito.

Opzione 3-Cattura l’intera funzione async-await

ECMAScript è attualmente in bozza finale e uscirà a giugno o luglio 2018. Tutte le funzionalità coperte di seguito sono nella Fase 4 e faranno parte di ECMAScript 2018.

1. Shared memory and atomics

Questa è una funzionalità enorme e piuttosto avanzata ed è un miglioramento fondamentale per i motori JS.

L’idea principale è quella di portare una sorta di funzionalità multi-threading a JavaScript in modo che gli sviluppatori JS possano scrivere programmi simultanei ad alte prestazioni in futuro consentendo di gestire la memoria da soli invece di lasciare che JS engine gestisca la memoria.

Questo viene fatto da un nuovo tipo di un oggetto globale chiamato SharedArrayBuffer che essenzialmente memorizza i dati in uno spazio di memoria condivisa. Quindi questi dati possono essere condivisi tra il thread JS principale e i thread web-worker.

Fino ad ora, se vogliamo condividere i dati tra il thread JS principale e i web-worker, dovevamo copiare i dati e inviarli all’altro thread usando postMessage. Non più!

È sufficiente utilizzare SharedArrayBuffer e i dati sono immediatamente accessibili sia dal thread principale che da più thread di web-worker.

Ma la condivisione della memoria tra i thread può causare condizioni di gara. Per evitare le condizioni di gara, viene introdotto l’oggetto globale “Atomics”. Atomics fornisce vari metodi per bloccare la memoria condivisa quando un thread utilizza i suoi dati. Fornisce anche metodi per aggiornare tali dati in quella memoria condivisa in modo sicuro.

La raccomandazione è di utilizzare questa funzionalità tramite alcune librerie, ma al momento non ci sono librerie basate su questa funzionalità.

Se siete interessati, vi consiglio di leggere:

1. Dai lavoratori alla memoria condivisa-lucasfcosta
2. Un fumetto intro per SharedArrayBuffers – Lin Clark
3. Memoria condivisa e atomica-Dr. Axel Rauschmayer

2. Tagged Template literal restriction removed

In primo luogo, dobbiamo chiarire cosa sia un “Tagged Template literal” in modo da poter comprendere meglio questa funzionalità.

In ES2015+, esiste una funzionalità chiamata letterale modello con tag che consente agli sviluppatori di personalizzare il modo in cui le stringhe vengono interpolate. Per esempio, in modo standard le stringhe vengono interpolati come di seguito…

Nel tagged letterale, è possibile scrivere una funzione per ricevere il hardcoded parti della stringa letterale, per esempio , e la sostituzione di variabili, per esempio, , come parametri di una funzione personalizzata (per esempio greet ), e restituire quello che si vuole da tale funzione personalizzata.

L’esempio seguente mostra che la nostra funzione “Tag” personalizzata greet aggiunge l’ora del giorno come ” Buongiorno!””Buon pomeriggio”, e così via a seconda del momento della giornata alla stringa letterale e restituisce una stringa personalizzata.

Ora che abbiamo discusso di quali sono le funzioni “Taggate”, molte persone vogliono utilizzare questa funzione in diversi domini, come nel Terminale per i comandi e le richieste HTTP per la composizione di URI e così via.

⚠️Il problema con Tagged String literal

Quindi se hai una funzione Tagged che utilizza internamente alcune regole di altri domini (come le regole del terminale), potrebbe essere necessario utilizzare \ubla123abla che non assomiglia a \u0049 o \u{@F804}, allora si otterrebbe un errore di sintassi.

In ES2018, le regole sono rilassate per consentire caratteri di escape apparentemente non validi purché la funzione Tagged restituisca i valori in un oggetto con una proprietà “cotta” (dove i caratteri non validi sono “indefiniti”) e quindi una proprietà “grezza” (con quello che vuoi).

flag”dotall” per l’espressione regolare

Attualmente in RegEx, sebbene il punto (“.”) dovrebbe corrispondere a un singolo carattere, non corrisponde a nuovi caratteri di riga come \n \r \f etc.

Per esempio:

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

Questo miglioramento rende possibile per l’operatore punto per abbinare qualsiasi singolo carattere. Per garantire che questo non rompa nulla, dobbiamo usare il flag \s quando creiamo la RegEx affinché funzioni.

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

Ecco l’API complessiva della proposta doc:

RegExp Denominato Gruppo Cattura ?

Questo miglioramento porta una funzione RegExp utile da altri linguaggi come Python, Java e così via chiamato ” Gruppi denominati.”Questa funzionalità consente agli sviluppatori che scrivono RegExp di fornire nomi (identificatori) nel formato(?<name>...) per diverse parti del gruppo nell’espressione regolare. Possono quindi utilizzare quel nome per afferrare qualsiasi gruppo di cui hanno bisogno con facilità.

4.1 Basic Named group example

4.2 Usando i gruppi denominati all’interno della regex stessa

Possiamo usare il formato \k<group name> per fare riferimento al gruppo all’interno della regex stessa. L’esempio seguente mostra come funziona.

4.3 Utilizzo di gruppi denominati in Stringa.prototipo.sostituisci

La funzionalità del gruppo denominato viene ora inserita nel metodo di istanza replace di String. Quindi possiamo facilmente scambiare parole nella stringa.

Ad esempio, cambia “FirstName, LastName” in “LastName, FirstName”.

Proprietà Rest per oggetti

Operatore Rest ... (tre punti) ci consente di estrarre le proprietà dell’oggetto che non sono già state estratte.

5.1 È possibile utilizzare rest per aiutare a estrarre solo le proprietà desiderate

5.2 Ancora meglio, è possibile rimuovere gli elementi indesiderati! ??

Proprietà Spread per oggetti

Anche le proprietà Spread assomigliano alle proprietà rest con tre punti ... ma la differenza è che si utilizza spread per creare (ristrutturare) nuovi oggetti.

Suggerimento: l’operatore spread viene utilizzato nella parte destra del segno di uguale. Il resto è usato nel lato sinistro del segno di uguale.

REGEXP Lookbehind Assertions

Questo è un miglioramento della RegEx che ci consente di garantire che alcune stringhe esistano immediatamente *prima* di altre stringhe.

Ora puoi usare un gruppo (?<=…) (punto interrogativo, minore di, uguale) per cercare un’asserzione positiva.

Asserzione positiva: diciamo che vogliamo assicurarci che il segno # esista prima della parola winning (cioè: #winning) e vogliamo che la regex restituisca solo la stringa “winning”. Ecco come lo scriveresti.

Affermazione negativa: diciamo che vogliamo estrarre i numeri dalle linee che hanno segni € e non signs segni prima di quei numeri.

La proprietà Unicode RegExp Sfugge

Non è stato facile scrivere RegEx per abbinare vari caratteri unicode. Cose come \w , \W , \d etc corrispondono solo caratteri e numeri inglesi. Ma per quanto riguarda i numeri in altre lingue come hindi, greco, e così via?

Ecco dove entrano le fughe di proprietà Unicode. Si scopre che Unicode aggiunge proprietà di metadati per ciascun simbolo (carattere) e lo utilizza per raggruppare o caratterizzare vari simboli.

Ad esempio, il database Unicode raggruppa tutti i caratteri hindi(पिन्दी) in una proprietà chiamata Script con valore Devanagari e un’altra proprietà chiamata Script_Extensionscon lo stesso valore Devanagari. Quindi possiamo cercare Script=Devanagari e ottenere tutti i caratteri hindi.

Devanagari può essere utilizzato per varie lingue indiane come Marathi, hindi, sanscrito e così via.

A partire da ECMAScript 2018, possiamo usare \p per sfuggire ai caratteri insieme a {Script=Devanagari} per abbinare tutti quei caratteri indiani. Cioè, possiamo usare: \p{Script=Devanagari} nella RegEx per abbinare tutti i caratteri Devanagari.

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

Allo stesso modo, il database Unicode raggruppa tutti i caratteri greci sotto la proprietà Script_Extensions (e Script ) con il valore Greek . Quindi possiamo cercare tutti i caratteri greci usando Script_Extensions=Greek o Script=Greek.

Cioè, possiamo usare: \p{Script=Greek} nella RegEx per abbinare tutti i caratteri greci.

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

Inoltre, il database Unicode memorizza vari tipi di Emoji sotto le proprietà booleaneEmoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, e Emoji_Modifier_Base con i valori delle proprietà come ‘true’. Quindi possiamo cercare tutte le Emoji semplicemente selezionando Emoji per essere vero.

Cioè, possiamo usare: \p{Emoji}, \Emoji_Modifier e così via per abbinare vari tipi di Emoji.

Il seguente esempio renderà tutto chiaro.

Infine, possiamo usare il carattere di escape “P”(\P) maiuscole invece di p piccola (\p), per negare le partite.

1. ECMAScript 2018 Proposta

Promessa.prototipo.finalmente()

finally() è un nuovo metodo di istanza che è stato aggiunto a Promise. L’idea principale è quella di consentire l’esecuzione di un callback dopo resolve o reject per aiutare a ripulire le cose. Il callback finally viene chiamato senza alcun valore e viene sempre eseguito indipendentemente da cosa.

Diamo un’occhiata a vari casi.

Asincrona Iterazione

Questo è *estremamente* funzione utile. Fondamentalmente ci permette di creare loop di codice asincrono con facilità!

Questa funzione aggiunge un nuovo ciclo “for-await-of” che ci consente di chiamare funzioni asincrone che restituiscono promesse (o array con un gruppo di promesse) in un ciclo. La cosa interessante è che il ciclo attende che ogni Promessa si risolva prima di passare al ciclo successivo.

Questo è praticamente tutto!

Se questo è stato utile, si prega di fare clic sul clap ? pulsante giù sotto un paio di volte per mostrare il vostro sostegno! ⬇⬇⬇ ??

I miei altri messaggi

1. Dai un’occhiata a questi utili ECMAScript 2015 (ES6) suggerimenti e trucchi
2. 5 JavaScript “Bad” Parti che sono fissati in ES6
3. È “Class” In ES6 La nuova parte “Bad”?