JS日期格式化函数性能优化篇

时间:2022-09-06 23:56:31

最近开发的软件中需要用到日志功能,其中有一个重要功能是显示日期和时间。于是网上搜了一把,搜到大量的日期格式化函数,不过比较了下,感觉代码都不够优雅,而且性能都不给力。
对线上一些代码进行了评测,以下是一些结论和优化代码。

测试代码如下,在同以浏览器中,分别对格式化函数进行50万次计算:

var start = new Date().getTime();
var date = new Date();
for(var i = 0;i<500000;i++){
date.format1('yyyy-MM-dd hh:mm:ss');
}
console.log(new Date().getTime() - start);

函数1:

// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子:
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.format1 = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}

测试三次:

成绩1:6657毫秒
成绩2:6739毫秒
成绩3:6747毫秒
平均:6714毫秒

函数2:

/** * 对Date的扩展,将 Date 转化为指定格式的String * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)
可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) * eg: * (new
Date()).pattern("yyyy-MM-dd hh:mm:ss.S")==> 2006-07-02 08:09:04.423
* (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
* (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
* (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
* (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
*/
Date.prototype.format2=function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
"H+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
var week = {
"0" : "/u65e5",
"1" : "/u4e00",
"2" : "/u4e8c",
"3" : "/u4e09",
"4" : "/u56db",
"5" : "/u4e94",
"6" : "/u516d"
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);
}
for(var k in o){
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}

测试三次:

成绩1:7334毫秒
成绩2:7497毫秒
成绩3:7498毫秒
平均:7443毫秒

本着完美主义的态度,自己重新造了个更好的*,分享给需要的同学们,代码如下:

/**
* 对日期进行格式化,
* @param date 要格式化的日期
* @param format 进行格式化的模式字符串
* 支持的模式字母有:
* y:年,
* M:年中的月份(1-12),
* d:月份中的天(1-31),
* h:小时(0-23),
* m:分(0-59),
* s:秒(0-59),
* S:毫秒(0-999),
* q:季度(1-4)
* @return String
* @author yanis.wang@gmail.com
*/
function dateFormat(date, format) {
if(format === undefined){
format = date;
date = new Date();
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t){
var v = map[t];
if(v !== undefined){
if(all.length > 1){
v = '0' + v;
v = v.substr(v.length-2);
}
return v;
}
else if(t === 'y'){
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}

使用方法:

dateFormat('yyyy-MM-dd hh:mm:ss');
dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss');
//测试三次:
成绩1:2903毫秒
成绩2:2900毫秒
成绩3:2896毫秒
平均:2899毫秒

JS日期格式化函数性能优化篇的更多相关文章

  1. js 日期格式化函数(可自定义)

    js 日期格式化函数 DateFormat var DateFormat = function (datetime, formatStr) { var dat = datetime; var str ...

  2. js 日期格式化函数

    直接上代码: // 日期格式化函数 // yyyy/MM/dd hh:mm:ss SSS ⇒ "2017/05/16 09:24:20 850" //"yyyy/M/d ...

  3. js怎么动态加载js文件(JavaScript性能优化篇)

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...

  4. js日期格式化函数

    /** * @author ocq * * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q ...

  5. js 日期格式化 函数

    function formatDate(date,format){ var paddNum = function(num){ num += ""; return num.repla ...

  6. JavaScript性能优化篇js优化

    JavaScript性能优化篇js优化   随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...

  7. js强大的日期格式化函数,不仅可以格式化日期,还可以查询星期,一年中第几天等

    js强大的日期格式化,timestamp支持10位或13位的时间戳,或是时间字符串,同时支持android ios的处理,不只是日期的格式化还有其它方法,比如获 获取某月有多少天 .获取某个日期在这一 ...

  8. jQuery性能优化篇

    jQuery高级技巧——性能优化篇 阅读目录 通过CDN(Content Delivery Network)引入jQuery库 减少DOM操作 适当使用原生JS 选择器优化 缓存jQuery对象 定义 ...

  9. js日期格式化

    <html> <head> <script> function test(){ //Js获取当前日期时间及其它操作 var myDate = new Date(); ...

随机推荐

  1. kafka 安装

    kafka是一个分布式的消息缓存系统 kafka集群中的服务器都叫做broker kafka有两类客户端,一类叫producer(消息生产者),一类叫做consumer(消息消费者),客户端和brok ...

  2. LianLianKan&lbrack;HDU4272&rsqb;

    LianLianKan Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  3. linux运维面试题汇总一

    1.如何让history历史命令显示命令使用的具体时间? [root@node0 ~]# export HISTTIMEFORMAT='%F  %T ' [root@node0 ~]# history ...

  4. ios 面试题 0

    1.__block和__weak修饰符的区别:  1.__block不管是ARC还是MRC模式下都可以使用,可以修饰对象,还可以修饰基本数据类型.  2.__weak只能在ARC模式下使用,也只能修饰 ...

  5. Android常用控件之Fragment仿Android4&period;0设置界面

    Fragment是Android3.0新增的概念,是碎片的意思,它和Activity很相像,用来在一个Activity中描述一些行为或部分用户界面:使用多个Fragment可以在一个单独的Activi ...

  6. 为什么使用 Bootstrap

    移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式 浏览器支持:所有的主流浏览器都支持 Bootstrap 容易上手:只要您具备 HTML 和 CSS 的基础知识 ...

  7. 剑指offer-(19)顺时针打印矩阵

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2, ...

  8. mui 总结

    出框框 js内容 mui(".mui-popover").popover('toggle');         点击“弹出框框”就会弹出这个有class="mui-pop ...

  9. 如何写好接口(php写app移动端接口示例)

    原文链接:https://blog.csdn.net/xwh670570759/article/details/52130585?utm_source=blogxgwz0

  10. Kettle 值映射

    在费用转换里面做了两个值映射.一个是编码.一个是名称.其中两个值映射设置不一样效果不一样. 第一个编码映射 目标字段名不为空,则表示会新增字段.其中复核源值条件的都会转换为目标值,不符合条件的会用[不 ...