Top 10 ES6 Caratteristiche Ogni sviluppatore Javascript deve sapere

Parametri di default in ES6

In ES6, possiamo mettere i valori di default a destra nella firma delle funzioni.

var calculateArea = function(height = 50, width = 80) { 
// write logic
...
}

In ES5, stavamo usando la logica O l’operatore.

var calculateArea = function(height, width) { 
height = height || 50;
width = width || 80;
// write logic
...
}

Modelli letterali in ES6

In ES6, possiamo usare una nuova sintassi ${PARAMETER} all’interno della stringa arretrata.

var name = `Your name is ${firstName} ${lastName}.`

In ES5, dobbiamo rompere la stringa come di seguito.

var name = 'Your name is ' + firstName + ' ' + lastName + '.'

Stringhe multilinea in ES6

In ES6, è molto semplice., Basta usare back-zecche.

let poemData = `Johny Johny Yes Papa, 
Eating sugar? No, papa!
Telling lies? No, papa!
Open your mouth Ah, ah, ah!`

In ES5, abbiamo dovuto usare l’approccio sottostante.

var poemData = 'Johny Johny Yes Papa,\n' 
+ 'Eating sugar? No, papa!\n'
+ 'Telling lies? No, papa!\n'
+ 'Open your mouth Ah, ah, ah!'

Assegnazione di destrutturazione in ES6

La sintassi di assegnazione di destrutturazione è un’espressione JavaScript che consente di decomprimere valori da array o proprietà da oggetti in variabili distinte.

var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

In ES5, abbiamo dovuto usare l’approccio sottostante.

var o = {p: 42, q: true};
var p = o.p;
var q = o.q;
console.log(p); // 42
console.log(q); // true

I letterali oggetto avanzati in ES6

i letterali oggetto semplificano la creazione rapida di oggetti con proprietà all’interno delle parentesi graffe.,

function getLaptop(make, model, year) {
return {
make,
model,
year
}
}
getLaptop("Apple", "MacBook", "2015");

In ES5, abbiamo dovuto seguire sotto la sintassi.

function getLaptop(make, model, year) {
return {
make: make,
model: model,
year: year
}
}
getLaptop("Apple", "MacBook", "2015");

Per ulteriori info: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

Freccia Funzioni in ES6

Il grasso frecce sono sorprendenti, perché sarebbe rendere il vostro this comportarsi correttamente, cioè, this avrà lo stesso valore nel contesto della funzione— non mutare.

$('.btn').click((event) => { 
this.doSomething() 
});

In ES5, abbiamo dovuto usare _this = this or .bind (questo).,

var _this = this; 
$('.btn').click(function(event){ 
_this.doSomething();
});

Per maggiori informazioni:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Le promesse in ES6

Le promesse vengono utilizzate per l’esecuzione asincrona. In ES6, possiamo usare la promessa con la funzione freccia mostrata di seguito.

var asyncCall = new Promise((resolve, reject) => {
// do something async 
resolve();
}).then(()=> { 
console.log('Yay!');
})

In ES5, dobbiamo usare setTimeout().

setTimeout(function(){ 
console.log('Yay!');
}, 1000);

Per maggiori informazioni: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Costrutti con ambito di blocco Let e Const

let è un nuovo var che consente di applicare la variabile ai blocchi.,Quindi, la differenza principale tra let e var è,var è scope al blocco funzione più vicino elet è scope al blocco di chiusura più vicino, che può essere più piccolo di un blocco funzione.

In ES6,

In ES5,

Quando si tratta diconst, è solo un immutabile ed è anche a blocchi comelet.

Classi in ES6

Possiamo creare classe in ES6 usando la parola chiave “class”. La creazione e l’utilizzo delle classi in ES5 è stato un problema nella parte posteriore, perché non esisteva una classe di parole chiave.,

Non ti mostrerò un esempio di creazione della classe ES5, perché ci sono molti sapori.

Moduli in ES6

In ES6, ci sono moduli conimporteexport operandi.

export var userID = 10; 
export function getName(name) { 
... 
};

Possiamo importare la variabile UserID e il metodo getName usando l’istruzione import .

import {userID, getName} from 'module';
console.log(userID); // 10