Top 10 funkcji ES6 każdy programista Javascript musi znać

domyślne parametry w ES6

w ES6 możemy umieścić wartości domyślne bezpośrednio w podpisie funkcji.

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

w ES5 używaliśmy logiki lub operatora.

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

literały szablonów w ES6

w ES6 możemy użyć nowej składni${PARAMETER} wewnątrz zaznaczonego z tyłu łańcucha.

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

w ES5 musimy złamać ciąg jak poniżej.

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

ciągi wieloliniowe w ES6

w ES6 jest to bardzo proste., Użyj kleszczy.

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

w ES5 musieliśmy zastosować podejście poniżej.

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

przypisanie destrukcji w ES6

składnia przypisania destrukcji jest wyrażeniem JavaScript, które umożliwia rozpakowanie wartości z tablic lub właściwości z obiektów do odrębnej zmiennej.

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

w ES5 musieliśmy zastosować podejście poniżej.

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

Rozszerzone literały obiektów w ES6

literały obiektów ułatwiają szybkie tworzenie obiektów z właściwościami wewnątrz nawiasów klamrowych.,

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

w ES5 musieliśmy postępować zgodnie z poniższą składnią.

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

aby uzyskać więcej informacji: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

funkcje strzałek w ES6

strzałki fat są niesamowite, ponieważ sprawią, że twoje this zachowują się poprawnie, tzn. this będzie miał taką samą wartość jak w kontekście funkcji— nie będzie mutował.

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

w ES5 musieliśmy użyć _this = this or .bind (this).,

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

aby uzyskać więcej informacji:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

obietnice w ES6

obietnice są używane do asynchronicznego wykonywania. W ES6 możemy użyć funkcji promise Z pokazaną poniżej strzałką.

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

w ES5 musimy użyć metody setTimeout().

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

aby uzyskać więcej informacji:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

konstrukcje blokowe Let i Const

let jest nowyvar co pozwala na zakres zmiennej do bloków.,Tak więc, główna różnica między let i var jest taka, że var jest ustawiony na najbliższy blok funkcyjny, a let jest ustawiony na najbliższy blok zamykający, który może być mniejszy niż blok funkcyjny.

W ES6,

W ES5,

Jeśli chodzi oconst, to jest po prostu niezmienny i jest również blok-scoped jaklet.

klasy w ES6

możemy utworzyć klasę w ES6 używając słowa kluczowego „class”. Tworzenie i używanie klas w ES5 było uciążliwe, ponieważ nie było klasy słów kluczowych.,

Nie będę wam pokazywał przykładu tworzenia klasy ES5, bo smaków jest wiele.

Moduły w ES6

w ES6 istnieją moduły o parametrachimport Iexport.

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

możemy zaimportować zmienną userID oraz metodę getName używając polecenia import .

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