JavaScript 速查表
一份可搜尋、可列印的現代 JavaScript 參考——語法、陣列、字串、物件、async/await、DOM 以及 ES2022+ 特性。免費。
變數與型別
10let x = 1;
區塊作用域、可重新賦值的變數
const PI = 3.14;
區塊作用域的常數綁定
typeof value
以字串回傳型別
Number('42')
將字串轉為數字
String(42)
將值轉為字串
parseInt('42px', 10)
解析開頭的整數（十進位）
Boolean(0)
將值強制轉為 true/false
value ?? 'default'
空值合併（僅 null/undefined）
a?.b?.c
可選串連，遇 null 即短路
Array.isArray(x)
檢查值是否為陣列
函式
9function add(a, b) { return a + b; }
具名函式宣告
const add = (a, b) => a + b;
具隱含回傳的箭頭函式
const f = (a = 1) => a;
預設參數值
function f(...args) {}
其餘參數收集為陣列
f(...arr)
將陣列展開為引數
const { a, b } = obj;
物件解構
const [x, y] = arr;
陣列解構
(function(){})()
立即執行函式（IIFE）
fn.bind(this)
綁定固定的 this 環境
字串
10`Hello ${name}`
樣板字面值插補
str.length
字元數量
str.includes('a')
檢查子字串是否存在
str.slice(0, 3)
擷取字串的一部分
str.replace(/a/g, 'b')
取代符合項（regex）
str.split(',')
分割為陣列
str.trim()
移除前後空白
str.toUpperCase()
轉為大寫
str.padStart(3, '0')
在開頭補齊至指定長度
str.at(-1)
指定索引的字元（支援負值）
陣列
11arr.map(x => x * 2)
轉換每個元素
arr.filter(x => x > 0)
保留符合的元素
arr.reduce((a, b) => a + b, 0)
歸納為單一值
arr.find(x => x.id === 1)
第一個符合的元素
arr.some(x => x > 0)
任一元素符合則為 true
arr.every(x => x > 0)
所有元素皆符合則為 true
arr.includes(3)
檢查是否含某值
arr.sort((a, b) => a - b)
數值升冪排序
[...new Set(arr)]
移除重複值
arr.flat(Infinity)
完全攤平巢狀陣列
arr.at(-1)
最後一個元素（負索引）
物件
9Object.keys(obj)
自身可列舉鍵的陣列
Object.values(obj)
自身值的陣列
Object.entries(obj)
[key, value] 配對的陣列
{ ...a, ...b }
合併物件（展開）
Object.assign({}, a, b)
複製／合併至目標
Object.freeze(obj)
使物件不可變
{ [key]: value }
計算屬性名稱
obj.hasOwnProperty('x')
檢查是否為自身屬性
structuredClone(obj)
深層複製物件
非同步與 promise
9async function f() {}
宣告 async 函式
await fetch(url)
暫停直到 promise 解析
Promise.all([p1, p2])
等待全部解析
Promise.allSettled([p1, p2])
等待全部完結
Promise.race([p1, p2])
以最先完結者解析
new Promise((res, rej) => {})
手動建立 promise
try { await f(); } catch (e) {}
處理非同步錯誤
setTimeout(fn, 1000)
延遲後執行（毫秒）
queueMicrotask(fn)
排程微任務
流程控制
9if (a) {} else if (b) {} else {}
條件分支
a ? b : c
三元運算式
switch (x) { case 1: break; }
多向分支
for (const x of arr) {}
走訪值（可迭代物件）
for (const k in obj) {}
走訪物件的鍵
while (cond) {}
條件成立時持續迴圈
arr.forEach((x, i) => {})
對每個元素執行回呼
break / continue
跳出或略過迴圈迭代
label: for (...) { break label; }
跳出巢狀迴圈
DOM 與事件
10document.querySelector('.x')
第一個符合的元素
document.querySelectorAll('.x')
所有符合的元素（NodeList）
el.addEventListener('click', fn)
附加事件監聽器
el.classList.toggle('active')
切換 CSS 類別
el.dataset.id
讀取 data-id 屬性
el.textContent = 'hi'
安全設定文字（不含 HTML）
el.setAttribute('aria-hidden', true)
設定屬性
e.preventDefault()
取消預設動作
el.closest('.parent')
最近的符合祖先元素
document.createElement('div')
建立新元素
類別與模組
9class A extends B {}
具繼承的類別
constructor() { super(); }
初始化並呼叫父類別
#private = 1;
私有類別欄位
static create() {}
類別上的靜態方法
get value() {}
getter 存取器
export default fn;
預設模組匯出
export { a, b };
具名模組匯出
import x, { y } from './m.js'
預設加具名匯入
const m = await import('./m.js')
動態匯入
沒有條目符合「:q」。
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。