JavaScript 速查表

所有工具

免費

一份可搜尋、可列印的現代 JavaScript 參考——語法、陣列、字串、物件、async/await、DOM 以及 ES2022+ 特性。免費。

Variables & types

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

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

`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

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

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

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

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

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

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

沒有條目符合「:q」。

關於 JavaScript 速查表

這份 JavaScript 速查表是一個可搜尋的單頁參考，涵蓋現代語言的各個面向：變數與型別、函式、字串、陣列、物件、非同步與 Promise、控制流程、DOM 與事件，以及類別與模組。每個條目都搭配真實的程式碼片段與一行說明。

它針對的是大家現今實際在用的 JavaScript——let 與 const、箭頭函式、解構、展開運算子、選擇性串連、樣板字面值、async/await 與 ES 模組——因此當您從其他語言切換回來時，也能作為快速複習的參考。

整份速查表在用戶端載入且完全免費。用搜尋框即時篩選，透過固定式目錄在各區段間跳轉，點擊任何程式碼片段即可複製，也能列印整頁作為桌邊的 JavaScript 參考。

如何使用 JavaScript 速查表

打開速查表，瀏覽區段列表——從「變數與型別」到「DOM 與事件」再到「類別與模組」。
在搜尋框中輸入文字，即時篩選每一行；符合數量計數器會顯示有多少程式碼片段符合。
使用固定式目錄直接跳到「非同步與 Promise」等區段。
點擊程式碼片段或其複製圖示，將程式碼複製到剪貼簿。
點擊「列印」以取得整份參考的乾淨紙本版本。

常見問題

九個區段：變數與型別、函式、字串、陣列、物件、非同步與 Promise、控制流程、DOM 與事件，以及類別與模組——每個都以可直接複製的程式碼片段搭配簡短說明呈現。

有的。程式碼片段使用目前的語法——let/const、箭頭函式、解構、選擇性串連、async/await、類別與 ES 模組——反映的是 ES2022 以後的 JavaScript，而非舊有寫法。

可以。點擊任何程式碼片段，或滑鼠停在該行時出現的複製圖示，內容就會立即進入剪貼簿，並顯示簡短的「已複製！」確認訊息。

可以。「列印」按鈕會產生乾淨的版面，去除搜尋列、導覽與按鈕，讓列印出的頁面只包含程式碼片段與說明。

是的。它完全免費，在您的瀏覽器中載入，且無需帳號。

JavaScript 速查表

Variables & types

Functions

Strings

Arrays

Objects

Async & promises

Control flow

DOM & events

Classes & modules

關於 JavaScript 速查表

如何使用 JavaScript 速查表

常見問題

JavaScript 速查表涵蓋哪些內容？

它有跟上現代 JavaScript 嗎？

我能一鍵複製程式碼片段嗎？

我能列印這份速查表嗎？

這份速查表免費嗎？

相關工具

熱門搜尋

嵌入此工具