Top 10 ES6-funktioner hver Javascript-udvikler skal vide

standardparametre i ES6

i ES6 kan vi sætte standardværdierne lige i signaturen af funktionerne.

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

i ES5 brugte vi logik eller operatør.

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

Skabelon Konstanter i ES6

I ES6, kan vi bruge en ny syntaks ${PARAMETER} indersiden af bagsiden markeret streng.

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

i ES5 skal vi bryde strengen som nedenfor.

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

Multi-line Strings i ES6

i ES6 er det meget enkelt., Bare brug back-flåter.

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

i ES5 måtte vi bruge nedenstående tilgang.

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

Destruktureringsdeklaration Opgave i ES6

destruktureringsdeklaration opgaven syntaks er en JavaScript-udtryk, der gør det muligt at pakke værdier fra arrays, eller egenskaber fra objekter, i forskellige variable.

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

i ES5 måtte vi bruge nedenstående tilgang.

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

forbedrede Objektlitteraler i ES6

Objektlitteraler gør det nemt at hurtigt oprette objekter med egenskaber inde i de krøllede seler.,

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

i ES5 måtte vi følge nedenstående syntaks.

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

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

Pil Funktioner i ES6

Den fede pile er fantastisk, fordi de ville gøre din this at opføre sig ordentligt, dvs, this vil have samme værdi som i forbindelse med den funktion— det vil ikke til at mutere.

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

i ES5 måtte vi bruge _this = dette eller .bind (dette).,

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

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

Løfter i ES6

Løfter bruges til asynkron eksekvering. I ES6, kan vi bruge løfte med pil funktion vist nedenfor.

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

i ES5 skal vi bruge setTimeout().

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

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

Bloker Scoped Konstruktioner og Lad Const

let er et nyt var, som gør det muligt at omfanget af den variabel, til blokke.,Så den største forskel mellem let og var er, var er scoped til nærmeste funktionsblok og let er scoped til nærmeste omsluttende blok, som kan være mindre end en funktionsblok.

I ES6,

I ES5,

Når det kommer til at const, det er bare en uforanderlig og det er også blokere scoped som let.

klasser i ES6

Vi kan oprette klasse i ES6 ved hjælp af “klasse” nøgleord. Klasser oprettelse og brug i ES5 var en smerte bagpå, fordi der ikke var en nøgleordsklasse.,

Jeg vil ikke vise dig eksempel på ES5 klasse skabelse, fordi der er mange varianter.

Moduler i ES6

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

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

Vi kan importere brugerid variabel og getname metode ved hjælp af import erklæring .

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