ECMAScript 6 - 10 fantastiche nuove funzionalità

Sapevi che JavaScript (insieme a JScript e ActionScript) è un'implementazione di una specifica del linguaggio di scripting lato client di tipo generale chiamata ECMAScript? Per rendere questa brutta definizione un po 'più attraente, possiamo dire che ECMAScript (o ufficialmente ECMA-262) è lo standard che definisce come utilizziamo JavaScript e cosa possiamo realizzare con esso.

L'ultima, sesta edizione della lingua, ECMAScript 2015 (o ES6) è probabilmente l'aggiornamento più significativo dalla prima versione del 1997. L'obiettivo principale dell'ultima versione è stato quello di fornire un supporto migliore per la creazione di applicazioni e librerie più grandi. Ciò significa una sintassi più matura, nuove scorciatoie per semplificare la codifica e anche nuovi metodi, parole chiave, tipi di dati e molti altri miglioramenti.

La documentazione ES6 è ampia, se ti piace leggere molto, puoi scaricare tutte le specifiche dal sito web di ECMA International. In questo post daremo un'occhiata a 10 funzionalità raccolte a mano, anche se ES6 ha molto di più da offrire. Se vuoi sperimentarlo, ES6 Fiddle è un ottimo posto per farlo, e puoi anche trovare alcuni frammenti di codice di esempio.

Supporto per ECMAScript 6

I produttori di browser hanno gradualmente aggiunto il supporto per le funzionalità di ECMAScript 6. Qui puoi trovare una fantastica tabella sulla compatibilità del browser e il supporto del compilatore per le nuove funzionalità.

Se sei interessato al supporto ES6 in Node.js, consulta i documenti qui.

Sebbene non tutte le funzionalità siano attualmente supportate, possiamo utilizzare transporter come Babel per trasporre il codice ES6 in ES5. C'è un bel plugin Grunt per Babel, molti fantastici plugin ES6 per Grunt, e un fantastico plugin Gulp-Babel là fuori, quindi fortunatamente abbiamo un sacco di opzioni.

In questo modo possiamo iniziare a utilizzare la sintassi e le funzionalità avanzate, mentre non dobbiamo preoccuparci dei problemi di compatibilità. Ora vediamo le funzionalità.

1. Nuovo permettere Parola chiave

ES6 introduce il nuovo permettere parola chiave che ci permette di dichiarare variabili locali nell'ambito di un blocco, come una dichiarazione, un'espressione o una funzione (n interiore). Ad esempio possiamo dichiarare a per loop nel modo seguente, quindi riutilizzare lo stesso nome di variabile (poiché il suo ambito è limitato a per loop) all'interno del prossimo Se dichiarazione:

 for (let i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Riutilizziamo "i" let i = x * y

Usando il permettere la parola chiave porta a un codice più pulito e più utilizzabile. La differenza tra permettere e var è nell'ambito, ad esempio una variabile locale definita dal var la parola chiave può essere utilizzata nell'intera funzione di chiusura, mentre le variabili definite da permettere funziona solo nel proprio (sotto) blocco. Permettere può anche essere usato globalmente, in questo caso si comporta allo stesso modo di var. Ovviamente, in ES6 possiamo ancora usare var se vogliamo.

2. Nuovo const Parola chiave

Il nuovo const parola chiave rende possibile dichiarare le costanti, note anche come variabili immutabili, alle quali non possiamo riassegnare nuovi contenuti in seguito.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Errore silenzioso, poiché non è possibile riassegnare un nuovo valore a una costante

Le variabili immutabili non sono sempre completamente immutabili in ECMAScript 6, anche se, come se una costante contenesse un oggetto, possiamo in seguito cambiare il valore delle sue proprietà e dei suoi metodi. Lo stesso vale per gli elementi di un array.

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22

Non è ancora possibile riassegnare direttamente un nuovo valore all'oggetto MY_CONSTANT nello snippet di codice precedente, il che significa che non possiamo modificare i nomi delle proprietà e dei metodi, non è possibile aggiungerne uno o eliminarne uno esistente, quindi non possiamo eseguire cosa seguente:

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // errore

3. Funzioni della freccia

ECMAScript 6 facilita il modo in cui scriviamo funzioni anonime, come possiamo completamente omettere il funzione parola chiave. Abbiamo solo bisogno di usare la nuova sintassi per funzioni di freccia, prende il nome dal segno di freccia => (fat arrow), che ci fornisce una grande scorciatoia.

 // 1. Un parametro in ES6 let sum = (a, b) => a + b; // in ES5 var sum = function (a, b) return a + b; ; // 2. Senza parametri in ES6 let randomNum = () => Math.random (); // in ES5 var randomNum = function () return Math.random (); ; // 3. Senza ritorno in ES6 let message = (name) => alert ("Ciao" + nome + "!"); // in ES5 var message = function (yourName) alert ("Ciao" + yourName + "!"); ;

C'è un'importante differenza tra le funzioni normali e quelle a freccia, ovvero le funzioni a freccia non ricevono a Questo valore automaticamente come le funzioni definite con funzione parola chiave Funzioni della freccia legalmente lessico il Questo valore per l'ambito corrente. Ciò significa che possiamo facilmente riutilizzare il Questo parola chiave in una funzione interiore. In ES5 è possibile solo con il seguente trucco:

 // ES5 Hack per usare la parola chiave "this" in una funzione interna ... addAll: function addAll (pieces) var self = this; _.each (pieces, function (piece) self.add (piece);); , ... // ES6 la stessa funzione interna ora può usare il proprio "this" ... addAll: function addAll (pieces) _.each (pieces, piece => this.add (piece)); , ...

Il codice sopra è da Mozilla Hacks

4. Nuovo diffusione Operatore

Il nuovo diffusione l'operatore è contrassegnato con 3 punti (...) e possiamo usarlo per firmare il luogo di più elementi previsti. Uno dei casi di utilizzo più comuni dell'operatore di spread è l'inserimento degli elementi di un array in un altro array:

 let myArray = [1, 2, 3]; let newArray = [... myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

Possiamo anche prendere la leva del diffusione operatore in chiamate di funzione in cui vogliamo passare argomenti da un array:

 let myArray = [1, 2, 3]; function sum (a, b, c) return a + b + c;  console.log (sum (... myArray)); // 6

Il diffusione l'operatore è abbastanza flessibile, in quanto può essere utilizzato più volte nello stesso array o chiamata di funzione.

5. Valori predefiniti per parametri e nuovi parametri di riposo

Buone notizie, che in ECMAScript 6 possiamo aggiungere valori predefiniti ai parametri di una funzione. Ciò significa che se non inoltriamo argomenti più avanti nella chiamata alla funzione, verranno utilizzati i parametri predefiniti. In ES5 i valori predefiniti dei parametri sono sempre impostati su non definito, quindi la nuova possibilità di impostarli su ciò che vogliamo è sicuramente un grande miglioramento del linguaggio.

 function sum (a = 2, b = 4) return a + b;  console.log (sum ()); // 6 console.log (sum (3, 6)); // 9

ES6 introduce anche un nuovo tipo di parametro, il parametri di riposo. Sembrano e funzionano allo stesso modo per diffondere gli operatori. Vengono a portata di mano se non sappiamo quanti argomenti saranno passati in seguito nella chiamata di funzione. Possiamo usare le proprietà e i metodi dell'oggetto Array sui parametri di riposo:

 function putInAlphabet (... args) let sorted = args.sort (); ritorno ordinato;  console.log (putInAlfabeto ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t

6. Nuovo per ... di dichiarazione

Con l'aiuto del nuovo per ... di loop possiamo iterare facilmente su array o altri oggetti iterabili. Insieme al nuovo per ... di statement, ECMAScript 6 introduce anche due nuovi oggetti iterabili, Map per mappe chiave / valore e Set per collezioni di valori univoci che possono anche essere valori primitivi e riferimenti a oggetti. Quando usiamo il per ... di dichiarazione, il codice all'interno del blocco viene eseguito per ogni elemento dell'oggetto iterabile.

 let myArray = [1, 2, 3, 4, 5]; let sum = 0; for (let i of myArray) sum + = i;  console.log (somma); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Modelli letterali

ECMAScript 6 ci fornisce una nuova alternativa per la concatenazione di stringhe. Template letterali permettici di creare facilmente modelli in cui possiamo incorporare valori diversi in qualsiasi punto desideriamo. Per fare ciò abbiamo bisogno di usare il $ ... sintassi ovunque in cui vogliamo inserire i dati che possiamo passare da variabili, matrici o oggetti nel modo seguente:

 let customer = title: 'Ms', firstname: 'Jane', cognome: 'Doe', age: '34'; let template = 'Gentile $ customer.title $ customer.firstname $ customer.surname! Buon compleanno di $ customer.age! '; console.log (template); // Gentile Signora Jane Doe! Buon 34 ° compleanno!

8. Classi

ES6 introduce classi JavaScript che si basano sull'ereditarietà basata sul prototipo esistente. La nuova sintassi rende più semplice creare oggetti, sfruttare l'ereditarietà e riutilizzare il codice. Inoltre, renderà più semplice per i principianti che arrivano da altri linguaggi di programmazione capire come funziona JavaScript.

Nelle classi ES6 sono dichiarate con il nuovo classe parola chiave e deve avere un costruttore() metodo che viene chiamato quando un nuovo oggetto viene istanziato usando il new myClass () sintassi. È anche possibile estendere nuove classi con il la classe Child estende Parent sintassi che può essere familiare da altri linguaggi orientati agli oggetti come PHP. È anche importante sapere che, a differenza delle dichiarazioni di funzioni e variabili, le dichiarazioni di classe NON vengono issate in ECMAScript 6.

 class Polygon constructor (height, width) // class constructor this.name = 'Polygon'; questa altezza = altezza; this.width = width;  sayName () // class metodo console.log ('Ciao, sono un', this.name + '.');  let myPolygon = new Polygon (5, 6); console.log (myPolygon.sayName ()); // Ciao, sono un poligono.

Codice sopra dagli esempi di Fiddle ES6, .

9. Moduli

Ti sei mai chiesto quanto sarebbe bello se JavaScript fosse modulare? Naturalmente, ci sono state soluzioni alternative come CommonJS (utilizzato in Node.js) o AMD (Asynchronous Module Definition) (utilizzato in RequireJS) per farlo prima, ma ES6 introduce i moduli come funzionalità nativa.

Dobbiamo definire ogni modulo nel suo file, quindi utilizzare il esportare parola chiave per esportare variabili e funzioni a altri file e il importare parola chiave per importarli a partire dal altri file, in base alla seguente sintassi:

 // functions.js function cube (a) return a * a * a;  function cubeRoot (a) return Math.cbrt (a);  export cube, cubeRoot // oppure: export cube as cb, cubeRoot as cr // app.js import cube, cubeRoot da 'functions'; console.log (cubo (4)); // 64 console.log (cubeRoot (125)); // 5

Questa soluzione è brillante, poiché il codice memorizzato in un modulo è invisibile dall'esterno e dobbiamo esportare solo la parte a cui vogliamo accedere da altri file. Possiamo fare cose molto più incredibili con i moduli ES6, qui puoi trovare una spiegazione grande e dettagliata su di loro.

10. Carichi di nuovi metodi

ECMAScript 6 introduce molti nuovi metodi per il prototipo di stringa esistente, l'oggetto array, il prototipo di matrice e l'oggetto matematico. I nuovi metodi possono migliorare significativamente il modo in cui possiamo manipolare queste entità. Mozilla Dev ha grandi esempi di codice delle nuove aggiunte, vale la pena prendersi del tempo e esaminarle accuratamente.

Solo per mostrare quanto sono veramente interessanti, ecco il mio preferito: il metodo find del prototipo Array, che ci consente di testare determinati criteri sugli elementi di un array eseguendo la funzione callback su ciascun elemento, restituendo quindi il primo elemento che ritorna vero.

 function isPrime (element, index, array) var start = 2; mentre (inizio <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // non definito, non trovato console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Codice sopra da: Mozilla Dev