JS日期格式化函数性能优化篇
最近开发的软件中需要用到日志功能,其中有一个重要功能是显示日期和时间。于是网上搜了一把,搜到大量的日期格式化函数,不过比较了下,感觉代码都不够优雅,而且性能都不给力。
对线上一些代码进行了评测,以下是一些结论和优化代码。
测试代码如下,在同以浏览器中,分别对格式化函数进行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日期格式化函数性能优化篇的更多相关文章
- js 日期格式化函数(可自定义)
js 日期格式化函数 DateFormat var DateFormat = function (datetime, formatStr) { var dat = datetime; var str ...
- js 日期格式化函数
直接上代码: // 日期格式化函数 // yyyy/MM/dd hh:mm:ss SSS ⇒ "2017/05/16 09:24:20 850" //"yyyy/M/d ...
- js怎么动态加载js文件(JavaScript性能优化篇)
下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...
- js日期格式化函数
/** * @author ocq * * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q ...
- js 日期格式化 函数
function formatDate(date,format){ var paddNum = function(num){ num += ""; return num.repla ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
- js强大的日期格式化函数,不仅可以格式化日期,还可以查询星期,一年中第几天等
js强大的日期格式化,timestamp支持10位或13位的时间戳,或是时间字符串,同时支持android ios的处理,不只是日期的格式化还有其它方法,比如获 获取某月有多少天 .获取某个日期在这一 ...
- jQuery性能优化篇
jQuery高级技巧——性能优化篇 阅读目录 通过CDN(Content Delivery Network)引入jQuery库 减少DOM操作 适当使用原生JS 选择器优化 缓存jQuery对象 定义 ...
- js日期格式化
<html> <head> <script> function test(){ //Js获取当前日期时间及其它操作 var myDate = new Date(); ...
随机推荐
- JavaScript_ECMA5数组新特性
var arr = [ 1, 2, 3, 4, 5, 4, 3, 2, 1 ]; 新加位置的方法: indexOf lastIndexOf1.1个参数的时候表示传值 返回索引位置(index从0开始) ...
- 你好,C++(11)如何用string数据类型表示一串文字?根据初始值自动推断数据类型的auto关键字(C++ 11)
3.5.2 字符串类型 使用char类型的变量我们可以表示单个字符,那么,我们又该如何表示拥有多个字符的字符串呢? 我们注意到,一个字符串是由多个字符串连起来形成的.很自然地,一种最简单直接的方法就 ...
- 当OOP语言RAII特性发展到functional形式的极致
本文主要站在C++程序员的思维角度思量. functional之路 lambda表达式 lambda表达式,是一段代码片段.函数实现体中出现的可重用的代码块. 在C++之前,C语言最小可复用流程模块, ...
- [HTML5 Canvas学习] 基础知识
HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...
- MySQL笔记--查询语句实践
有一个用户表,属性为 id,age,buytime 创建表以及插入数据的语句 CREATE TABLE USER( id INT, age INT, buytime INT ) ,,); ,,); , ...
- 移动app测试浅析
移动App测试浅析 1. 移动App测试的现状及其挑战 移动互联网走到今天,App寡头化的趋势已经越来越明显,同时用户的口味越来越高,这对移动App开发者提出了更高的要求.几年前可能你有一个创意,随便 ...
- Chapter 2. OpenSSL的安装和配置学习笔记
Chapter 2. OpenSSL的安装和配置学习笔记 2.1 在linux上面安装OpenSSL我还是做点No paper事情比较在行,正好和老师的课程接轨一下.以前尝试过在Windows上面安装 ...
- Fireworks Extension —— AutoSlice 介绍
前不久在网上到处瞎晃的时候,发现Adobe的软件几乎都可以写插件.Fireworks更是很早的版本就支持使用javascript编写插件,于是乎如入桃园,奋斗几日为VD小伙伴们写了一个插件,命名Aut ...
- 使用XCode---下载组件
XCode是一个轻量级的ORM组件(对象与关系数据库映射),提供以面向对象的方式操作数据库的功能,能够解决90%以上的数据库操作场景. 做为X系列组件最重要的一员,XCode秉承了简单实用的特点,力求 ...
- 浅析hashCode方法
一.问题引入 谈到hashCode就不得不说equals方法,二者均在Object类里,由于Object类是所有类的基类,所以一切类里都可以重写这两个方法. 要想较清晰的理解,需要先知道容器Colle ...