Lembar Cheat JavaScript Cepat dan Praktis Toptal: ES6 dan Selanjutnya

Konstanta

let vs var

> const EULER = 2.7182818284
> EULER = 13
> EULER
> 2.7182818284

> var rata-rata = 5
> var rata-rata = (rata-rata + 1) / 2
> rata-rata
> 3
> biarkan nilai = 'halo dunia'
> biarkan nilai = 'apa yang baru'
// -> throws TypeError: Identifier 'value' telah dideklarasikan

Peringatan! Jika array atau objek, referensi tetap konstan . Jika konstanta adalah referensi ke suatu objek, Anda masih dapat mengubah konten, tetapi tidak pernah mengubah variabel.

> konstanta KONSTAN = []
> CONSTANTS.push(EULER)
> KONSTAN
> [ 2.7182818284 ]
> KONSTAN = { 'euler': 2.7182818284 }
> KONSTAN
> [ 2.7182818284 ]

Waspadai Zona Mati Temporal :

> console.log(val) // -> 'tidak terdefinisi'
> var val = 3
> console.log(val) // -> 3

Karena itu setara dengan:

Notasi Biner, Oktal dan Hex

> var val
> console.log(val)
> val = 3
> console.log(val)

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

Variabel yang dideklarasikan dengan "let/const" tidak diangkat:

Tipe Baru

> console.log(val)
// -> Melempar ReferenceError
> biarkan val = 3
> console.log(val) // -> 3

Simbol, Peta, Peta Lemah, dan Set

Fungsi Panah

Fungsi Cakupan Baru

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

> {
… let cue = 'Luke, aku ayahmu'
… console.log(isyarat)
… }
> 'Luke, aku ayahmu'

Setara dengan Fungsi Anonim

Setara dengan Ekspresi Fungsi Segera Dipanggil (IIFE)

> setTimeout(fungsi () {
… console.log('tertunda')
… }.bind(ini), 1000)

> (fungsi () {
… var cue = 'Luke, saya ayahmu' … console.log(cue) // 'Luke, saya –
… }())
> console.log(cue) // Kesalahan Referensi

Kebaruan Notasi Objek

Interpolasi String, Berkat Literal Template

// Properti yang dihitung
> biarkan kunci = new Date().getTime()
> biarkan obj = { [kunci]: “nilai” }
> obj
> { '1459958882881': 'nilai' }

// Objek literal
balon = { warna, ukuran };

// Sama dengan
balon = {
warna: warna,
ukuran: ukuran

}

// Notasi metode yang lebih baik
obj = {
foo (a, b) { … },
batang (x, y) { … }
}

> nama const = 'Harimau'
> usia konstan = 13
> console.log (`Kucing saya bernama ${name} dan berusia ${age} tahun.`)
> Kucing saya bernama Tiger dan berumur 13 tahun.

// Kita bisa mempertahankan baris baru…
biarkan teks = ( `kucing
anjing
nikelodeon`
)

Parameter Default

> function howAreYou (jawaban = 'ok') {
console.log(jawaban) // mungkin 'ok'
}

janji

Kelas, Warisan, Setter, Getter

janji baru((putuskan, tolak) => {
request.get(url, (kesalahan, tanggapan,
tubuh) => {
jika (tubuh) {
menyelesaikan(JSON.parse(tubuh));
} lain {
menyelesaikan({});
}
})
}).lalu(() => { ... })
.catch((err) => lempar err)

// Sejajarkan tugas
Janji.semua([
janji1, janji2, janji3
]).lalu(() => {
// semua tugas selesai
})

kelas Persegi panjang meluas Bentuk {
konstruktor (id, x, y, w, h) {
super(id, x, y)
this.width = w
this.height = h
}
// Pengambil dan penyetel
atur lebar (w) { this._width = w }
dapatkan lebar () { kembalikan this._width }
}

kelas Lingkaran meluas Bentuk {
konstruktor (id, x, y, radius) {
super(id, x, y)
this.radius = radius
}
lakukan_a (x) {
misalkan a = 12;
super.do_a(x + a);
}
statis do_b() { ... }
}
lingkaran.do_b()

Merusak Array

Menghancurkan Objek

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

> let luke = { pekerjaan: 'jedi',
ayah: 'anakin' }
> biarkan {pekerjaan, ayah} = Lukas
> console.log(pekerjaan, ayah)
> jedi anakin

Operator Penyebaran

...Pergi Merusak Seperti Bos

// Ubah array menjadi dipisahkan koma
// nilai dan lainnya
> pencatat fungsi (...args) {
console.log('%s argumen',
args.length)
args.forEach(console.log)
// arg[0], arg[1], arg[2]
}

> const [ kucing, anjing, ...ikan ] = [
'schroedinger', 'Laika', 'Nemo', 'Dori']
> ikan // -> ['Nemo', 'Dori']

Atau Lakukan Dorongan yang Lebih Baik

...Dan Merusak di Masa Depan ES7

> biarkan arr = [1, 2, 3]
> [...arr, 4, 5, 6]
> [1, 2, 3, 4, 5, 6]

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

Tidak sinkron ES7

Tunggu ES7

fungsi async schrodinger () {
kembalikan Janji baru ((putuskan, tolak)
=> {
hasil const = Math.random > 0.5
setTimeout(() => {
hasil kembali? menyelesaikan ('hidup')
: menolak('mati')
})
})
}

mencoba {
console.log(menunggu schrodinger())
// -> 'hidup'
} tangkap (keliru) {
console.log(err)
// -> 'mati'
}

Ekspor ES7

Mengimpor ES7

fungsi ekspor sumTwo (a, b) {
kembalikan a + b;
}
ekspor const EULER = 2.7182818284
biarkan barang = { sumTwo, EULER }
ekspor { barang sebagai default }

impor Bereaksi dari 'bereaksi'
impor { EULER } dari './myexports'
impor * sebagai barang dari './myexports'
// setara dengan
impor barang dari './myexports'
// { jumlahDua, EULER }

generator

Mereka mengembalikan objek yang mengimplementasikan protokol iterasi. yaitu memiliki metode next() yang mengembalikan { value: < some value>, done: <true or false> } .

function* incRand (max) { // Asterisk mendefinisikan ini sebagai generator
sementara (benar) {
// Jeda eksekusi setelah hasil, lanjutkan
// ketika next(<something>) dipanggil
// dan tetapkan <sesuatu> ke x
biarkan x = hasilkan Math.floor(Math.random() * max + 1);
maks += x;
}
}

> var rng = incRand(2) // Mengembalikan objek generator
> rng.next() // { nilai: <antara 1 dan 2>, selesai: false }
> rng.next(3) // seperti di atas, tetapi antara 1 dan 5
> rng.next() // NaN sejak 5 + hasil tidak terdefinisi di NaN
> rng.next(20) // Tidak ada yang mengharapkan NaN lagi?
> rng.throw(new Error('Unrecoverable generator state.'))
// Akan dilempar dari hasil