Top 10 ES6 funkce každý vývojář JavaScriptu musí znát

výchozí parametry v ES6

V ES6, můžeme výchozí hodnoty umístit přímo do podpisu funkcí.

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

V ES5 jsme používali logiku nebo operátora.

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

Šablony Literály v ES6

V ES6, můžeme použít syntaxi ${PARAMETER} vnitřní zadní zaškrtnutá řetězec.

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

V ES5 musíme přerušit řetězec jako níže.

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

víceřádkové řetězce v ES6

V ES6 je to velmi jednoduché., Stačí použít zadní klíšťata.

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

V ES5 jsme museli použít níže uvedený přístup.

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

Destructuring Úkol v ES6

destructuring syntaxe přiřazení je JavaScript výraz, který je možné rozbalit hodnoty z pole nebo vlastnosti z objektů, na různé proměnné.

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

V ES5 jsme museli použít níže uvedený přístup.

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

Enhanced Object Literals in ES6

object literals usnadňují rychlé vytváření objektů s vlastnostmi uvnitř kudrnatých závorek.,

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

V ES5 jsme museli sledovat níže syntaxi.

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

Pro více informací: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

Šipka Funkce v ES6

tuk šipky jsou úžasné, protože oni by váš this správně chovat, tj. this bude mít stejnou hodnotu jako v rámci funkce— to nebude mutovat.

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

V ES5 jsme museli použít _this = toto nebo .bind (toto).,

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

Pro více informací: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Sliby v ES6

Sliby se používá pro asynchronní spuštění. V ES6, můžeme použít slib s šipkou funkce je uvedeno níže.

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

V ES5 musíme použít setTimeout ().

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

Pro více informací: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Blok-Scoped Konstrukty Nechat a Const

let var, který umožňuje, aby oblast působnosti proměnných do bloků.,Takže, hlavní rozdíl mezi dovolit a var je, var obor na nejbližší funkční blok let obor na nejbližší obklopující blok, který může být menší, než funkční blok.

V ES6,

V ES5,

Pokud jde o const, je to prostě neměnný, a to je také blok-scoped jako let.

třídy v ES6

můžeme vytvořit třídu v ES6 pomocí klíčového slova“ třída“. Tvorba a použití tříd v ES5 byla bolest v zadní části, protože neexistovala třída klíčových slov.,

nebudu vám ukazovat příklad tvorby třídy ES5, protože existuje mnoho příchutí.

Moduly v ES6

V ES6, k dispozici jsou moduly s import export operandy.

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

pomocí příkazu importu můžeme importovat proměnnou userID a metodu getName .

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