Toptal'ın Hızlı ve Pratik JavaScript Hile Sayfası: ES6 ve Ötesi

sabitler

let vs var

> sabit EULER = 2.7182818284
> EULER = 13
> EULER
> 2.7182818284

> var ortalama = 5
> var ortalama = (ortalama + 1) / 2
> ortalama
> 3
> let değer = 'merhaba dünya'
> let değer = 'yeni olan'
// -> TypeError'ı atar: 'değer' tanımlayıcısı zaten bildirildi

Uyarı! Dizi veya nesne ise, başvuru sabit tutulur . Sabit bir nesneye başvuruysa, içeriği yine de değiştirebilirsiniz, ancak değişkeni asla değiştiremezsiniz.

> const SABİTLER = []
> SABİTLER.push(EULER)
> SABİTLER
> [ 2.71828182884 ]
> SABİTLER = { 'euler': 2.7182818284 }
> SABİTLER
> [ 2.71828182884 ]

Geçici Ölü Bölgelerin farkında olun :

> console.log(val) // -> 'tanımsız'
> var değer = 3
> console.log(val) // -> 3

Çünkü şuna eşittir:

İkili, Sekizli ve Hex Notasyonu

> var val
> konsol.log(val)
> değer = 3
> konsol.log(val)

> 0b1001011101 // 605
> 0o6745 // 3557
> 0x2f50a // 193802

"let/const" ile bildirilen değişkenler kaldırılmaz:

Yeni Türler

> konsol.log(val)
// -> ReferenceError Atar
> değeri = 3 olsun
> console.log(val) // -> 3

Semboller, Haritalar, Zayıf Haritalar ve Kümeler

Ok İşlevi

Yeni Kapsamlı İşlevler

> setTimeout(() => {
… console.log('gecikmeli')
… }, 1000)

> {
… izin ver = 'Luke, ben senin babanım'
… konsol.log(işaret)
… }
> 'Luke, ben senin babanım'

Anonim İşlevle Eşdeğer

Hemen Çağrılan İşlev İfadeleri (IIFE) ile Eşdeğer

> setTimeout(işlev () {
… console.log('gecikmeli')
… }.bind(bu), 1000)

> (işlev () {
… var cue = 'Luke, ben senin babanım' … console.log(cue) // 'Luke, ben –
… }())
> console.log(cue) // Referans Hatası

Nesne Gösterimi Yenilikleri

Şablon Değişmezleri Sayesinde Dize İnterpolasyonu

// Hesaplanan özellikler
> anahtara izin ver = new Date().getTime()
> izin nesnesi = { [anahtar]: “değer” }
> nesne
> { '1459958882881': 'değer' }

// Nesne değişmezleri
balon = { renk, beden };

// İle aynı
balon = {
renk: renk,
boyut: boyut

}

// Daha iyi yöntem gösterimleri
nesne = {
foo (a, b) { … },
çubuk (x, y) { … }
}

> const adı = 'Kaplan'
> sabit yaş = 13
> console.log (`Kedimin adı ${name} ve ${age} yaşında.`)
> Kedimin adı Tiger ve 13 yaşında.

// Yeni satırları koruyabiliriz…
let metin = ( `kedi
köpek
Nikelodeon'
)

Varsayılan Parametreler

> howAreYou işlevi (cevap = 'tamam') {
konsol.log(cevap) // muhtemelen 'tamam'
}

vaatler

Sınıflar, Kalıtım, Ayarlayıcılar, Alıcılar

yeni Söz ((çöz, reddet) => {
request.get(url, (hata, yanıt,
gövde) => {
eğer (vücut) {
çöz(JSON.parse(gövde));
} Başka {
çözmek({});
}
})
}).then(() => { ... })
.catch((err) => hata fırlat)

// Görevleri paralelleştir
tüm söz.([
söz1, söz2, söz3
]).then(() => {
// tüm görevler tamamlandı
})

class Dikdörtgen, Şekil {'i genişletir
yapıcı (id, x, y, w, h) {
süper(id, x, y)
bu.genişlik = w
bu.yükseklik = h
}
// Getter ve setter
genişliği ayarla (w) { this._width = w }
genişlik al () { this._width döndür }
}

class Circle Shape'i genişletir {
yapıcı (id, x, y, yarıçap) {
süper(id, x, y)
this.radius = yarıçap
}
do_a (x) {
a = 12 olsun;
super.do_a(x + a);
}
statik do_b() { ... }
}
Çember.do_b()

Dizileri Yok Etme

Nesneleri İmha Etme

> [a, b, c, d] = [1, 2, 3, 4] olsun;
> konsol.log(a);
> 1
> b
> 2

> izin ver luke = { meslek: 'jedi',
baba: 'anakin' }
> {meslek, baba} = luke olsun
> console.log(meslek, baba)
> jedi anakin

Yayılma Operatörü

...Patron Gibi Yıkım

// Dizileri virgülle ayrılmış hale getirin
// değerler ve daha fazlası
> fonksiyon kaydedici (...args) {
konsol.log('%s argümanları',
args.uzunluk)
args.forEach(konsol.log)
// arg[0], arg[1], arg[2]
}

> const [ kedi, köpek, ...balık ] = [
'skroedinger', 'Laika', 'Nemo', 'Dori']
> balık // -> ['Nemo', 'Dori']

Veya Daha İyi Bir İtiş Yapın

...Ve Gelecekte Yıkım ES7

> dizi = [1, 2, 3] olsun
> [...dizi, 4, 5, 6]
> [1, 2, 3, 4, 5, 6]

{a, b, ...dinlenme} = {a:1, b:2, c:3, d:4}

zaman uyumsuz ES7

ES7'yi bekleyin

zaman uyumsuz işlev schrodinger () {
yeni Söz ver((çöz, reddet)
=> {
const sonuç = Matematik.rastgele > 0,5
setTimeout(() => {
dönüş sonucu? çözmek ('canlı')
: reddet('ölü')
})
})
}

denemek {
konsol.log(schrodinger() bekleniyor)
// -> 'canlı'
} yakalama (hata) {
konsol.log(hata)
// -> 'ölü'
}

ES7'yi dışa aktar

ES7'yi içe aktarma

dışa aktarma işlevi sumTwo (a, b) {
a + b'yi döndür;
}
dışa aktarma sabiti EULER = 2.7182818284
let şeyler = { sumTwo, EULER }
{ şeyler varsayılan olarak } dışa aktar

React'i 'tepkiden' içe aktar
{ EULER } dosyasını './myexports' dosyasından içe aktarın
* './myexports' dosyasından içeri aktarın
// eşittir
öğeleri './myexports'tan içe aktar
// { sumTwo, EULER }

jeneratörler

Bir yineleme protokolü uygulayan bir nesne döndürürler. yani, { value: < some value>, done: <true or false> } döndüren bir next() yöntemine sahiptir .

function* incRand (max) { // Yıldız işareti bunu bir jeneratör olarak tanımlar
while (doğru) {
// Verimden sonra yürütmeyi duraklat, devam et
// next(<bir şey>) çağrıldığında
// ve x'e <bir şey> ata
let x = verim Math.floor(Math.random() * max + 1);
maksimum += x;
}
}

> var rng = incRand(2) // Bir üreteç nesnesi döndürür
> rng.next() // { değer: <1 ile 2 arasında>, bitti: yanlış }
> rng.next(3) // yukarıdaki gibi, ancak 1 ile 5 arasında
> rng.next() // NaN'de 5 + tanımsız sonuçtan beri NaN
> rng.next(20) // Kimse tekrar NaN beklemiyor mu?
> rng.throw(yeni Hata('Kurtarılamaz üretici durumu.'))
// verimden atılacak