topp 10 ES6 funktioner varje Javascript utvecklare måste veta

standardparametrar i ES6

i ES6, kan vi sätta standardvärdena rätt i underskrift av funktionerna.

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

i ES5 använde vi logik eller operatör.

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

Template Literals in ES6

i ES6 kan vi använda en ny syntax${PARAMETER} inuti den bakåtmarkerade strängen.

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

i ES5 måste vi bryta strängen som nedan.

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

multi-line strängar i ES6

i ES6 är det väldigt enkelt., Använd bara Back-ticks.

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

i ES5 var vi tvungna att använda nedanstående tillvägagångssätt.

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

destructuring assignment syntax är ett JavaScript-uttryck som gör det möjligt att packa upp värden från arrayer eller egenskaper från objekt till distinkt variabel.

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

i ES5 var vi tvungna att använda nedanstående tillvägagångssätt.

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

förbättrade Objektliteraler i ES6

objektliteraler gör det enkelt att snabbt skapa objekt med egenskaper inuti lockiga hängslen.,

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

i ES5 var vi tvungna att följa nedan syntax.

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

För mer information:https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

Pilfunktioner i ES6

de feta pilarna är fantastiska eftersom de skulle göra dinthis beter sig korrekt, dvsthis kommer att ha samma värde som i samband med funktionen— det kommer inte att mutera.

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

i ES5 var vi tvungna att använda _this = detta eller .bind(detta).,

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

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

löften i ES6

löften används för asynkron utförande. I ES6 kan vi använda promise med pilfunktion som visas nedan.

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

i ES5 måste vi använda setTimeout().

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

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

Block-Scoped konstruerar låt och Const

let är en nyvar som gör det möjligt att utvidga variabeln till blocken.,Så, den största skillnaden mellan let och var är,var är scoped till närmaste funktionsblock ochlet är scoped till närmaste omslutande block, vilket kan vara mindre än ett funktionsblock.

I ES6,

I ES5,

när det gäller const, det är bara en oföränderlig och det är också block-scoped som let.

klasser i ES6

Vi kan skapa klass i ES6 med hjälp av ”klass” nyckelord. Klasser skapande och användning i ES5 var en smärta i ryggen, eftersom det inte fanns ett nyckelord klass.,

Jag kommer inte att visa dig exempel på ES5-klassskapande, eftersom det finns många smaker.

moduler i ES6

i ES6 finns moduler medimport ochexport operander.

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

vi kan importera userid-variabel och getName-metod med importstatus .

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