Helaian Rujukan JavaScript
Rujukan JavaScript moden yang boleh dicari dan dicetak — sintaks, tatasusunan, rentetan, objek, async/await, DOM dan ciri ES2022+. Percuma.
Pemboleh ubah & jenis
10let x = 1;
Pemboleh ubah skop blok, boleh diumpuk semula
const PI = 3.14;
Pengikatan pemalar skop blok
typeof value
Mengembalikan jenis sebagai string
Number('42')
Tukar string kepada nombor
String(42)
Tukar nilai kepada string
parseInt('42px', 10)
Hurai integer pendahulu (asas 10)
Boolean(0)
Paksa nilai kepada true/false
value ?? 'default'
Penggabungan nullish (null/undefined sahaja)
a?.b?.c
Rantaian pilihan, litar pintas pada null
Array.isArray(x)
Semak sama ada nilai ialah array
Fungsi
9function add(a, b) { return a + b; }
Pengisytiharan fungsi bernama
const add = (a, b) => a + b;
Fungsi arrow dengan pulangan tersirat
const f = (a = 1) => a;
Nilai parameter lalai
function f(...args) {}
Parameter rest dikumpul ke dalam array
f(...arr)
Sebarkan array ke dalam argumen
const { a, b } = obj;
Penstrukturan objek
const [x, y] = arr;
Penstrukturan array
(function(){})()
Fungsi serta-merta (IIFE)
fn.bind(this)
Ikat konteks this tetap
String
10`Hello ${name}`
Interpolasi literal templat
str.length
Bilangan aksara
str.includes('a')
Semak jika subrentetan wujud
str.slice(0, 3)
Petik sebahagian string
str.replace(/a/g, 'b')
Ganti padanan (regex)
str.split(',')
Pecahkan kepada array
str.trim()
Buang ruang putih sekeliling
str.toUpperCase()
Tukar kepada huruf besar
str.padStart(3, '0')
Pad permulaan ke satu panjang
str.at(-1)
Aksara pada indeks (sokong negatif)
Array
11arr.map(x => x * 2)
Transformasi setiap elemen
arr.filter(x => x > 0)
Kekalkan elemen yang sepadan
arr.reduce((a, b) => a + b, 0)
Kurangkan kepada satu nilai
arr.find(x => x.id === 1)
Elemen sepadan pertama
arr.some(x => x > 0)
True jika mana-mana elemen sepadan
arr.every(x => x > 0)
True jika semua elemen sepadan
arr.includes(3)
Semak untuk satu nilai
arr.sort((a, b) => a - b)
Isihan menaik berangka
[...new Set(arr)]
Buang nilai pendua
arr.flat(Infinity)
Ratakan sepenuhnya array bersarang
arr.at(-1)
Elemen terakhir (indeks negatif)
Objek
9Object.keys(obj)
Array kunci enumerable sendiri
Object.values(obj)
Array nilai sendiri
Object.entries(obj)
Array pasangan [key, value]
{ ...a, ...b }
Gabung objek (spread)
Object.assign({}, a, b)
Salin/gabung ke sasaran
Object.freeze(obj)
Jadikan objek tak boleh ubah
{ [key]: value }
Nama sifat terkira
obj.hasOwnProperty('x')
Semak untuk sifat sendiri
structuredClone(obj)
Klon mendalam objek
Async & promise
9async function f() {}
Isytihar fungsi async
await fetch(url)
Jeda sehingga promise selesai
Promise.all([p1, p2])
Tunggu semua selesai
Promise.allSettled([p1, p2])
Tunggu semua tetap
Promise.race([p1, p2])
Selesai dengan yang tetap dahulu
new Promise((res, rej) => {})
Cipta promise secara manual
try { await f(); } catch (e) {}
Kendali ralat async
setTimeout(fn, 1000)
Jalan selepas lengah (ms)
queueMicrotask(fn)
Jadualkan microtask
Aliran kawalan
9if (a) {} else if (b) {} else {}
Cabang bersyarat
a ? b : c
Ungkapan ternary
switch (x) { case 1: break; }
Cabang pelbagai hala
for (const x of arr) {}
Lelar nilai (iterable)
for (const k in obj) {}
Lelar kunci objek
while (cond) {}
Gelung selagi syarat dipenuhi
arr.forEach((x, i) => {})
Jalan callback bagi setiap elemen
break / continue
Keluar atau langkau lelaran gelung
label: for (...) { break label; }
Keluar dari gelung bersarang
DOM & peristiwa
10document.querySelector('.x')
Elemen sepadan pertama
document.querySelectorAll('.x')
Semua elemen sepadan (NodeList)
el.addEventListener('click', fn)
Lampirkan pendengar peristiwa
el.classList.toggle('active')
Togol kelas CSS
el.dataset.id
Baca atribut data-id
el.textContent = 'hi'
Tetapkan teks dengan selamat (tiada HTML)
el.setAttribute('aria-hidden', true)
Tetapkan atribut
e.preventDefault()
Batalkan tindakan lalai
el.closest('.parent')
Moyang sepadan terdekat
document.createElement('div')
Cipta elemen baharu
Kelas & modul
9class A extends B {}
Kelas dengan pewarisan
constructor() { super(); }
Mulakan dan panggil induk
#private = 1;
Medan kelas peribadi
static create() {}
Kaedah static pada kelas
get value() {}
Pengakses getter
export default fn;
Eksport modul lalai
export { a, b };
Eksport modul bernama
import x, { y } from './m.js'
Import lalai + bernama
const m = await import('./m.js')
Import dinamik
Tiada entri sepadan dengan “:q”.
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.