当前位置: 首页 > news >正文

js常用函数总结

目录

一、基础操作函数

1. 类型判断

2. 数据转换

二、数组常用函数

1. 遍历与映射

2. 聚合与计算

3. 增删改查

4. 其他常用

三、字符串常用函数

1. 查找与截取

2. 替换与分割

3. 其他常用

四、对象常用函数

1. 属性操作

2. 对象操作

五、日期与时间函数

1. 基础操作

2. 时间戳

3. 格式化(需自定义函数)

六、正则表达式函数

1. 正则测试

2. 字符串匹配

七、其他常用函数

1. 数学函数(Math 对象)

2. 浏览器 API

总结与建议


以下是 JavaScript 中常用的函数分类及示例,涵盖基础操作、数组、字符串、对象、日期、正则表达式等核心场景,帮助你快速掌握常用功能:

一、基础操作函数

1. 类型判断
函数 / 方法作用示例
typeof返回变量的数据类型typeof 'abc' → "string"typeof 123 → "number"
instanceof判断对象是否为某构造函数的实例[] instanceof Array → true
Object.prototype.toString.call()精准判断复杂类型Object.prototype.toString.call([]) → "[object Array]"
2. 数据转换
函数 / 方法作用示例
parseInt()字符串转整数(按进制)parseInt('12px', 10) → 12
parseFloat()字符串转浮点数parseFloat('3.14em') → 3.14
String()转字符串String(123) → "123"
JSON.stringify()对象转 JSON 字符串JSON.stringify({a: 1}) → "{\"a\":1}"
JSON.parse()JSON 字符串转对象JSON.parse('{"a":1}') → {a: 1}

二、数组常用函数

1. 遍历与映射
函数 / 方法作用示例
forEach()遍历数组,执行回调(无返回值)[1,2,3].forEach(x => console.log(x))
map()遍历数组,返回新数组(映射处理)[1,2,3].map(x => x*2) → [2,4,6]
filter()过滤数组,返回符合条件的元素[1,2,3].filter(x => x>2) → [3]
find()查找第一个符合条件的元素[{a:1}, {a:2}].find(x => x.a === 2) → {a:2}
2. 聚合与计算
函数 / 方法作用示例
reduce()聚合数组为单个值(累加、累减等)[1,2,3].reduce((sum, x) => sum + x, 0) → 6
some()判断数组中是否至少有一个元素符合条件[1,2,3].some(x => x>2) → true
every()判断数组中所有元素是否都符合条件[1,2,3].every(x => x<4) → true
3. 增删改查
函数 / 方法作用示例
push()向数组末尾添加元素,返回新长度let arr = [1]; arr.push(2) → arr: [1,2]
pop()删除数组末尾元素,返回删除的元素let arr = [1,2]; arr.pop() → 2arr: [1]
shift()删除数组开头元素,返回删除的元素let arr = [1,2]; arr.shift() → 1arr: [2]
unshift()向数组开头添加元素,返回新长度let arr = [2]; arr.unshift(1) → 2arr: [1,2]
splice()插入 / 删除 / 替换数组元素(修改原数组)let arr = [1,2,3]; arr.splice(1, 1, 'a') → arr: [1, 'a', 3]
concat()合并数组,返回新数组[1,2].concat([3,4]) → [1,2,3,4]
4. 其他常用
函数 / 方法作用示例
slice()截取数组片段,返回新数组(不修改原数组)[1,2,3].slice(1, 3) → [2,3]
sort()数组排序(默认按 Unicode 码,可自定义比较函数)[3,1,2].sort((a,b)=>a-b) → [1,2,3]
includes()判断数组是否包含某个元素[1,2].includes(2) → true
flat()扁平化数组(可指定深度)[1, [2, [3]]].flat(2) → [1,2,3]

三、字符串常用函数

1. 查找与截取
函数 / 方法作用示例
indexOf()查找子字符串首次出现的索引(未找到返回 -1'abc'.indexOf('b') → 1
lastIndexOf()查找子字符串最后一次出现的索引'ababa'.lastIndexOf('a') → 4
substring()截取字符串(start 到 end,不包含 end)'abcde'.substring(1, 3) → 'bc'
substr()截取字符串(从 start 开始,取 length 长度)'abcde'.substr(1, 2) → 'bc'
slice()截取字符串(支持负数索引)'abcde'.slice(-2) → 'de'
2. 替换与分割
函数 / 方法作用示例
replace()替换字符串(支持正则)'a1b2c'.replace(/\d/g, '*') → 'a*b*c'
split()分割字符串为数组'a,b,c'.split(',') → ['a','b','c']
trim()去除字符串首尾空格' abc '.trim() → 'abc'
trimStart()/trimLeft()去除字符串开头空格' abc'.trimStart() → 'abc'
trimEnd()/trimRight()去除字符串末尾空格'abc '.trimEnd() → 'abc'
3. 其他常用
函数 / 方法作用示例
charAt()返回指定索引的字符'abc'.charAt(1) → 'b'
charCodeAt()返回指定索引字符的 Unicode 编码'a'.charCodeAt(0) → 97
repeat()重复字符串指定次数'a'.repeat(3) → 'aaa'
toLowerCase()转小写'AbC'.toLowerCase() → 'abc'
toUpperCase()转大写'AbC'.toUpperCase() → 'ABC'

四、对象常用函数

1. 属性操作
函数 / 方法作用示例
Object.keys()返回对象所有属性名组成的数组Object.keys({a:1, b:2}) → ['a','b']
Object.values()返回对象所有属性值组成的数组Object.values({a:1, b:2}) → [1,2]
Object.entries()返回对象所有键值对组成的数组Object.entries({a:1, b:2}) → [['a',1], ['b',2]]
hasOwnProperty()判断对象是否包含自身属性(非继承){a:1}.hasOwnProperty('a') → true
2. 对象操作
函数 / 方法作用示例
Object.assign()合并对象(浅拷贝)Object.assign({a:1}, {b:2}) → {a:1, b:2}
JSON.parse()/JSON.stringify()对象与 JSON 互转见 “基础操作函数” 部分
Object.create()创建继承指定原型的对象let proto = {foo: 'bar'}; let obj = Object.create(proto); → obj.foo → 'bar'
delete 操作符删除对象属性let obj = {a:1}; delete obj.a; → obj 变为 {}

五、日期与时间函数

1. 基础操作
函数 / 方法作用示例(以 new Date('2023-10-01') 为例)
getFullYear()获取年份2023
getMonth()获取月份(0-11)9(10 月对应 9)
getDate()获取日期(1-31)1
getDay()获取星期(0-6,0 为周日)0(假设 2023-10-01 是周日)
2. 时间戳
函数 / 方法作用示例
Date.now()获取当前时间戳(毫秒)16961568000000(假设为 2023-10-01 00:00:00)
getTime()获取 Date 对象的时间戳new Date().getTime() → 同上
3. 格式化(需自定义函数)

javascript

// 示例:格式化日期为 'YYYY-MM-DD'
function formatDate(date) {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零const day = String(date.getDate()).padStart(2, '0');return `${year}-${month}-${day}`;
}
formatDate(new Date()) → '2023-10-01'

六、正则表达式函数

1. 正则测试
函数 / 方法作用示例
test()测试字符串是否匹配正则/\d/.test('a1b') → true
exec()执行匹配,返回匹配结果数组/(\d)/.exec('a1b') → ['1', '1', index: 1, input: 'a1b']
2. 字符串匹配
函数 / 方法作用示例
match()字符串匹配正则,返回匹配结果数组'a1b2c'.match(/\d/g) → ['1','2']
replace()结合正则替换字符串'a1b2c'.replace(/\d/g, '*') → 'a*b*c'
split()结合正则分割字符串'a1b2c'.split(/\d/) → ['a','b','c']

七、其他常用函数

1. 数学函数(Math 对象)
函数 / 方法作用示例
Math.random()生成 [0,1) 随机数Math.random() → 0.3456...
Math.floor()向下取整Math.floor(3.9) → 3
Math.ceil()向上取整Math.ceil(3.1) → 4
Math.round()四舍五入取整Math.round(3.6) → 4
Math.max/min()求最大值 / 最小值Math.max(1,3,2) → 3Math.min(1,3,2) → 1
2. 浏览器 API
函数 / 方法作用示例
setTimeout()延迟执行函数(单次)setTimeout(() => console.log('延迟 1 秒'), 1000)
setInterval()循环执行函数(间隔执行)setInterval(() => console.log('每秒执行'), 1000)
clearTimeout()/clearInterval()清除定时器与上述函数配合使用,停止定时器
console.log()控制台输出console.log('Hello World!')

总结与建议

  1. 记忆技巧:按场景分类记忆(如数组、字符串、对象),优先掌握高频函数(如 forEachmapfiltersplitreplace 等)。
  2. 实践建议:通过刷题(如 LeetCode)或项目练习巩固,注意不同函数的副作用(如 splice 修改原数组,slice 返回新数组)。
  3. 查阅文档:熟练使用 MDN 文档(MDN Web Docs)查询函数细节和兼容性。
http://www.dtcms.com/a/233941.html

相关文章:

  • 使用Python提取照片元数据:方法与实战指南
  • Next打包导出静态文件(纯前端),不要服务器端(node), 隐藏左下角调试模式(“next“: “^15.3.3“,)
  • python版若依框架开发:项目结构解析
  • python打卡day45
  • Qt实现一个悬浮工具箱源码分享
  • 当机械音色遇见抒情诗:IndexTTS与CosyVoice的中文语音对决
  • PS如何傻瓜式扣图、图片编辑、图片合成
  • springcloud openfeign 偶现 Caused by: java.net.UnknownHostException
  • 强化学习原理入门-2马尔科夫决策过程
  • jar包如何引入
  • C++算法动态规划1
  • Odoo电子邮件使用配置指南
  • CppCon 2015 学习:Comparison is not simple, but it can be simpler.
  • 008-libb64 你有多理解base64?-C++开源库108杰
  • AppTrace技术全景:开发者视角下的工具链与实践经验
  • GPU 图形计算综述 (三):可编程管线 (Programmable Pipeline)
  • 数据结构:递归:泰勒展开式(Taylor Series Expansion)
  • 架构师级考验!飞算 JavaAI 炫技赛:AI 辅助编程解决老项目难题
  • 单精度浮点数值 和 双精度浮点数值
  • 嵌入式学习之系统编程(十)网络编程之TCP传输控制协议
  • TDengine 开发指南—— UDF函数
  • Web 架构相关文章目录(持续更新中)
  • YAML在自动化测试中的三大核心作用
  • RADIUS-管理员获取共享密钥
  • 拆装与维修汇总帖
  • Qt/C++学习系列之QGroupBox控件的简单使用
  • Linux项目自动化构建工具——make/Makefile
  • 掌握YOLOv8:从视频目标检测到划定区域统计计数的实用指南
  • 6.824 lab1
  • float、double 这类 浮点数 相比,DECIMAL 是另一种完全不同的数值类型