Che cos'è ES6 e cosa devono sapere i programmatori Javascript

Che cos'è ES6 e cosa devono sapere i programmatori Javascript

ES6 si riferisce alla versione 6 del linguaggio di programmazione ECMA Script. ECMA Script è il nome standard per JavaScript e la versione 6 è la versione successiva alla versione 5, rilasciata nel 2011. Si tratta di un importante miglioramento del linguaggio JavaScript e aggiunge molte altre funzionalità destinate a semplificare lo sviluppo di software su larga scala .



ECMAScript, o ES6, è stato pubblicato a giugno 2015. Successivamente è stato rinominato ECMAScript 2015. Il supporto del browser Web per la lingua completa non è ancora completo, sebbene siano supportate le parti principali. I principali browser Web supportano alcune funzionalità di ES6. Tuttavia, è possibile utilizzare un software noto come a giocatore per convertire il codice ES6 in ES5, che è meglio supportato sulla maggior parte dei browser.



Diamo ora un'occhiata ad alcuni importanti cambiamenti che ES6 apporta 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 ridefinizione all'interno dello stesso ambito genera un errore.

const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.

Puoi usare la costante ovunque tu possa usare una variabile ( dove ).



console.log('Value is: ' + joe * 2)
// prints: 8

2. Variabili e funzioni con ambito di blocco

Benvenuto nel 21° secolo, JavaScript! Con ES6, variabili dichiarate usando permettere (e le costanti descritte sopra) seguono le regole di ambito dei blocchi proprio come in Java, C++, ecc. (Per saperne di più, vedere come dichiarare le variabili in JavaScript .)

Prima di questo aggiornamento, le variabili in JavaScript erano limitate all'ambito della funzione. Cioè, quando avevi bisogno di un nuovo ambito 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).

Windows 10 nessun sistema operativo trovato
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello

Puoi anche ridefinire le costanti, all'interno di tali blocchi.

{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world

3. Funzioni freccia

ES6 introduce funzioni freccia a JavaScript. (Sono simili alle funzioni tradizionali, ma hanno una sintassi più semplice.) Nell'esempio seguente, X è una funzione che accetta un parametro chiamato a e restituisce il suo incremento:

var x = a => a + 1;
x(4) // returns 5

Usando questa sintassi, puoi definire e passare facilmente argomenti nelle funzioni.

Utilizzo con a per ciascuno() :

[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16

Definisci le funzioni che accettano più argomenti racchiudendoli tra parentesi:

[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]

4. Parametri di funzione predefiniti

I parametri della funzione possono ora essere dichiarati con i valori predefiniti. Nel seguente, X è una funzione con due parametri a e B . Il secondo parametro B viene assegnato un valore predefinito di 1 .

var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4

A differenza di altri linguaggi come C++ o Python, i parametri con valori predefiniti possono apparire prima di quelli senza valori predefiniti. Nota che questa funzione è definita come un blocco con a Restituzione valore a titolo illustrativo.

var x = (a = 2, b) => { return a * b }

Tuttavia, gli argomenti vengono abbinati da sinistra a destra. Nella prima invocazione di seguito, B ha un non definito valore anche se a è stato dichiarato con un valore predefinito. L'argomento passato è abbinato a a piuttosto che B . La funzione ritorna NaN .

x(2)
// returns NaN
x(1, 3)
// returns 3

Quando passi esplicitamente dentro non definito come argomento, viene utilizzato il valore predefinito, se presente.

x(undefined, 3)
// returns 6

5. Parametri della funzione di riposo

Quando si invoca una funzione, a volte sorge la necessità di essere in grado di passare un numero arbitrario di argomenti e di elaborare questi argomenti all'interno della funzione. Questa esigenza è gestita dal parametri della funzione di riposo sintassi. Fornisce un modo per catturare il resto degli argomenti dopo gli argomenti definiti utilizzando la sintassi mostrata di seguito. Questi argomenti aggiuntivi vengono catturati in un array.

var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left

6. Modelli di stringhe

Il template delle stringhe 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 di apice inverso ( `` ). Al contrario virgolette singole ( ' ) o virgolette ( ' ) indicano stringhe normali. Le espressioni all'interno del modello sono contrassegnate tra $ { e } . Ecco un esempio:

var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'

Naturalmente, puoi usare un'espressione arbitraria per la valutazione.

// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'

Questa sintassi per definire le stringhe può essere utilizzata anche per definire stringhe multilinea.

var x = `hello world
next line`
// returns
hello world
next line

7. Proprietà dell'oggetto

ES6 offre una sintassi semplificata per la creazione di oggetti. Dai un'occhiata all'esempio qui sotto:

var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}

Anche i nomi delle proprietà calcolate sono piuttosto eleganti. Con ES5 e precedenti, per impostare una proprietà dell'oggetto con un nome calcolato, dovevi fare questo:

var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}

Ora puoi fare tutto in un'unica definizione:

var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}

E ovviamente, 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)
// returns
6

8. Sintassi formale della definizione di classe

Definizione di classe

Infine, JavaScript ottiene una sintassi formale di definizione della classe. Sebbene sia semplicemente zucchero sintattico rispetto alle classi già disponibili basate sui protitipi, serve a migliorare la chiarezza del codice. Ciò significa che questo lo fa non aggiungi un nuovo modello di oggetto o qualcosa di simile.

class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}

Metodi di dichiarazione

Anche definire un metodo è abbastanza semplice. Nessuna sorpresa lì.

class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669

Getter e Setter

Ora abbiamo anche getter e setter, con un semplice aggiornamento della sintassi. Ridefiniamo il Cerchio classe con an la zona proprietà.

class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669

Aggiungiamo ora un setter. Per essere in grado di definire raggio come proprietà impostabile, dovremmo ridefinire il campo effettivo in _raggio o qualcosa che non si scontrerà con il setter. Altrimenti incontriamo un errore di overflow dello stack.

Ecco la classe ridefinita:

class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 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 la si estende parola chiave per ereditare dalle super classi. Vediamo come funziona con un esempio.

class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483

E questa era una breve introduzione ad alcune delle funzionalità di JavaScript ES6.

Prossimo: familiarizzare con alcuni importanti metodi di array JavaScript e lo scripting di un'animazione robotica sensibile alla voce! Inoltre, scopri un ottimo framework front-end chiamato Vue .

Credito immagine: micrologia/ Depositphotos

Condividere Condividere Tweet E-mail Canon vs Nikon: quale marca di fotocamere è migliore?

Canon e Nikon sono i due più grandi nomi nel settore delle fotocamere. Ma quale marca offre la migliore gamma di fotocamere e obiettivi?

perché la mia app youtube non funziona?
Leggi Avanti Argomenti correlati
  • Programmazione
  • JavaScript
Circa l'autore Jay Sridhar(17 Articoli Pubblicati) Altro da Jay Sridhar

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti