Top 10 ES6 Ominaisuuksia Javascript Joka Kehittäjän Täytyy Tietää

Oletus Parametrit ES6

ES6, voimme laittaa oletusarvot aivan allekirjoitus toiminnot.

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

ES5, olimme käyttämällä logiikkaa TAI operaattori.

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

Malli Literaaleja vuonna ES6

ES6, voimme käyttää uutta syntaksia ${PARAMETER} sisällä takaisin-rasti merkkijono.

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

ES5, meidän täytyy rikkoa merkkijono, kuten alla.

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

Multi-line Jouset ES6

ES6, se on hyvin yksinkertainen., Käytä vain selkäpiikkejä.

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

ES5, meidän täytyi käyttää alla lähestymistapa.

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

Tuhoa Tehtävän ES6

tuhoa tehtävän syntaksi on JavaScript-lauseke, joka tekee mahdolliseksi purkaa arvot paneelit, tai ominaisuuksia esineitä, osaksi eri muuttuja.

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

ES5: ssä jouduimme käyttämään alla lähestymistä.

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

Parannettu Esine Literaaleja vuonna ES6

Object literaaleja, jotta se on helppo nopeasti luoda objekteja, joiden ominaisuuksia sisällä aaltosulkeita.,

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

ES5: ssä jouduimme seuraamaan syntaksin alla.

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

lisätietoja: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

Nuoli Toimintoja ES6

rasvaa nuolet ovat uskomattomia, koska he tekevät this käyttäytyä kunnolla, eli this on sama arvo kuin osana toiminto— se ei voi muuttua.

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

ES5, meidän täytyi käyttää _this = tämä tai .sido(tämä).,

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

lisätietoja: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Lupauksia ES6

Lupaa käytetään asynkronisen suorituksen. ES6: ssa, voimme käyttää promise with arrow-toimintoa alla.

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

ES5, meidän täytyy käyttää setTimeout().

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

lisätietoja: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Block-Scoped Konstruktioita Anna ja Const

let uuden var jonka avulla soveltamisala muuttujan lohkot.,Niin, tärkein ero antaa ja var on, var scoped lähimpään toiminto lohko ja let scoped lähimpään liittäen lohko, joka voi olla pienempi kuin toiminto estää.

ES6,

ES5,

Kun se tulee const, se on muuttumaton ja se on myös lohko-scoped, kuten let.

luokat ES6

voimme luoda luokan ES6 käyttäen ”luokan” avainsanaa. Luokkien luominen ja käyttö ES5: ssä oli tuskaa takana, koska avainsanaluokkaa ei ollut.,

en aio näyttää esimerkkiä ES5-luokan luomisesta, koska makuja on paljon.

Moduulit ES6

ES6, on moduulit import ja export operandit.

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

Voimme tuoda käyttäjätunnus muuttuja ja getnimi menetelmää käytettäessä tuonti-ilmoitus .

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