JavaScript 速查表
一份可搜索、可打印的现代 JavaScript 参考——语法、数组、字符串、对象、async/await、DOM 以及 ES2022+ 特性。免费。
Variables & types
10let 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
9function 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
11arr.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
9Object.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
9async 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
9if (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
10document.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
9class 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 速查表
js 速查表
javascript 数组方法
javascript 字符串方法
javascript promise 和 async await
javascript 对象方法
js dom 方法
javascript 语法参考
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。