Top 10 ES6 Jellemzők Minden Javascript fejlesztőnek tudnia kell

alapértelmezett paraméterek ES6

ES6-ban az alapértelmezett értékeket közvetlenül a funkciók aláírásába helyezhetjük.

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

az ES5-ben logikát vagy operátort használtunk.

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

sablon literálok az ES6-ban

az ES6-ban egy új szintaxist használhatunk ${PARAMETER} a hátsó sor belsejében.

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

az ES5-ben meg kell szakítanunk a karakterláncot, mint az alábbiakban.

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

többsoros karakterláncok az ES6-ban

az ES6-ban nagyon egyszerű., Csak használja a hátsó kullancsokat.

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

az ES5-ben az alábbi megközelítést kellett használnunk.

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

Destructuring hozzárendelés ES6

a destructuring hozzárendelés szintaxisa egy JavaScript kifejezés, amely lehetővé teszi, hogy kicsomagolja értékek tömbök, vagy tulajdonságok objektumok, a különböző változó.

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

az ES5-ben az alábbi megközelítést kellett használnunk.

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 make it easy to quickly create objects with properties inside the curly braces.,

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

az ES5-ben az alábbi szintaxist kellett követnünk.

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

További információ: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

nyíl funkciók ES6

a kövér nyilak csodálatosak, mert a this viselkedjenek megfelelően, azaz this ugyanaz az érték lesz, mint a függvény összefüggésében— nem mutálódik.

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

az ES5-ben _this = ezt vagy .bind(ez).,

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

További információ: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

az ES6

ígéreteit aszinkron végrehajtásra használják. Az ES6, tudjuk használni ígéret nyíl funkció alább látható.

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

az ES5-ben setTimeout () – t kell használnunk.

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

További információ: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Block-Scoped konstrukciók Let and Const

let egy új var amely lehetővé teszi, hogy a változó a blokkokat.,Tehát a let és a var közötti fő különbség az, hogy avar a legközelebbi függvényblokkhoz van mérve, és alet a legközelebbi zárt blokkhoz van rögzítve, amely kisebb lehet, mint egy függvényblokk.

az ES6-ban,

az ES5-ben,

a const esetében ez csak egy megváltoztathatatlan, és blokkolt, mint a let.

osztályok ES6

hozhatunk létre osztály ES6 segítségével “class” kulcsszó. Az ES5-ben az osztályok létrehozása és használata fájt hátul, mert nem volt kulcsszó osztály.,

nem fogom megmutatni az ES5 osztály létrehozásának példáját, mert sok íz létezik.

modulok az ES6-ban

az ES6-ban vannak olyan modulok, amelyek import és export operands.

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

importálhatunk userID változót és getName metódust importálási utasítás segítségével .

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