In questo tutorial imparerai a conoscere JavaScript ES6 con l'aiuto di esempi.
JavaScript ES6 (noto anche come ECMAScript 2015 o ECMAScript 6 ) è la versione più recente di JavaScript introdotta nel 2015.
ECMAScript è lo standard utilizzato dal linguaggio di programmazione JavaScript. ECMAScript fornisce le specifiche su come dovrebbe funzionare il linguaggio di programmazione JavaScript.
Questo tutorial fornisce un breve riepilogo delle funzionalità di uso comune di ES6 in modo da poter iniziare rapidamente in ES6.
JavaScript lascia
JavaScript letviene utilizzato per dichiarare le variabili. In precedenza, le variabili venivano dichiarate utilizzando la varparola chiave.
Per ulteriori informazioni sulla differenza tra lete var, visita JavaScript let vs var.
Le variabili dichiarate utilizzando lethanno un ambito di blocco . Ciò significa che sono accessibili solo all'interno di un particolare blocco. Per esempio,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
JavaScript const
L' constistruzione viene utilizzata per dichiarare le costanti in JavaScript. Per esempio,
// name declared with const cannot be changed const name = 'Sara';
Una volta dichiarato, non è possibile modificare il valore di una constvariabile.
Funzione freccia JavaScript
Nella versione ES6 , è possibile utilizzare le funzioni freccia per creare espressioni di funzioni. Ad esempio,
questa funzione
// function expression let x = function(x, y) ( return x * y; )
può essere scritto come
// function expression using arrow function let x = (x, y) => x * y;
Per ulteriori informazioni sulle funzioni freccia, visitare JavaScript Arrow Function.
Classi JavaScript
La classe JavaScript viene utilizzata per creare un oggetto. La classe è simile a una funzione di costruzione. Per esempio,
class Person ( constructor(name) ( this.name = name; ) )
La parola chiave classviene utilizzata per creare una classe. Le proprietà vengono assegnate in una funzione di costruzione.
Ora puoi creare un oggetto. Per esempio,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Per ulteriori informazioni sui corsi, visita Corsi JavaScript.
Valori dei parametri predefiniti
Nella versione ES6 è possibile passare i valori predefiniti nei parametri della funzione. Per esempio,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
Nell'esempio sopra, se non si passa il parametro per y, ne occorreranno 5 per impostazione predefinita.
Per ulteriori informazioni sui parametri predefiniti, visitare Parametri predefiniti della funzione JavaScript.
Valori letterali modello JavaScript
Il letterale del modello ha reso più semplice includere variabili all'interno di una stringa. Ad esempio, prima di dover fare:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Ciò può essere ottenuto utilizzando il letterale del modello:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Per ulteriori informazioni sui letterali modello, visita JavaScript Template Literal.
Destrutturazione JavaScript
La sintassi destrutturante semplifica l'assegnazione di valori a una nuova variabile. Per esempio,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Utilizzando la sintassi di destrutturazione ES6 , il codice sopra può essere scritto come:
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Per saperne di più sulla destrutturazione, visita Destructuring JavaScript.
Importazione ed esportazione di JavaScript
È possibile esportare una funzione o un programma e utilizzarlo in un altro programma importandolo. Questo aiuta a creare componenti riutilizzabili. Ad esempio, se hai due file JavaScript denominati contact.js e home.js.
Nel file contact.js, puoi esportare la contact()funzione:
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Quindi, quando si desidera utilizzare la contact()funzione in un altro file, è possibile importare semplicemente la funzione. Ad esempio, nel file home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
Promesse JavaScript
Le promesse vengono utilizzate per gestire attività asincrone. Per esempio,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Per ulteriori informazioni sulle promesse, visita Promesse JavaScript.
Parametro di riposo JavaScript e operatore di diffusione
È possibile utilizzare il parametro rest per rappresentare un numero indefinito di argomenti come un array. Per esempio,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
Passi gli argomenti rimanenti usando la … sintassi. Quindi, il nome del parametro rest .
Si utilizza la sintassi di diffusione … per copiare gli elementi in un singolo array. Per esempio,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
Sia il parametro rest che l'operatore spread utilizzano la stessa sintassi. Tuttavia, l'operatore spread viene utilizzato con gli array (valori iterabili).
Per saperne di più sull'operatore spread, visita JavaScript Spread Operator.
