JavaScript ES6

Cos'è ECMAScript 6?

ECMAScript 6 è anche noto come ES6 e ECMAScript 2015.

Alcuni lo chiamano JavaScript 6.

Questo capitolo introduce alcune nuove caratteristiche di ES6.

  • JavaScript let
  • JavaScript const
  • Potenza (**)
  • Valori predefiniti dei parametri
  • Array.find()
  • Array.findIndex()

Supporto dei browser per ES6 (ECMAScript 2015)

Safari 10 e Edge 14 sono i primi browser a supportare completamente ES6:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript let

L'istruzione let permette di dichiarare variabili con scoperta di blocco.

Esempio

var x = 10;
// Qui x è 10
{ 
  let x = 2;
  // Qui x è 2
}
// Qui x è 10

Prova tu stesso

JavaScript const

const Le istruzioni permettono di dichiarare costanti (variabili JavaScript con valore costante).

Le costanti sono simili a let Le variabili, ma non possono modificare il valore.

Esempio

var x = 10;
// Qui x è 10
{ 
  const x = 2;
  // Qui x è 2
}
// Qui x è 10

Prova tu stesso

Sulla nostra JavaScript Let / Const Leggi di più su let E const del contenuto.

Operatore esponenziale

Operatore di potenza (**Eleva il primo operando all'indice del secondo operando.

Esempio

var x = 5;
var z = x ** 2;          // Il risultato è 25

Prova tu stesso

x ** y Il risultato è Math.pow(x,y) Uguale:

Esempio

var x = 5;
var z = Math.pow(x,2);   // Il risultato è 25

Prova tu stesso

Valori predefiniti dei parametri

ES6 Permette che i parametri delle funzioni abbiano valori predefiniti.

Esempio

function myFunction(x, y = 10) {
  // y è 10 se non specificato o undefined
  return x + y;
}
myFunction(5); // Restituirà 15

Prova tu stesso

Array.find()

find() Il metodo restituisce il valore dell'elemento array primo passato per la funzione di test.

Questo esempio ricerca (restituisce) il primo elemento (valore) maggiore di 18:

Esempio

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Prova tu stesso

Attenzione, questa funzione accetta 3 parametri:

  • Valore dell'elemento
  • Indice dell'elemento
  • L'array stesso

Array.findIndex()

findIndex() Il metodo restituisce l'indice dell'elemento array primo passato per la funzione di test.

Questo esempio determina l'indice del primo elemento maggiore di 18:

Esempio

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Prova tu stesso

Attenzione, questa funzione accetta 3 parametri:

  • Valore dell'elemento
  • Indice dell'elemento
  • L'array stesso

Nuove proprietà numeriche

ES6 ha aggiunto le seguenti proprietà all'oggetto Number:

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

Esempio

var x = Number.EPSILON;

Prova tu stesso

Esempio

var x = Number.MIN_SAFE_INTEGER;

Prova tu stesso

Esempio

var x = Number.MAX_SAFE_INTEGER;

Prova tu stesso

Nuovi metodi numerici

ES6 ha aggiunto 2 nuovi metodi all'oggetto Number:

  • Number.isInteger()
  • Number.isSafeInteger()

Metodo Number.isInteger()

Se il parametro è un intero, allora Number.isInteger() Il metodo restituisce true.

Esempio

Number.isInteger(10);        // Restituisce true
Number.isInteger(10.5);      // Restituisce false

Prova tu stesso

Metodo Number.isSafeInteger()

Un numero intero sicuro può essere rappresentato esattamente come un numero a precisione doppia.

Se il parametro è un numero intero sicuro, allora Number.isSafeInteger() Il metodo restituisce true.

Esempio

Number.isSafeInteger(10);    // Restituisce true
Number.isSafeInteger(12345678901234567890);  // Restituisce false

Prova tu stesso

Un numero intero sicuro è qualsiasi numero intero tra -(253 - 1) e +(253 - 1).

Questo è sicuro: 9007199254740991. Questo non è sicuro: 9007199254740992.

Nuovi metodi globali

ES6 ha aggiunto 2 nuovi metodi numerici globali:

  • isFinite()
  • isNaN()

Metodo isFinite()

Se il parametro è Infinity o NaNse il valore è isFinite() Il metodo restituisce false.

Altrimenti restituisce true:

Esempio

isFinite(10/0);       // Restituisce false
isFinite(10/1);       // Restituisce true

Prova tu stesso

Metodo isNaN()

se il parametro è NaNse il valore è isNaN() Il metodo restituisce true. Altrimenti restituisce falso:

Esempio

isNaN("Hello");       // Restituisce true

Prova tu stesso

Funzione arrow (Arrow Function)

Le funzioni arrow permettono di scrivere espressioni di funzione con una sintassi breve.

Non hai bisogno function parole chiave,return parole chiave eparentesi graffe.

Esempio

// ES5
var x = function(x, y) {
   return x * y;
}
// ES6
const x = (x, y) => x * y;

Prova tu stesso

Le funzioni arrow non hanno il proprio this. Non sono adatti per definiremetodi oggetto.

Le funzioni arrow non vengono elevate. Devono essere utilizzateprimaper definire.

usare const più di var più sicura, perché l'espressione della funzione espressa è sempre un valore costante.

Se la funzione è una singola istruzione, può essere omessa return Parole chiave e parentesi graffe. Pertanto, mantenerle potrebbe essere una buona abitudine:

Esempio

const x = (x, y) => { return x * y };

Prova tu stesso