js 中常用函数汇总(含示例)
〇、前言
js 在日常开发中还是比较常用的,本文将常用的 js 方法简单汇总一下,希望对你我有一点帮助。
一、重复 / 延迟操作
1.设置固定时间间隔,重复执行(setInterval(funcRef,msecDelay))
// 语法
setInterval(function () {
// 重复操作详情。。。
}, 时间间隔/ms);
// 示例:每间隔 1 秒,在控制台打印出日志
setInterval(function () {
console.log("重复操作执行了")
}, 1000);
2.设置固定延迟时间,单次执行(setTimeout(funcRef,msecDelay))
// 语法
setTimeout(function () {
// 延迟操作详情
}, 延迟触发时间/ms);
// 示例:延迟 2 秒,执行记录日志
setTimeout(function () {
console.log("延迟执行内容")
}, 2000);
二、类型转换
1. 转为 string 字符串类型(xxx.toString()、String(xxx))
// 通过将 bool 类型转为 string 示例:
console.log("JS 测试输出:");
var bool=true;
console.log("bool:",{"outobj":bool});
console.log("bool.toString():",{"outobj":bool.toString()});
console.log("String(bool):",{"outobj":String(bool)});
console.log("null:",{"outobj":null});
console.log("String(null):",{"outobj":String(null)});
//注意,toString不能转null和underfined.
//console.log({"outobj":null.toString()});// Uncaught TypeError: Cannot read properties of null (reading 'toString')
var aa = true;
var str= aa + "";
console.log("str:",{"outobj":str});
2. 转为数值类型(parseInt(xxx)、parseFloat(xxx)、Number(xxx))
1/2 显式转换
console.log("JS 测试输出:");
// Number() 可以把任意值转换成数值,如果要转换的字符串中有一个不是数值的字符,返回 NaN
console.log("Number('aa123'):",{"outobj":Number("aa123")});
console.log("Number('123aa'):",{"outobj":Number("123aa")});
console.log("Number('123'):",{"outobj":Number("123")});
console.log("Number('123.123'):",{"outobj":Number("123.123")});
console.log("Number(true):",{"outobj":Number(true)});
console.log("--------");
// parseInt() 如果第一个字符是数字会解析直到遇到非数字结束;若第一位非数字,则返回 NaN
console.log("parseInt('aa123'):",{"outobj":parseInt("aa123")});
console.log("parseInt('123aa'):",{"outobj":parseInt("123aa")});
console.log("parseInt('123.123'):",{"outobj":parseInt("123.123")});
console.log("parseInt('123'):",{"outobj":parseInt("123")});
console.log("parseInt(true):",{"outobj":parseInt(true)});
// parseInt(string, radix); 其中 radix 可填入二进制或十六进制
console.log("parseInt('a37f', 16):",{"outobj":parseInt("a37f", 16)});
console.log("--------");
// parseFloat() 把字符串转换成浮点数,规则类似于 parseInt()
console.log("parseFloat('aa123.123'):",{"outobj":parseFloat("aa123.123")});
console.log("parseFloat('123.123aa'):",{"outobj":parseFloat("123.123aa")});
console.log("parseFloat('123.123'):",{"outobj":parseFloat("123.123")});
console.log("parseFloat('123'):",{"outobj":parseFloat("123")});
console.log("typeof-parseFloat('123'):",typeof parseFloat("123"));
console.log("parseFloat(true):",{"outobj":parseFloat(true)});
2/2 隐式转换
console.log("JS 测试输出:");
let str = "123";
let num = str - 0;
console.log("num:",{"outobj":num});
console.log("('3' - 2)",{"outobj":("3" - 2)});
console.log("('3' + 2)",{"outobj":("3" + 2)});
console.log("('3' * '2')",{"outobj":("3" * "2")});
console.log("('10' / '2')",{"outobj":("10" / "2")});
console.log("(1 + true)",{"outobj":(1 + true)});
console.log("(1 + false)",{"outobj":(1 + false)});
console.log("(1 + undefined)",{"outobj":(1 + undefined)});
console.log("(3 + null)",{"outobj":(3 + null)});
console.log("('3' + null)",{"outobj":("3" + null)});
console.log("(true + null)",{"outobj":(true + null)});
console.log("(true + undefined)",{"outobj":(true + undefined)});
3. 转为 Boolean 布尔类型(Boolean(xxx))
console.log("JS 测试输出:");
// Boolean():0、''、null、undefined、NaN 会转换成 false,其它都会转换成 true
console.log("Boolean(0):",{"outobj":Boolean(0)});
console.log("Boolean(1):",{"outobj":Boolean(1)});
console.log("Boolean(100):",{"outobj":Boolean(100)});
console.log("Boolean(''):",{"outobj":Boolean('')});
console.log("Boolean(' '):",{"outobj":Boolean(' ')});
console.log("Boolean(null):",{"outobj":Boolean(null)});
console.log("Boolean(undefined):",{"outobj":Boolean(undefined)});
console.log("Boolean(NaN):",{"outobj":Boolean(NaN)});
三、string 字符串相关
1. 查询是否包含指定字符串(xxx.indexOf(searchString[,startIndex]))
// 语法:
// searchString:要查询的字符串
// startIndex:开始查询的位置(从前往后查),可省略
stringvalue.indexOf(searchString[,startIndex])
// startIndex:开始查询的位置(从后往前查),可省略
stringvalue.lastIndexOf(searchString[,startIndex])
// 示例
let stringvalue = "123abcdefg123abcdefg"
let indexx=stringvalue.indexOf("a")
let indexx2=stringvalue.indexOf("a",6)
console.log("indexx:",indexx) // 输出结果:indexx: 3
console.log("indexx2:",indexx2) // 输出结果:indexx2: 13
let indexx11=stringvalue.lastIndexOf("a")
let indexx22=stringvalue.lastIndexOf("a",9)
console.log("indexx11:",indexx11) // 输出结果:indexx11: 13
console.log("indexx22:",indexx22) // 输出结果:indexx22: 3
2. 大小写转换(xxx.toLowerCase()、xxx.toUpperCase())
// 转小写
let stringvalue = "AaBbCc";
console.log(stringvalue.toLowerCase()); // 输出结果:aabbcc
// 转大写
console.log(stringvalue.toUpperCase()) // 输出结果:AABBCC
3. 替换指定的字符串(xxx.replace(regExpression,replaceString))
let stringvalue = "abc123abc";
// 替换第一个匹配的字符串
console.log("stringvalue.replace('abc','ABC'):",{"outobj":stringvalue.replace("abc","ABC")});
// 替换全部匹配的字符串,格式是在 xxx 处填入目标字符串:/xxx/g
console.log("stringvalue.replace(/abc/g,'ABC'):",{"outobj":stringvalue.replace(/abc/g,"ABC")});
4. 分隔字符串返回一个数组(xxx.split(xx))
let stringvalue = "abc||def||ghi||jkl||mno";
console.log("stringvalue.split('||'):",{"outobj":stringvalue.split("||")});
console.log("typeof-stringvalue.split('||'):",{"outobj":typeof stringvalue.split("||")});
5. 截取字符串(xxx.substr(start[,length])、xxx.substring(start[,end]))
let str = "Hello-Tony--";
// 仅设置开始位时,无区别
console.log("str.substr(6)",{"outobj":str.substr(6)});
console.log("str.substring(6)",{"outobj":str.substring(6)});
// 结束位的区别:
// substr(start,end) 从 start 位置开始,截取 end 位
// substring(start,end) 从 start 位置开始,截取到 end 位,且不包含 end 这一位,计数均从 0 开始
console.log("str.substr(1,6)",{"outobj":str.substr(1,6)});
console.log("str.substring(1,6)",{"outobj":str.substring(1,6)});
console.log("str.substr(3,7)",{"outobj":str.substr(3,7)});
console.log("str.substring(3,7)",{"outobj":str.substring(3,7)});
6. 取字符串中的某一位值(xxx.charAt(number))
// 测试结论:无论是汉字、数字、字母,均占一个位置
let str = "Hello-Tony";
console.log("str.charAt(5)",{"outobj":str.charAt(5)});
str = "测试字符串的长度";
console.log("str.charAt(5)",{"outobj":str.charAt(5)});
str = "测a试e字f串b的c长d度";
console.log("str.charAt(5)",{"outobj":str.charAt(5)});
7. 检查是否为数字(xxx.isNaN())
console.log("isNaN(123)",isNaN(123));
console.log("isNaN(-1.23)",isNaN(-1.23));
console.log("isNaN(5-2)",isNaN(5-2));
console.log("isNaN(0)",isNaN(0));
console.log("isNaN('Hello')",isNaN("Hello"));
console.log("isNaN('2005/12/12')",isNaN("2005/12/12"));
四、日期相关操作
1. 时间戳(xxx.getTime())
var dt = new Date("2022-12-21 23:59:59.999"); // 取当前时间:dt = new Date();
console.log("dt.getTime():",{"outobj":dt.getTime()});
console.log("Number(dt):",{"outobj":Number(dt)});
console.log("dt.valueOf():",{"outobj":dt.valueOf()});
console.log("+dt:",{"outobj":+dt});
console.log("Date.parse(dt):",{"outobj":Date.parse(dt)});
在 js 中,将时间对象转换得到的时间戳都是 13 位的,但有时候我们也需要精确到秒的 10 位时间戳,比如微信支付用的就是 10 位的时间戳。要在 JavaScript 获得 10 位的时间戳,大致思路有两个,要么截取前 10 位,要么除以 1000。
// 将 13 位时间戳除以 1000 然后再取整,得到 10 位时间戳数字
Date.parse(new Date())/1000; // 若时间戳精确到秒,则后三位为 0,直接除以 1000 即可
parseInt(new Date().getTime()/1000); // 若时间戳精确到毫秒,则后三位为 不为零,除以 1000 后为带三位小数的浮点数,需要另外取整操作
// 将 13 位时间戳转换为字符串截取前 10 位,得到 10 位时间戳字符串
(+new Date()).toString().substring(0,10); // 截取从第 0 位开始,到第九位,不包含第十位
(+new Date()).toString().substr(0,10); // 从第 0 位开始截取 10 位
将时间戳转为指定的字符串格式:(yyyy-MM-dd HH:mm:ss)
// 分别取日期的各个位值,再按照目标格式拼装
let timespan = Date.parse(new Date());
let time = new Date(timespan);
let yyyy = time.getFullYear();
let m = time.getMonth()+1;
let d = time.getDate();
let h = time.getHours();
let mm = time.getMinutes();
let s = time.getSeconds();
let strdate = yyyy +'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
// 补零函数
function add0(m){
return m < 10 ? '0'+ m : m ;
}
2. 设置已知日期的个别值
var dt = new Date("2022-12-21 23:59:59.999"); // 取当前时间:dt = new Date();
dt.setDate(2)
dt.setMonth(12) // 注:这是月份时会自动加 1,若为 12,则为 一月份
dt.setSeconds(57)
console.log(dt.toLocaleDateString())
console.log(dt.toLocaleTimeString())
console.log(dt.toDateString())
console.log(dt.toString())
五、数学运算
1. 数值的小数位处理(四舍五入、取整、保留 n 位小数)
// 直接取整
console.log("parseInt(1.5)",parseInt(1.5));
// 向上取整
console.log("Math.ceil(1.5):",Math.ceil(1.5));
// 向下取整
console.log("Math.floor(1.5):",Math.floor(1.5));
// 四舍五入
console.log("Math.round(1.5):",Math.round(1.5));
console.log("Math.round(1.4):",Math.round(1.4));
// toFixed(num)返回值为string,把 Number 四舍五入为指定小数位数的数字,num为指定的小数位数
console.log("1.4.toFixed():",1.4.toFixed());
console.log("1.5.toFixed():",1.5.toFixed());
console.log("1.55.toFixed(1):",1.55.toFixed(1));
console.log("1.54.toFixed(1):",1.54.toFixed(1));
2. 其他数学运算
console.log("Math.abs(-1)",Math.abs(-1)); // 绝对值
console.log("Math.max(2,3):",Math.max(2,3)); // 最大值
console.log("Math.min(2,3):",Math.min(2,3)); // 最小值
console.log("Math.pow(2,3):",Math.pow(2,3)); // 幂次方
console.log("Math.random():",Math.random()); // 0.0~1.0(不包含)的随机数
// 通过 Math.random() 转换随机数 1~10(包含)
console.log("Math.floor((Math.random()*10)+1):",Math.floor((Math.random()*10)+1));
注:暂时整理这些,后续有常用的还会添加,也欢迎你的指正和补充。
js 中常用函数汇总(含示例)的更多相关文章
- javascript中常用函数汇总
js中函数很多,在实际项目开发中,函数的应用可以很大程度上简化我们的代码,所以在此记下开发中js中常用的函数,增强记忆. 1.isNaN(X):函数用于检查其参数是否是非数字值. 如果 x 是特殊的非 ...
- OpenCV图像处理中常用函数汇总(1)
//俗话说:好记性不如烂笔头 //用到opencv 中的函数时往往会一时记不起这个函数的具体参数怎么设置,故在此将常用函数做一汇总: Mat srcImage = imread("C:/Us ...
- OpenCV图像处理中常用函数汇总(2)
// 霍夫线变换 hough vector<Vec2f> lines;//定义一个矢量结构lines用于存放得到的线段矢量集合 HoughLines(dstImage,lines,,CV_ ...
- JS中常用函数总结
//LTrim(string):去除左边的空格 function LTrim(str) { var whitespace = new String(" \t\n\r"); var ...
- 【PHP】最详细PHP从入门到精通(三)——PHP中的数组常用函数汇总
PHP从入门到精通 之PHP中的数组常用函数详解 数组作为PHP中最常用的结构之一,PHP强大的数组函数功能,给数组的相关操作带来了极大的便利.今天给大家介绍的PHP中数组函数,是PHP数组中重要的 ...
- Js中常用的字符串,数组,函数扩展
由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展 ...
- 非常实用的PHP常用函数汇总
这篇文章主要介绍了非常实用的PHP常用函数,汇总了加密解密.字符串操作.文件操作.SQL注入等函数的实例与用法说明,在PHP项目开发中非常具有实用价值,需要的朋友可以参考下 本文实例总结了一些在php ...
- php常用函数汇总
php常用函数汇总 字符串截取: 1.substr('要截取的字符串','从第几个字符开始','到第几个字符结束'); * 截取英文或者数字 ...
- JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype
一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...
- js中的函数,Date对象,Math对象和数组对象
函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...
随机推荐
- 天天向上力量B
N=eval(input()) up=pow(1+0.001*N,365) down=pow(1-0.001*N,365) print("{:.2f}, {:.2f}, {:.0f}&quo ...
- vue 自定义千位符过滤器
在main.js页面全局引入 Vue.filter('formatNum', function(value) { if(!value) return '' let num = value.toStri ...
- Tubian-Win上线!Tubian官方的Windows软件适配项目
Sourceforge.net下载:https://sourceforge.net/projects/tubian/ 123网盘下载: https://www.123pan.com/s/XjkKVv- ...
- 一个 dubbo 和 springboot 的兼容性问题
背景介绍 最近把dubbo的版本从2.7.3升级到2.7.15时,遇到一个报错 No application config found or it's not a valid config! ,对应的 ...
- ArrayList LinkedList Vector之间的区别
List主要有ArrayList,LinkedList和vector三种实现.这三种都实现了List接口,使用方式也很相似,主要区别在于其实现方式的不同! 这三种数据结构中,ArrayList和Vec ...
- 🔥支持 Java 19 的轻量级应用开发框架,Solon v1.10.4 发布
Java 轻量级应用开发框架.可用来快速开发 Java 应用项目,主框架仅 0.1 MB. 相对于 Spring Boot 和 Spring Cloud 的项目: 启动快 5 - 10 倍. (更快) ...
- Java注解(1):码农的小秘
很多码农在写代码的时候不太爱写注释,结果任务一多,时间一长,需求一改,就完全不知道当初自己都干了些啥了.好在现在大多数编程语言都有注释功能,能够在代码里面做一些备注,不至于时间长了忘掉.但这些注释只是 ...
- Java云原生崛起微服务框架Quarkus入门实践
@ 目录 概述 定义 GraalVM简介 为何使用 特性 官方性能 实战 入门示例 步骤 安装GraalVM 创建quarkus工程 Idea导入项目 Idea运行和调试 打包成普通的Jar 打包成依 ...
- 提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件
Chrome插件,官方名称extensions(扩展程序):为了方便理解,以下都称为插件. 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开 ...
- 微服务组件--限流框架Spring Cloud Hystrix分析
Hystrix的介绍 [1]Hystrix是springCloud的组件之一,Hystrix 可以让我们在分布式系统中对服务间的调用进行控制加入一些调用延迟或者依赖故障的容错机制. [2]Hystri ...