Top 10 ES6 Features elke JavaScript-ontwikkelaar moet

standaardparameters in ES6

In ES6 kunnen we de standaardwaarden recht zetten in de handtekening van de functies.

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

in ES5 gebruikten we logica of operator.

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

Template Literals in ES6

in ES6 kunnen we een nieuwe syntaxis ${PARAMETER} gebruiken binnen de back-aangevinkte tekenreeks.

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

in ES5 moeten we de tekenreeks verbreken zoals hieronder.

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

Strings met meerdere regels in ES6

in ES6 is het heel eenvoudig., Gebruik gewoon rug-teken.

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

in ES5 moesten we onderstaande benadering gebruiken.

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

Destructuring Assignment in ES6

De destructuring assignment syntaxis is een JavaScript-expressie die het mogelijk maakt om waarden uit arrays, of eigenschappen van objecten, uit te pakken in verschillende variabele.

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

in ES5 moesten we onderstaande benadering gebruiken.

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

verbeterde Objectletters in ES6

Objectletters maken het eenvoudig om snel objecten te maken met eigenschappen binnen de accolades.,

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

in ES5 moesten we onderstaande syntaxis volgen.

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

voor meer informatie: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

Pijlfuncties in ES6

De fat— pijlen zijn verbazingwekkend omdat ze ervoor zorgen dat uw this zich correct gedragen, d.w.z. this zal dezelfde waarde hebben als in de context van de functie-het zal niet muteren.

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

In ES5 moesten we _this = this of gebruiken .bind(dit).,

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

voor meer informatie: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Beloften in ES6

Beloften worden gebruikt voor asynchrone uitvoering. In ES6 kunnen we promise gebruiken met de pijlfunctie hieronder.

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

in ES5 moeten we setTimeout () gebruiken.

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

voor meer informatie: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Block-Scoped constructies Let and Const

let is een nieuwe var die het mogelijk maakt om de variabele scope naar de blokken.,Het belangrijkste verschil tussen let en var is dat var wordt verplaatst naar het dichtstbijzijnde functieblok en let wordt verplaatst naar het dichtstbijzijnde blok, dat kleiner kan zijn dan een functieblok.

in ES6,

in ES5,

als het gaat om const, Het is gewoon een onveranderlijk en het is ook Block-scope zoals let.

klassen in ES6

We kunnen klasse maken in ES6 met behulp van” class ” sleutelwoord. Klassen creatie en gebruik in ES5 was een pijn in de rug, omdat er geen trefwoord klasse.,

Ik ga je geen voorbeeld van het maken van ES5-klassen laten zien, omdat er veel smaken zijn.

Modules in ES6

in ES6 zijn er modules metimport enexport operanden.

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

we kunnen userid variabele en getName methode importeren met behulp van import statement .

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