Helaian Rujukan JavaScript

Semua alat
Percuma

Rujukan JavaScript moden yang boleh dicari dan dicetak — sintaks, tatasusunan, rentetan, objek, async/await, DOM dan ciri ES2022+. Percuma.

Variables & types

10
let x = 1;
Block-scoped, reassignable variable
const PI = 3.14;
Block-scoped constant binding
typeof value
Returns the type as a string
Number('42')
Convert a string to a number
String(42)
Convert a value to a string
parseInt('42px', 10)
Parse a leading integer (base 10)
Boolean(0)
Coerce a value to true/false
value ?? 'default'
Nullish coalescing (null/undefined only)
a?.b?.c
Optional chaining, short-circuits on null
Array.isArray(x)
Check whether a value is an array

Functions

9
function add(a, b) { return a + b; }
Named function declaration
const add = (a, b) => a + b;
Arrow function with implicit return
const f = (a = 1) => a;
Default parameter value
function f(...args) {}
Rest parameters collect into an array
f(...arr)
Spread an array into arguments
const { a, b } = obj;
Object destructuring
const [x, y] = arr;
Array destructuring
(function(){})()
Immediately-invoked function (IIFE)
fn.bind(this)
Bind a fixed this context

Strings

10
`Hello ${name}`
Template literal interpolation
str.length
Number of characters
str.includes('a')
Check if a substring exists
str.slice(0, 3)
Extract part of a string
str.replace(/a/g, 'b')
Replace matches (regex)
str.split(',')
Split into an array
str.trim()
Remove surrounding whitespace
str.toUpperCase()
Convert to upper case
str.padStart(3, '0')
Pad the start to a length
str.at(-1)
Character at index (supports negatives)

Arrays

11
arr.map(x => x * 2)
Transform each element
arr.filter(x => x > 0)
Keep matching elements
arr.reduce((a, b) => a + b, 0)
Reduce to a single value
arr.find(x => x.id === 1)
First matching element
arr.some(x => x > 0)
True if any element matches
arr.every(x => x > 0)
True if all elements match
arr.includes(3)
Check for a value
arr.sort((a, b) => a - b)
Numeric ascending sort
[...new Set(arr)]
Remove duplicate values
arr.flat(Infinity)
Fully flatten nested arrays
arr.at(-1)
Last element (negative index)

Objects

9
Object.keys(obj)
Array of own enumerable keys
Object.values(obj)
Array of own values
Object.entries(obj)
Array of [key, value] pairs
{ ...a, ...b }
Merge objects (spread)
Object.assign({}, a, b)
Copy/merge into a target
Object.freeze(obj)
Make an object immutable
{ [key]: value }
Computed property name
obj.hasOwnProperty('x')
Check for an own property
structuredClone(obj)
Deep clone an object

Async & promises

9
async function f() {}
Declare an async function
await fetch(url)
Pause until a promise resolves
Promise.all([p1, p2])
Wait for all to resolve
Promise.allSettled([p1, p2])
Wait for all to settle
Promise.race([p1, p2])
Resolve with the first to settle
new Promise((res, rej) => {})
Create a promise manually
try { await f(); } catch (e) {}
Handle async errors
setTimeout(fn, 1000)
Run after a delay (ms)
queueMicrotask(fn)
Schedule a microtask

Control flow

9
if (a) {} else if (b) {} else {}
Conditional branches
a ? b : c
Ternary expression
switch (x) { case 1: break; }
Multi-way branch
for (const x of arr) {}
Iterate values (iterables)
for (const k in obj) {}
Iterate object keys
while (cond) {}
Loop while a condition holds
arr.forEach((x, i) => {})
Run a callback per element
break / continue
Exit or skip a loop iteration
label: for (...) { break label; }
Break out of nested loops

DOM & events

10
document.querySelector('.x')
First matching element
document.querySelectorAll('.x')
All matching elements (NodeList)
el.addEventListener('click', fn)
Attach an event listener
el.classList.toggle('active')
Toggle a CSS class
el.dataset.id
Read a data-id attribute
el.textContent = 'hi'
Set text safely (no HTML)
el.setAttribute('aria-hidden', true)
Set an attribute
e.preventDefault()
Cancel the default action
el.closest('.parent')
Nearest matching ancestor
document.createElement('div')
Create a new element

Classes & modules

9
class A extends B {}
Class with inheritance
constructor() { super(); }
Initialize and call the parent
#private = 1;
Private class field
static create() {}
Static method on the class
get value() {}
Getter accessor
export default fn;
Default module export
export { a, b };
Named module exports
import x, { y } from './m.js'
Default + named imports
const m = await import('./m.js')
Dynamic import

Tiada entri sepadan dengan “:q”.

Mengenai Helaian Rujukan JavaScript

Helaian rujukan JavaScript ini adalah rujukan satu halaman yang boleh dicari untuk bahasa moden: pemboleh ubah dan jenis, fungsi, rentetan, tatasusunan, objek, async dan promise, aliran kawalan, DOM dan acara, serta kelas dan modul. Setiap entri memasangkan cebisan kod sebenar dengan penjelasan satu baris tentang apa yang ia lakukan.

Ia ditulis untuk JavaScript yang benar-benar digunakan orang hari ini — let dan const, fungsi anak panah, destructuring, spread, optional chaining, literal templat, async/await dan modul ES — jadi ia turut berfungsi sebagai penyegar pantas apabila anda beralih semula daripada bahasa lain.

Keseluruhan helaian dimuatkan sisi klien dan percuma. Tapis secara langsung dengan kotak carian, lompat antara bahagian daripada kandungan lekit, klik mana-mana cebisan untuk menyalinnya, dan cetak halaman untuk rujukan JavaScript di sisi meja anda.

Cara menggunakan Helaian Rujukan JavaScript

  1. Buka helaian dan imbas senarai bahagian — daripada Variables & types hingga DOM & events kepada Classes & modules.
  2. Taip ke dalam kotak carian untuk menapis setiap baris secara langsung; kaunter padanan menunjukkan berapa banyak cebisan yang sepadan.
  3. Gunakan kandungan lekit untuk melompat terus ke bahagian seperti Async & promises.
  4. Klik cebisan, atau ikon salinnya, untuk menyalin kod ke papan keratan anda.
  5. Klik Print untuk salinan bersih dan mesra kertas bagi keseluruhan rujukan.

Soalan lazim

Sembilan bahagian: pemboleh ubah dan jenis, fungsi, rentetan, tatasusunan, objek, async dan promise, aliran kawalan, DOM dan acara, serta kelas dan modul — setiap satu sebagai cebisan sedia salin dengan penerangan ringkas.

Ya. Cebisan menggunakan sintaks semasa — let/const, fungsi anak panah, destructuring, optional chaining, async/await, kelas dan modul ES — mencerminkan JavaScript ES2022+ dan bukan corak lama.

Ya. Mengklik mana-mana cebisan kod, atau ikon salin yang muncul apabila anda mengarahkan tetikus ke atas baris, meletakkannya pada papan keratan anda serta-merta dengan pengesahan “Copied!” ringkas.

Ya. Butang Print menghasilkan susun atur bersih dengan bar carian, navigasi dan butang dibuang, jadi halaman yang dicetak hanya mengandungi cebisan dan penerangannya.

Ya. Ia percuma, dimuatkan sepenuhnya dalam pelayar anda, dan tidak memerlukan akaun.
Kongsi ini
Alat Berkaitan
Helaian Rujukan CSS Rujukan CSS yang boleh dicari dan dicetak — pemilih, model kotak, flexbox, grid, tipografi, peralihan dan ciri moden. Percuma. Percuma
Helaian Rujukan PHP Rujukan PHP 8.3+ yang boleh dicari dan dicetak — sintaks, rentetan, tatasusunan, fungsi, kelas, enum, atribut dan ciri moden. Percuma. Percuma
Helaian Rujukan Python Rujukan Python 3 yang boleh dicari dan dicetak — sintaks, struktur data, comprehension, fungsi, kelas, fail dan pustaka standard. Percuma. Percuma
Helaian Rujukan MySQL Rujukan MySQL yang boleh dicari dan dicetak — pertanyaan, join, indeks, fungsi, jenis data dan perintah pentadbiran. Percuma. Percuma
Helaian Rujukan Shell Rujukan Bash / shell yang boleh dicari dan dicetak — navigasi, fail, paip, pemboleh ubah, gelung, syarat dan one-liner berguna. Percuma. Percuma
Helaian Rujukan SSH Rujukan SSH yang boleh dicari dan dicetak — sambungan, kunci, konfigurasi, terowong, SCP/SFTP dan agent forwarding. Percuma. Percuma
Carian popular
javascript cheat sheet js cheat sheet javascript array methods javascript string methods javascript promises and async await javascript object methods js dom methods javascript syntax reference
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.
Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.