JavaScript: JavaScript 参考手册

Q: 官方 JavaScript 参考在哪里？

官方参考在 MDN Web Docs — 涵盖每个方法、属性和边界情况。

Q: 如何保持本参考的更新？

收藏 MDN。JavaScript 每年都在演进；本页涵盖 ES2020+ 特性。 Array.toSorted() (ES2023) 等新方法可能尚未出现。

Q: 为什么不推荐使用 == ？

== 会执行隐式类型转换（如 0 == "0" 为 true）。使用 === 严格相等可避免意外。

本页是 JavaScript 常用语法和 API 的速查表，按类别整理，方便你快速查找。

1. 语句参考

语句	语法	说明
`var`	`var name = value;`	函数作用域变量声明（已不推荐，用 `let` 替代）
`let`	`let name = value;`	块级作用域变量声明，可重新赋值
`const`	`const name = value;`	块级作用域常量声明，不可重新赋值
`if/else`	`if (cond) {} else if (cond) {} else {}`	条件判断
`for`	`for (let i = 0; i < n; i++) {}`	经典循环
`while`	`while (cond) {}`	条件循环，先判断后执行
`do...while`	`do {} while (cond);`	条件循环，先执行后判断（至少执行一次）
`switch`	`switch (expr) { case val: break; default: }`	多分支匹配
`try/catch`	`try {} catch (err) {} finally {}`	异常捕获
`function`	`function name(params) {}`	函数声明
`return`	`return value;`	函数返回值
`class`	`class Name { constructor() {} }`	类声明
`import`	`import { name } from 'module';`	导入模块
`export`	`export const name = value;`	导出模块

▶ 示例

JAVASCRIPT

// 本节代码示例
const message = "你好，世界!";
console.log(message);

▶ 试一试

这是最简单的示例，后续章节会详细解释。## 2. 运算符参考

类别	运算符	说明
算术	`+ - * / % **`	加、减、乘、除、取余、幂
算术	`++ --`	自增、自减
比较	`== != === !==`	相等、不等、全等、不全等
比较	`> < >= <=`	大于、小于、大于等于、小于等于
逻辑	`&& \|\| !`	与、或、非
赋值	`= += -= *= /= %=`	赋值及复合赋值
三元	`cond ? a : b`	条件表达式
展开	`...arr`	展开数组或对象

3. 字符串方法速查

方法	语法	说明
`length`	`str.length`	字符串长度（属性，不是方法）
`charAt`	`str.charAt(index)`	返回指定位置的字符
`indexOf`	`str.indexOf(search, from?)`	查找子串位置，找不到返回 -1
`includes`	`str.includes(search, from?)`	是否包含子串，返回布尔值
`slice`	`str.slice(start, end?)`	提取子串，支持负索引
`substring`	`str.substring(start, end?)`	提取子串，不支持负索引
`replace`	`str.replace(pattern, replacement)`	替换第一个匹配
`toUpperCase`	`str.toUpperCase()`	转大写
`toLowerCase`	`str.toLowerCase()`	转小写
`trim`	`str.trim()`	去除首尾空白
`split`	`str.split(separator, limit?)`	按分隔符拆分为数组
`padStart`	`str.padStart(length, fill)`	前面填充到指定长度
`padEnd`	`str.padEnd(length, fill)`	后面填充到指定长度
`repeat`	`str.repeat(count)`	重复字符串
`match`	`str.match(regexp)`	正则匹配，返回数组或 null

4. 数组方法速查

方法	语法	说明
`push`	`arr.push(item)`	末尾添加，返回新长度
`pop`	`arr.pop()`	末尾移除，返回移除项
`shift`	`arr.shift()`	开头移除，返回移除项
`unshift`	`arr.unshift(item)`	开头添加，返回新长度
`splice`	`arr.splice(start, deleteCount, ...items)`	增删改（会修改原数组）
`slice`	`arr.slice(start, end?)`	截取子数组（不修改原数组）
`map`	`arr.map(fn)`	映射，返回新数组
`filter`	`arr.filter(fn)`	过滤，返回满足条件的新数组
`reduce`	`arr.reduce(fn, init)`	累积计算，返回单个值
`find`	`arr.find(fn)`	找到第一个满足条件的元素
`findIndex`	`arr.findIndex(fn)`	找到第一个满足条件的索引
`sort`	`arr.sort(compareFn?)`	排序（会修改原数组）
`reverse`	`arr.reverse()`	反转（会修改原数组）
`forEach`	`arr.forEach(fn)`	遍历，无返回值
`every`	`arr.every(fn)`	是否全部满足条件
`some`	`arr.some(fn)`	是否至少一个满足条件
`includes`	`arr.includes(item, from?)`	是否包含某元素
`indexOf`	`arr.indexOf(item, from?)`	查找元素索引
`join`	`arr.join(separator?)`	数组转字符串
`concat`	`arr.concat(arr2)`	合并数组（不修改原数组）
`flat`	`arr.flat(depth?)`	扁平化嵌套数组

5. Math 方法速查

方法	语法	说明
`round`	`Math.round(x)`	四舍五入
`floor`	`Math.floor(x)`	向下取整
`ceil`	`Math.ceil(x)`	向上取整
`random`	`Math.random()`	返回 [0, 1) 随机数
`max`	`Math.max(a, b, ...)`	返回最大值
`min`	`Math.min(a, b, ...)`	返回最小值
`abs`	`Math.abs(x)`	绝对值
`pow`	`Math.pow(base, exp)`	幂运算
`sqrt`	`Math.sqrt(x)`	平方根
`PI`	`Math.PI`	圆周率 ≈ 3.14159
`E`	`Math.E`	自然常数 ≈ 2.71828
`trunc`	`Math.trunc(x)`	去除小数部分
`sign`	`Math.sign(x)`	返回 1 / 0 / -1

6. DOM 方法速查

方法/属性	语法	说明
`getElementById`	`document.getElementById('id')`	按 id 获取单个元素
`querySelector`	`document.querySelector('selector')`	CSS 选择器获取第一个
`querySelectorAll`	`document.querySelectorAll('selector')`	CSS 选择器获取所有
`getElementsByClassName`	`document.getElementsByClassName('cls')`	按类名获取（动态集合）
`getElementsByTagName`	`document.getElementsByTagName('tag')`	按标签名获取（动态集合）
`textContent`	`el.textContent`	读写纯文本内容
`innerHTML`	`el.innerHTML`	读写 HTML 内容（注意 XSS）
`setAttribute`	`el.setAttribute('name', 'value')`	设置属性
`getAttribute`	`el.getAttribute('name')`	读取属性
`classList`	`el.classList.add/remove/toggle/contains`	类名操作
`createElement`	`document.createElement('tag')`	创建元素节点
`appendChild`	`parent.appendChild(child)`	追加子节点到末尾
`removeChild`	`parent.removeChild(child)`	移除子节点
`cloneNode`	`el.cloneNode(deep?)`	克隆节点（true 深克隆）

7. 事件参考

事件	触发时机	常用元素
`click`	单击	任意元素
`dblclick`	双击	任意元素
`mouseover`	鼠标移入	任意元素
`mouseout`	鼠标移出	任意元素
`keydown`	按键按下	document、表单元素
`keyup`	按键松开	document、表单元素
`submit`	表单提交	form
`change`	值改变并失焦	input、select、textarea
`input`	值实时改变	input、textarea
`load`	页面及资源加载完成	window
`DOMContentLoaded`	HTML 解析完成	document
`focus`	获得焦点	表单元素
`blur`	失去焦点	表单元素
`scroll`	滚动	window、可滚动元素
`resize`	窗口大小改变	window

❓ 常见问题

Q 官方 JavaScript 参考在哪里？

A 官方参考在 MDN Web Docs — 涵盖每个方法、属性和边界情况。

Q 如何保持本参考的更新？

A 收藏 MDN。JavaScript 每年都在演进；本页涵盖 ES2020+ 特性。Array.toSorted() (ES2023) 等新方法可能尚未出现。

Q 为什么不推荐使用 ==？

A == 会执行隐式类型转换（如 0 == "0" 为 true）。使用 === 严格相等可避免意外。

📖 小节

本参考涵盖核心 JavaScript 语句、运算符和方法
MDN 是边界情况和新特性的权威来源
优先使用 === 而非 == 以避免类型强制转换的 bug
数组和字符串方法稳定，但每年都有新方法出现

📝 作业

选 3 个你不认识的方法。阅读它们的 MDN 文档。为每个写一句话总结。
找到你代码中一个使用 == 的地方，重构为 ===。运行测试。
列出 5 个接受回调函数的数组方法。描述回调的签名。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们