JavaScript作为前端开发的核心语言,其内置函数体系构建了完整的编程能力框架。从基础类型处理到复杂异步操作,从DOM操控到数据结构管理,常用函数覆盖了现代Web开发的全场景需求。这些函数不仅具备跨平台兼容性(如浏览器与Node.js环境),更通过ES6+标准持续演进,形成兼具传统实现与现代特性的技术生态。掌握核心函数的使用场景、参数特性及返回值规律,能够显著提升代码复用性、执行效率和跨平台适配能力,同时为处理复杂业务逻辑提供底层支撑。
一、基础类型转换函数
函数名 | 参数特性 | 返回值 | 典型场景 |
---|---|---|---|
parseInt() | 字符串[, 进制] | 整数 | 将"123px"转换为123 |
parseFloat() | 字符串 | 浮点数 | 处理"3.14rem"数值 |
Number() | 任意类型 | 数字 | 布尔值转0/1 |
String() | 任意类型 | 字符串 | 对象序列化 |
Boolean() | 任意类型 | 布尔值 | 空值判断 |
类型转换函数需注意进制参数影响(如parseInt("0xFF",16)返回255),Number对null返回0的特殊性,以及Boolean对空对象返回true的特性。建议优先使用显式转换避免隐式转换陷阱。
二、数组操作核心函数
函数分类 | 代表函数 | 功能特征 | ES版本 |
---|---|---|---|
遍历类 | forEach() | 同步迭代 | ES3 |
映射类 | map() | 生成新数组 | ES5 |
过滤类 | filter() | 条件筛选 | ES5 |
归并类 | reduce() | 累积计算 | ES5 |
填充类 | fill() | 批量赋值 | ES6 |
高阶函数map/filter/reduce构成数组操作的三大支柱,其中reduce可替代for循环实现复杂计算。flat()与flatMap()在处理嵌套数组时表现突出,但需注意兼容性问题。
三、字符串处理函数
函数类型 | 关键函数 | 参数特征 | ES支持 |
---|---|---|---|
查找类 | includes() | 字符串/子串 | ES6 |
分割类 | split() | 分隔符[, limit] | ES3 |
匹配类 | match() | 正则表达式 | ES3 |
格式化类 | padStart() | 目标长度/填充字符 | ES8 |
模板类 | template strings | 嵌入表达式 | ES6 |
ES6新增的模板字符串彻底改变了字符串拼接方式,配合`${}`语法可嵌入变量和表达式。正则匹配建议优先使用String.prototype.match()而非RegExp.prototype.exec(),因其返回结果更直观。
四、数学运算函数
函数类别 | 核心函数 | 参数范围 | 返回特性 |
---|---|---|---|
随机数 | Math.random() | 无 | [0,1)浮点数 |
取整类 | Math.floor() | 任意实数 | 向下取整 |
舍入类 | Math.round() | 任意实数 | 四舍五入 |
幂运算 | Math.pow() | 底数/指数 | 高精度计算 |
三角函数 | Math.sin() | 弧度值 | [-1,1]区间 |
Math对象方法均为静态调用,无需实例化。处理大数运算时需注意精度丢失问题,可结合Number.EPSILON进行误差修正。周期性任务建议使用Math.random()配合模运算生成循环序列。
五、日期时间函数
功能类型 | 关键方法 | 参数特征 | 返回形式 |
---|---|---|---|
时间戳转换 | getTime() | 无 | 毫秒级时间戳 |
格式化输出 | toLocaleString() | locales配置 | 本地化字符串 |
时区计算 | getTimezoneOffset() | 无 | 分钟差值 |
时间组件 | getFullYear() | 无 | 完整年份 |
时间差计算 | Date.parse() | 日期字符串 | 时间戳 |
日期对象构造函数可解析ISO8601格式字符串,但非标准格式需谨慎处理。跨时区计算建议统一转换为UTC时间戳进行运算,避免夏令时等区域政策干扰。
六、DOM操作函数
操作层级 | 核心方法 | 参数特征 | 返回类型 |
---|---|---|---|
元素查询 | getElementById() | ID字符串 | 单个元素 |
多条件查询 | querySelector() | CSS选择器 | 首个匹配元素 |
节点创建 | createElement() | 标签名 | 空元素 |
属性操作 | setAttribute() | 键值对 | undefined |
样式修改 | style.setProperty() | 属性名/值 | void |
操作DOM时需注意文档加载状态,优先使用DOMContentLoaded事件。属性操作建议使用dataset API处理data-前缀属性,避免与标准属性冲突。批量修改建议使用Fragment对象提升性能。
七、事件处理函数
事件阶段 | 核心方法 | 参数特性 | 绑定方式 |
---|---|---|---|
监听注册 | addEventListener() | 事件类型/处理器[, options] | 支持多实例 |
移除监听 | removeEventListener() | 事件类型/处理器[, options] | 需引用原处理器 |
事件对象 | target | 无 | 触发元素 |
preventDefault() | 无 | 阻止默认行为 |
事件委托模式可有效减少监听器数量,通过event.target判断实际触发元素。处理滚动/resize等高频事件时,建议使用节流函数优化性能。IE特有的attachEvent方法已被淘汰,现代浏览器统一采用标准事件模型。
发表评论