Condividere:
Che cos'è ES6 e cosa devono sapere i programmatori Javascript
ES6 fa riferimento alla versione 6 del linguaggio di programmazione ECMA Script. ECMA Script è il nome standard per JavaScript Che cos'è JavaScript, E Internet esiste senza di esso? Che cos'è JavaScript e Internet può esistere senza di esso? JavaScript è una di quelle che molti danno per scontato. Tutti lo usano. Leggi di più, e la versione 6 è la prossima versione dopo la versione 5, che è stata rilasciata nel 2011. È un importante miglioramento del linguaggio JavaScript, e aggiunge molte altre funzionalità destinate a rendere più facile lo sviluppo di software su larga scala.
ECMAScript, o ES6, è stato pubblicato nel giugno 2015. Successivamente è stato rinominato in ECMAScript 2015. Il supporto del browser Web per la lingua completa non è ancora completo, sebbene siano supportate le porzioni principali. I principali browser Web supportano alcune funzionalità di ES6. Tuttavia, è possibile utilizzare software noto come transpiler convertire il codice ES6 in ES5, che è meglio supportato sulla maggior parte dei browser.
Vediamo ora alcuni importanti cambiamenti che ES6 porta a JavaScript.
1. Costanti
Finalmente il concetto di costanti è arrivato a JavaScript! Le costanti sono valori che possono essere definiti una sola volta (per ambito, ambito spiegato di seguito). Una nuova definizione all'interno dello stesso ambito genera un errore.
const JOE = 4.0 JOE = 3.5 // restituisce: Uncaught TypeError: Assegnazione a variabile costante. Puoi usare la costante ovunque tu possa usare una variabile (var).
console.log ("Il valore è:" + joe * 2) // stampe: 8 2. Variabili e funzioni intercettate a blocchi
Benvenuti nel 21 ° secolo, JavaScript! Con ES6, le variabili dichiarate usando permettere (e le costanti descritte sopra) seguono le regole di scoping dei blocchi proprio come in Java, C ++, ecc.
Prima di questo aggiornamento, le variabili in JavaScript erano scope scope. Cioè, quando avevi bisogno di un nuovo scope per una variabile, dovevi dichiararlo all'interno di una funzione.
Le variabili mantengono il valore fino alla fine del blocco. Dopo il blocco, viene ripristinato il valore nel blocco esterno (se presente).
let x = "ciao"; let x = "world"; console.log ("inner block, x =" + x); console.log ("outer block, x =" + x); // stampa il blocco interno, x = il blocco esterno del mondo, x = ciao Puoi ridefinire anche le costanti, all'interno di tali blocchi.
let x = "ciao"; const x = 4.0; console.log ("inner block, x =" + x); prova x = 3.5 catch (err) console.error ("inner block:" + err); x = "mondo"; console.log ("outer block, x =" + x); // stampa il blocco interno, x = 4 il blocco interno: TypeError: Assegnazione alla variabile costante. blocco esterno, x = mondo 3. Funzioni della freccia
ES6 introduce una nuova sintassi per la definizione delle funzioni mediante una freccia. Nell'esempio seguente, X è una funzione che accetta un parametro chiamato un, e restituisce il suo incremento:
var x = a => a + 1; x (4) // restituisce 5 Usando questa sintassi, puoi definire e passare argomenti in funzioni con facilità.
Usando con a per ciascuno():
[1, 2, 3, 4]. ForEach (a => console.log (a + "=>" + a * a)) // stampa 1 => 1 2 => 4 3 => 9 4 => 16 Definisci le funzioni accettando più argomenti racchiudendoli tra parentesi:
[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // restituisce [3, 22, 44, 67, 98] 4. Parametri funzione predefiniti
I parametri di funzione possono ora essere dichiarati con valori predefiniti. Nel seguente, X è una funzione con due parametri un e B. Il secondo parametro B viene assegnato un valore predefinito di 1.
var x = (a, b = 1) => a * b x (2) // restituisce 2 x (2, 2) // restituisce 4 A differenza di altri linguaggi come C ++ o python, i parametri con valori predefiniti possono apparire prima di quelli senza valori predefiniti. Si noti che questa funzione è definita come un blocco con a ritorno valore a titolo illustrativo.
var x = (a = 2, b) => return a * b Comunque gli argomenti sono abbinati da sinistra a destra. Nella prima invocazione di seguito, B ha un non definito valore anche se un è stato dichiarato con un valore predefinito. L'argomento passato è abbinato a un piuttosto che B. La funzione ritorna NaN.
x (2) // restituisce NaN x (1, 3) // restituisce 3 Quando si passa esplicitamente non definito come argomento, il valore predefinito viene utilizzato se ce n'è uno.
x (indefinito, 3) // restituisce 6 5. Parametri delle funzioni di riposo
Quando si richiama una funzione, a volte sorge la necessità di poter passare un numero arbitrario di argomenti e di elaborare questi argomenti all'interno della funzione. Questo bisogno è gestito dal parametri di funzione di riposo sintassi. Fornisce un modo per acquisire il resto degli argomenti dopo gli argomenti definiti utilizzando la sintassi mostrata di seguito. Questi argomenti extra vengono catturati in un array.
var x = function (a, b, ... args) console.log ("a =" + a + ", b =" + b + "," + args.length + "args left"); x (2, 3) // stampa a = 2, b = 3, 0 argomenti a sinistra x (2, 3, 4, 5) // stampa a = 2, b = 3, 2 argomenti a sinistra 6. String Templating
La stringa di modelli si riferisce all'interpolazione di variabili ed espressioni in stringhe usando una sintassi come perl o la shell. Un modello di stringa è racchiuso tra caratteri back-tick ('). Per contro citazioni singole (') o doppi apici (“) indica le stringhe normali. Le espressioni all'interno del modello sono contrassegnate tra $ e . Ecco un esempio:
var name = "joe"; var x = 'ciao $ nome' // restituisce "ciao joe" Ovviamente, puoi usare un'espressione arbitraria per la valutazione.
// definisce una funzione di freccia var f = a => a * 4 // imposta un valore di parametro var v = 5 // e valuta la funzione all'interno del modello di stringa var x = 'ciao $ f (v)' // ritorna "ciao 20" Questa sintassi per la definizione di stringhe può anche essere utilizzata per definire stringhe multi-linea.
var x = 'ciao mondo prossima riga' // ritorna ciao mondo prossima riga 7. Proprietà dell'oggetto
ES6 introduce una sintassi semplificata per la creazione di oggetti. Dai un'occhiata all'esempio qui sotto:
var x = "ciao mondo", y = 25 var a = x, y // è equivalente a ES5: x: x, y: y Anche i nomi delle proprietà calcolate sono abbastanza eleganti. Con ES5 e versioni precedenti, per impostare una proprietà dell'oggetto con un nome calcolato, è necessario eseguire questa operazione:
var x = "ciao mondo", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a è ora: x: "ciao mondo", y: 25 , joe25: 4 Ora puoi fare tutto in un'unica definizione:
var a = x, y, ["joe" + y]: 4 // restituisce x: "ciao mondo", y: 25, joe25: 4 E, naturalmente, per definire i metodi, puoi semplicemente definirlo con il nome:
var a = x, y, ["joe" + y]: 4, foo (v) return v + 4 a.foo (2) // restituisce 6 8. Sintassi della definizione di classe formale
Definizione di classe
Infine, JavaScript ottiene una sintassi di definizione di classe formale. Sebbene sia semplicemente zucchero sintattico rispetto alle classi già disponibili basate su protypety, serve a migliorare la chiarezza del codice. Questo significa che lo fa non aggiungi un nuovo modello di oggetto o qualcosa di simile.
class Circle costruttore (raggio) this.radius = raggio // lo usa var c = new Circle (4) // restituisce: Circle raggio: 4 Metodi di dichiarazione
La definizione di un metodo è anche abbastanza semplice. Non ci sono sorprese lì.
class Circle costruttore (raggio) this.radius = radius computeArea () return Math.PI * this.radius * this.radius var c = new Circle (4) c.computeArea () // restituisce: 50.26548245743669 Getter e setter
Ora abbiamo anche getter e setter, con un semplice aggiornamento della sintassi. Cerchiamo di ridefinire il Cerchio classe con un la zona proprietà.
class Circle costruttore (raggio) this.radius = radius get area () return Math.PI * this.radius * this.radius var c = new Circle (4) // restituisce: Circle raggio: 4 c.area // restituisce: 50.26548245743669 Aggiungiamo ora un setter. Essere in grado di definire raggio come proprietà impostabile, dovremmo ridefinire il campo attuale con _raggio o qualcosa che non si scontrerà con il setter. Altrimenti incontriamo un errore di overflow dello stack.
Ecco la classe ridefinita:
class Circle costruttore (raggio) this._radius = raggio get area () return Math.PI * this._radius * this._radius set radius (r) this._radius = r var c = new Circle (4) // restituisce: Cerchio _radius: 4 c.area // restituisce: 50.26548245743669 c.radius = 6 c.area // restituisce: 113.09733552923255 Tutto sommato, questa è una bella aggiunta al JavaScript orientato agli oggetti.
Eredità
Oltre a definire le classi usando il classe parola chiave, puoi anche usare il si estende parola chiave da ereditare da super classi. Vediamo come funziona con un esempio.
class Ellipse costruttore (larghezza, altezza) this._width = width; this._height = height; get area () return Math.PI * this._width * this._height; set width (w) this._width = w; imposta altezza (h) this._height = h; classe Circle estende Ellipse costruttore (raggio) super (raggio, raggio); set radius (r) super.width = r; super.height = r; // crea un cerchio var c = new Circle (4) // restituisce: Circle _width: 4, _height: 4 c.radius = 2 // c ora: Circle _width: 2, _height: 2 c.area // restituisce: 12.566370614359172 c.radius = 5 c.area // restituisce: 78.53981633974483 E questa è stata una breve introduzione ad alcune delle funzionalità di JavaScript ES6.
Next up: Scripting di un'animazione robot sensibile alla voce Come eseguire lo script di un'animazione di robot sensibile alla voce in p5.js Come creare uno script per l'animazione di un robot sensibile alla voce in p5.js Volete che i vostri bambini siano interessati alla programmazione? Mostra loro questa guida per costruire una testa robotica sana e reattiva. Leggi di più !
Immagine di credito: micrologia / Depositphotos
Scopri di più su: JavaScript, .