Topp 10 ES6 Har Hver Javascript Utbygger Må Vite

Standard Parametere i ES6

I ES6, kan vi sette standardverdier midt i signatur av funksjoner.

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

I ES5, vi var med logikk ELLER operatør.

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

Mal Verdiane i ES6

I ES6, kan vi bruke en ny syntaks ${PARAMETER} innsiden av ryggen krysset av for streng.

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

I ES5, må vi bryte streng som nedenfor.

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

Multi-line Strenger i ES6

I ES6, det er veldig enkelt., Bare bruk tilbake-flått.

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

I ES5, vi måtte bruke under tilnærming.

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

Destructuring Oppdrag i ES6

destructuring oppdrag syntaks er en JavaScript-uttrykk som gjør det mulig å pakke ut verdier fra tabeller, eller egenskaper på objekter, inn i forskjellige variable.

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

I ES5, vi måtte bruke under tilnærming.

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

Forbedret Objekt Verdiane i ES6

Objekt verdiane gjør det enkelt å raskt opprette objekter med egenskaper inne i krøllparentes.,

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

I ES5, vi hadde til følge under syntaks.

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

For mer info: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

Pil Funksjoner i ES6

fett pilene er fantastisk fordi de ville gjøre din this oppføre seg ordentlig, dvs., this vil ha samme verdi som i konteksten av funksjon— det vil ikke mutere.

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

I ES5, vi måtte bruke _this = dette eller .bind(denne).,

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

For mer info: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Løfter i ES6

Lover er brukt for asynkron gjennomføring. I ES6, kan vi bruke løftet med pil-funksjonen som er vist nedenfor.

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

I ES5, vi trenger å bruke setTimeout().

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

For mer info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Blokker-Omfattet Konstruksjoner og La Const

let er en ny var som gjør det mulig å omfang variabelen til blokkene.,Så, den viktigste forskjellen mellom la og var er, var er omfattet av til nærmeste funksjon blokkere og let er omfattet av til nærmeste omsluttende blokk, som kan være mindre enn en funksjon blokk.

I ES6,

I ES5,

Når det kommer til const, det er bare en uforanderlig og det er også blokkere-som omfattet let.

Klasser i ES6

Vi kan lage klasse i ES6 ved hjelp av «klasse» søkeord. Klasser etablering og bruk i ES5 var en smerte i den bakre, fordi det ikke var en søkeordet klasse.,

jeg har ikke tenkt til å vise dere eksempel på ES5 klasse skapelse, fordi det er mange smaker.

Moduler i ES6

I ES6, det er moduler med import og export operander.

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

Vi kan importere id-variabelen og getName metode ved hjelp av importer uttalelse .

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