Top 10 ES6 Caracteristici Fiecare Dezvoltator Javascript trebuie să știe

parametrii implicite în ES6

în ES6, putem pune valorile implicite chiar în semnătura funcțiilor.

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

în ES5, am folosit logica sau operatorul.

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

Șablon Literali în ES6

În ES6, putem folosi o nouă sintaxă ${PARAMETER} interiorul partea din spate-bifat șir.

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

în ES5, trebuie să rupem șirul ca mai jos.

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

șiruri cu mai multe linii în ES6

în ES6, este foarte simplu., Utilizați doar căpușele din spate.

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

în ES5, a trebuit să folosim abordarea de mai jos.

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

Destructurare Misiune în ES6

destructurării atribuire sintaxa este un activarea JavaScript-expresie care face posibilă pentru a despacheta valorile din matrice, sau proprietăți de obiecte, în diferite variabile.

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

în ES5, a trebuit să folosim abordarea de mai jos.

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

Îmbunătățită Obiect Literali în ES6

Obiect literali face ușor de a crea rapid obiecte cu proprietăți în interiorul acolade.,

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

în ES5, a trebuit să urmăm mai jos sintaxa.

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

Pentru mai multe informații: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

Săgeată Funcții în ES6

grăsimea săgețile sunt uimitoare pentru că le-ar face this se comporte în mod corespunzător, și anume, this va avea aceeași valoare ca în contextul funcției— nu va evolua.

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

în ES5, a trebuit să folosim _this = this or .legați (acest lucru).,

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

Pentru mai multe informații: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Promisiuni în ES6

Promisiunile sunt utilizate pentru executarea asincron. În ES6, putem folosi promisiunea cu funcția săgeată prezentată mai jos.

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

în ES5, trebuie să folosim setTimeout().

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

Pentru mai multe informații: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Bloc se referă la Constructe și Să Const

let este un nou var care permite domeniul de aplicare variabila a blocurilor.,Deci, principala diferență între să și var este, var se referă la cel mai apropiat bloc de funcție și let se referă la cel mai apropiat de inchiderea de bloc, care pot fi mai mici decât un bloc de funcție.când vine vorba de const, este doar un imuabil și este, de asemenea, bloc-scoped ca let.

clase în ES6

putem crea clasă în ES6 folosind cuvântul cheie „clasă”. Crearea și utilizarea claselor în ES5 a fost o durere în spate, deoarece nu a existat o clasă de cuvinte cheie.,

nu am de gând să vă arăt exemplu de creare a clasei ES5, deoarece există multe arome.

Module în ES6

În ES6, există module cu import și export operanzi.

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

Putem importa variabila userID și metoda getName folosind Declarația de import .

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