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)
[键, 值] 对的数组
{ ...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”。
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。