js常用函数(JS高频方法)
169人看过
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方法已被淘汰，现代浏览器统一采用标准事件模型。
