JavaScript ES6 porta nuova sintassi e nuove fantastiche funzionalità per rendere il tuo codice più moderno e più leggibile. Ti permette di scrivere meno codice e fare di più. ES6 ci introduce a molte grandi caratteristiche come le funzioni freccia, stringhe modello, distruzione di classe, moduli Modules e altro ancora. Diamo un’occhiata.

const e let

const è una nuova parola chiave in ES6 per dichiarare le variabili. const è più potente di var. Una volta utilizzata, la variabile non può essere riassegnata., In altre parole, è una variabile immutabile tranne quando viene utilizzata con gli oggetti.

Questo è davvero utile per il targeting dei selettori. Ad esempio, quando abbiamo un singolo pulsante che attiva un evento o quando vuoi selezionare un elemento HTML in JavaScript, usa const invece di var. Questo perché var è ‘issato’. È sempre preferibile utilizzareconst quando non si desidera riassegnare la variabile .,

Nel codice precedente,const non cambierà e non può essere riassegnato. Se provi a dargli un nuovo valore, ti restituirà un errore.

let può essere riassegnato e assumere un nuovo valore. Crea una variabile mutabile.

let è lo stesso di const in quanto entrambi sono bloccati-scope. Significa che la variabile è disponibile solo nel suo ambito.,

Funzioni freccia

La funzione freccia è davvero fantastica e rende il tuo codice più leggibile, più strutturato e simile al codice moderno. Invece di usare questo:

Usa questo:

Come vedi, la funzione freccia sembra più leggibile e pulita! Non avrai più bisogno di usare la vecchia sintassi.

Inoltre, è possibile utilizzare la funzione Freccia conmap,filterereduce funzioni integrate.,

La funzione mappa con le frecce appare più chiara e leggibile dimap in ES5. Con ES6 è possibile scrivere codice più breve e più intelligente. È possibile utilizzare lo stesso confilter ereduce.

Modelli letterali

Modelli letterali o stringhe di modelli sono piuttosto interessanti. Non dobbiamo usare l’operatore più ( + ) per concatenare le stringhe o quando vogliamo usare una variabile all’interno di una stringa.,

La vecchia sintassi:

Con il nuovo ES6 sintassi:

Così semplice! È una differenza davvero enorme tra la vecchia sintassi e ES6. Quando si gioca con le stringhe, la stringa letterale in ES6 sembra più organizzata e ben strutturata di ES5.

Parametri predefiniti

Quando lavoro in PHP, di solito uso i parametri predefiniti. Questi consentono di definire un parametro in anticipo.,

Quindi, quando si dimentica di scrivere il parametro, non restituirà un errore non definito perché il parametro è già definito nel valore predefinito. Quindi, quando esegui la tua funzione con un parametro mancato, prenderà il valore del parametro predefinito t e non restituirà un errore!

Guarda questo esempio:

La funzione di cui sopra restituisce undefined, perché abbiamo dimenticato di dargli il secondo parametro age.,

Ma se abbiamo usato il parametro predefinito, non restituirà undefined, e userà il suo valore quando ci dimentichiamo di assegnare un parametro!

Come vedi, la funzione restituisce un valore anche se abbiamo perso il secondo parametro. Ora con il parametro predefinito possiamo gestire l’errore in anticipo.

Distruzione di array e oggetti

La distruzione semplifica l’assegnazione dei valori di un array o di un oggetto alla nuova variabile.,

La vecchia sintassi:

Con ES6 sintassi:

Con ES5, dobbiamo assegnare a ciascun valore di ogni variabile. Con ES6, abbiamo appena messo i nostri valori all’interno di parentesi graffe per ottenere qualsiasi proprietà dell’oggetto.

Nota: se si assegna una variabile che non è identica al nome della proprietà, restituirà undefined. Ad esempio, se il nome della proprietà è name e lo assegniamo a una variabile username, restituirà undefined.,

Dobbiamo sempre nominare la variabile come il nome della proprietà. Ma nel caso in cui vogliamo rinominare la variabile, possiamo usare i due punti : invece.

Per l’array, usiamo la stessa sintassi dell’oggetto. Dobbiamo solo sostituire le parentesi graffe con parentesi quadre.

Importare ed esportare

Utilizzandoimporte export nella tua applicazione JavaScript lo rende più potente., Consentono di creare componenti separati e riutilizzabili.

Se si ha familiarità con qualsiasi framework MVC JavaScript, si vedrà che usanoimporteexport per gestire i componenti la maggior parte del tempo. Quindi, come funzionano davvero?

È semplice! export consente di esportare un modulo da utilizzare in un altro componente JavaScript. Usiamo import per importare quel modulo per usarlo nel nostro componente.

Ad esempio, abbiamo due file., Il primo si chiama detailComponent.js e il secondo si chiama homeComponent.js.

In detailComponent.js stiamo per esportare la funzione detail.

E se vogliamo usare questa funzione inhomeComponent.js, useremo soloimport.

Se vogliamo importare più di un modulo, li mettiamo semplicemente tra parentesi graffe.,

Così bello, vero?!

Promesse

Le promesse sono una nuova funzionalità di ES6. È un metodo per scrivere codice asincrono. Può essere utilizzato quando, ad esempio, vogliamo recuperare dati da un’API o quando abbiamo una funzione che richiede tempo per essere eseguita. Le promesse rendono più facile risolvere il problema, quindi creiamo la nostra prima promessa!

Se registri la tua console, restituirà una Promessa. Quindi, se vogliamo eseguire una funzione dopo che i dati sono stati recuperati, useremo una Promessa., La Promessa accetta due parametri: resolveereject per gestire un errore previsto.

Nota: la funzione fetch restituisce una Promessa stessa!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

Ora se registri la tua console restituirà una serie di dati.

Parametro Rest e operatore Spread

I parametri rest vengono utilizzati per ottenere l’argomento di un array e restituire un nuovo array.,

L’operatore spread ha la stessa sintassi del parametro rest, ma l’operatore spread prende l’Array stesso e non solo gli argomenti. Possiamo usare il parametro Spread per ottenere i valori di un array, invece di usare un ciclo for o qualsiasi altro metodo.

Classi

Le classi sono il nucleo della programmazione orientata agli oggetti (OOP). Rendono il tuo codice più sicuro e incapsulato. L’uso delle classi dà al tuo codice una bella struttura e lo mantiene orientato.,

Per creare una classe, utilizzare la parola chiaveclass seguita dal nome della classe con due parentesi graffe.

Ora possiamo accedere ai metodi e alle proprietàclassutilizzando la parola chiavenew.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

Per ereditare da un’altra classe, utilizzare la parola chiaveextends seguita dal nome della classe da cui si desidera ereditare.,

Puoi saperne di più sulle lezioni qui.

ES6 ha altre caratteristiche sorprendenti-è possibile esplorare qui.

Conclusione

Spero che abbiate trovato questo articolo utile e spero di essere stato in grado di presentarvi alcune delle funzionalità di ES6. Se è così, iscriviti a questa mail-list per saperne di più su argomenti Front-end. Grazie per il suo tempo.

A proposito, ho recentemente lavorato con un forte gruppo di ingegneri del software per una delle mie applicazioni mobili., L’organizzazione è stata fantastica e il prodotto è stato consegnato molto rapidamente, molto più velocemente di altre aziende e liberi professionisti con cui ho lavorato, e penso di poterli raccomandare onestamente per altri progetti là fuori. Sparami una e mail se si desidera entrare in contatto — [email protected].