javascript类型系统——日期Date对象全面了解


Posted in Javascript onJuly 13, 2016

前面的话

Date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口。Date对象是在早期java中的java.util.Date类基础上创建的,为此,Date类型使用自UTC1970年1月1日0点开始经过的毫秒数来保存日期,它可以表示的时间范围是1970年1月1日0点前后的各1亿天。本文将详细介绍Date对象的用法

静态方法在介绍Date对象的构造函数之前,先介绍静态方法。因为,Date对象的静态方法与其构造函数有着千丝万缕的联系。使用构造函数创建Date对象的过程,类似于披着外套的静态方法的使用过程

Date对象总共有三个静态方法,分别是Date.now()、Date.parse()、Date.UTC()。这些方法通过Date()构造函数本身调用,而不是通过Date实例对象

Date.now()

ECMAScript5新增了now()方法,该方法返回当前时间距离1970年1月1日0点UTC的毫秒数。该方法不支持传递参数

[注意]该方法返回的是Number数字类型

console.log(Date.now());//1468297046050
console.log(Date.now('2016,1,1'));//1468297046050
console.log(typeof Date.now());//'number'

在不支持Date.now()方法的浏览器中,可以用+操作符把Date对象转换成数字,也可以实现类似效果

console.log(new Date());//Tue Jul 12 2016 12:21:33 GMT+0800 (中国标准时间)
console.log(+new Date());//1468297293433
console.log(+new Date(2000,1,1));//949334400000

该方法常用于分析代码的工作

var start = Date.now();
doSomething();
var stop = Date.now();
result = stop - start;

Date.parse()

该方法用于解析一个日期字符串,参数是一个包含待解析的日期和时间的字符串,返回从1970年1月1日0点到给定日期的毫秒数

该方法会根据日期时间字符串格式规则来解析字符串的格式,除了标准格式外,以下格式也支持。如果字符串无法识别,将返回NaN

1、'月/日/年' 如6/13/2004

2、'月 日,年' 如January 12,2004或Jan 12,2004

3、'星期 月 日 年 时:分:秒 时区' Tue May 25 2004 00:00:00 GMT-0700

[注意]浏览器不支持不表示日期只表示时间的字符串格式

console.log(Date.parse('6/13/2004'));//1087056000000
console.log(Date.parse('January 12,2004'));//1073836800000
console.log(Date.parse('Tue May 25 2004 00:00:00 GMT-0700'));//1085468400000
console.log(Date.parse('2004-05-25T00:00:00'));//1085443200000
console.log(Date.parse('2016'));//1451606400000
console.log(Date.parse('T00:00:00'));//NaN
console.log(Date.parse());//NaN

 [注意]在ECMAScript5中,如果使用标准的日期时间字符串格式规则的字符串中,数学前有前置0,则会解析为UTC时间,时间没有前置0,则会解析为本地时间。其他情况一般都会解析为本地时间

console.log(Date.parse('7/12/2016'));//1468252800000
console.log(Date.parse('2016-7-12'));//1468252800000
console.log(Date.parse('2016-07-12'));//1468281600000

Date.UTC()

Date.UTC()同样返回给定日期的毫秒数,但其参数并不是一个字符串,而是分别代表年、月、日、时、分、秒、毫秒的数字参数

Date.UTC(year,month,day,hours,minutes,seconds,ms),year和month参数是固定的,其余参数可选,日期时间格式规则详见此

因为该函数有7个形参,所以其length值为7

console.log(Date.UTC.length);//7

[注意]该方法使用的是UTC时间,而不是本地时间

console.log(Date.UTC(1970));//NaN
console.log(Date.UTC(1970,0));//0
console.log(Date.UTC(1970,0,2));//86400000
console.log(Date.UTC(1970,0,1,1));//3600000
console.log(Date.UTC(1970,0,1,1,59));//714000
console.log(Date.UTC(1970,0,1,1,59,30));//717000

构造函数Date()构造函数有多达5种的使用方法

【0】Date()

数可以不带new操作符,像一个函数一样调用。它将忽略所有传入的参数,并返回当前日期和时间的一个字符串表示

Date();

[注意]由于Date()函数没有使用操作符,实际上它不能被称为构造函数

console.log(Date());//"Tue Jul 12 2016 13:38:41 GMT+0800 (中国标准时间)"
console.log(Date('2016/1/1'));//"Tue Jul 12 2016 13:38:41 GMT+0800 (中国标准时间)"
console.log(typeof Date());//'string'

【1】Date()函数使用new操作符,且不带参数时,将根据当前时间和日期创建一个Date对象

new Date();
console.log(new Date());//Tue Jul 12 2016 13:41:45 GMT+0800 (中国标准时间)
console.log(new Date);//Tue Jul 12 2016 13:41:45 GMT+0800 (中国标准时间)
console.log(typeof new Date());//'object'

【2】Date()函数可接受一个数字参数,该参数表示设定时间与1970年1月1日0点之间的毫秒数

new Date(milliseconds);
console.log(new Date(0));//Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date(86400000));//Fri Jan 02 1970 08:00:00 GMT+0800 (中国标准时间)
console.log(typeof new Date(0));//object

【3】Date()函数可接受一个字符串参数,参数形式类似于Date.parse()方法。但parse()方法返回的是一个数字,而Date()函数返回的是一个对象 

new Date(datestring);

console.log(new Date('6/13/2004'));//Sun Jun 13 2004 00:00:00 GMT+0800 (中国标准时间)
console.log(Date.parse('6/13/2004'));//1087056000000
console.log(typeof new Date(6/13/2004));//object
console.log(typeof Date.parse(6/13/2004));//number

关于标准的日期时间字符串中前置0的处理,也类似于Date.parse()方法,若有前置0,则相当于UTC时间,若没有,则相当于本地时间。其余情况一般都为本地时间

console.log(new Date('7/12/2016'));//Tue Jul 12 2016 00:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2016-7-12'));//Tue Jul 12 2016 00:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2016-07-12'));//Tue Jul 12 2016 08:00:00 GMT+0800 (中国标准时间)

【4】Date()函数可接受参数形式类似于Date.UTC()方法的参数,但Date.UTC()方法返回是一个毫秒数,且是UTC时间,而Date()函数返回是一个对象,且是本地时间

console.log(new Date(2016,7,12));//Fri Aug 12 2016 00:00:00 GMT+0800 (中国标准时间)
console.log(+new Date(2016,7,12));//1470931200000
console.log(typeof new Date(2016,7,12));//'object'
console.log(Date.UTC(2016,7,12));//1470960000000
console.log(typeof Date.UTC(2016,7,12));//'number'

[注意]使用参数类似于Date.parse()函数的方法时,如果日期对象超出范围,浏览器会自动将日期计算成范围内的值;使用参数类似于Date.UTC()函数的方法时,如果日期对象超出范围,浏览器会提示Invalid Date

console.log(new Date(2016,7,32));//Thu Sep 01 2016 00:00:00 GMT+0800 (中国标准时间)
console.log(new Date(2016,8,1));//Thu Sep 01 2016 00:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2016-8-32'));//Invalid Date
console.log(new Date('2016-9-1'));//Thu Sep 01 2016 00:00:00 GMT+0800 (中国标准时间)

实例方法

Date对象没有可以直接读写的属性,所有对日期和时间的访问都需要通过方法。Date对象的大多数方法分为两种形式:一种是使用本地时间,一种是使用UTC时间,这些方法在下面一起列出。例如,get[UTC]Day()同时代表getDay()和getUTCDay()

Date对象一共有46个实例方法,可以分为以下3类:to类、get类、set类

【to类】

to类方法从Date对象返回一个字符串,表示指定的时间

toString()

返回本地时区的日期字符串

toUTCString()

返回UTC时间的日期字符串

toISOString()

返回Date对象的标准的日期时间字符串格式的字符串

toTimeString()

返回Date对象的时间部分的字符串

toJSON()

返回一个符合JSON格式的日期字符串,与toISOString方法的返回结果完全相同

console.log(new Date('2016-7-12').toString());//Tue Jul 12 2016 00:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2016-7-12').toUTCString());//Mon, 11 Jul 2016 16:00:00 GMT
console.log(new Date('2016-7-12').toISOString());//2016-07-11T16:00:00.000Z
console.log(new Date('2016-7-12').toDateString());//Tue Jul 12 2016
console.log(new Date('2016-7-12').toTimeString());//00:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2016-7-12').toJSON());//2016-07-11T16:00:00.000Z

toLocaleString()

toString()方法的本地化转换

toLocaleTimeString()

toTimeString()方法的本地化转换

toLocaleDateString()

toDateString()方法的本地化转换

console.log(new Date('2016-7-12').toString());//Tue Jul 12 2016 00:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2016-7-12').toLocaleString());//2016/7/12 上午12:00:00
console.log(new Date('2016-7-12').toDateString());//Tue Jul 12 2016
console.log(new Date('2016-7-12').toLocaleDateString());//2016/7/12
console.log(new Date('2016-7-12').toTimeString());//00:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2016-7-12').toLocaleTimeString());//上午12:00:00

【get类】

Date对象提供了一系列get类方法,用来获取实例对象某个方面的值

在介绍get类方法之前,首先要介绍valueOf()方法

valueOf()

返回距离1970年1月1日0点的毫秒数

因此,可以方便地使用比较运算符来比较日期值

var date1 = new Date(2007,0,1);
var date2 = new Date(2007,1,1);
console.log(date1 > date2);//false
console.log(date1 < date2);//true

getTime()

返回距离1970年1月1日0点的毫秒数,同valueOf()

在ECMAScript5之前,可以使用getTime()方法实现Date.now()

Date.now = function(){
    return (new Date()).getTime()
  }

getTimezoneOffset()

返回当前时间与UTC的时区差异,以分钟表示(8*60=480分钟),返回结果考虑到了夏令时因素

console.log(new Date('2016-7-12').valueOf());//1468252800000
console.log(new Date('2016-7-12').getTime());//1468252800000
console.log(new Date('2016-7-12').getTimezoneOffset());//-480

getYear()

返回距离1900年的年数(已过时)

get[UTC]FullYear()

返回年份(4位数)

get[UTC]Month()

返回月份(0-11)

get[UTC]Date()

返回第几天(1-31)

get[UTC]Day()

返回星期几(0-6)

get[UTC]Hours()

返回小时值(0-23)

get[UTC]Minutes()

返回分钟值(0-59)

get[UTC]Seconds()

返回秒值(0-59)

get[UTC]Milliseconds()

返回毫秒值(0-999)

[注意]通过标准日期时间格式字符串,且有前置0的形式的参数设置,设置的是UTC时间

console.log(new Date('2016-07-12T10:00').getYear());//116
console.log(new Date('2016-07-12T10:00').getFullYear());//2016
console.log(new Date('2016-07-12T10:00').getUTCFullYear());//2016
console.log(new Date('2016-07-12T10:00').getMonth());//6
console.log(new Date('2016-07-12T10:00').getUTCMonth());//6
console.log(new Date('2016-07-12T10:00').getDate());//12
console.log(new Date('2016-07-12T10:00').getUTCDate());//12
console.log(new Date('2016-07-12T10:00').getDay());//2
console.log(new Date('2016-07-12T10:00').getUTCDay());//2
console.log(new Date('2016-07-12T10:00').getHours());//18
console.log(new Date('2016-07-12T10:00').getUTCHours());//10
console.log(new Date('2016-07-12T10:00').getMinutes());//0
console.log(new Date('2016-07-12T10:00').getUTCMinutes());//0
console.log(new Date('2016-07-12T10:00').getSeconds());//0
console.log(new Date('2016-07-12T10:00').getUTCSeconds());//0
console.log(new Date('2016-07-12T10:00').getMilliseconds());//0
console.log(new Date('2016-07-12T10:00').getUTCMilliseconds());//0
//当前时间为16:35
console.log(new Date().getHours());//16
console.log(new Date().getUTCHours());//8

【set类】

Date对象提供了一系列set类方法,用来设置实例对象的各个方面

set方法基本与get方法相对应,set方法传入类似于Date.UTC()的参数,返回调整后的日期的内部毫秒数

[注意]星期只能获取,不能设置

setTime()

使用毫秒的格式,设置一个Date对象的值

var d = new Date('2016-07-12T10:00');
console.log(d.setTime(86400000),d);//86400000 Fri Jan 02 1970 08:00:00 GMT+0800 (中国标准时间)

setYear()

设置年份(已过时)

var d = new Date('2016-07-12T10:00');
console.log(d.setYear(2000),d,d.getYear());//963396000000 Wed Jul 12 2000 18:00:00 GMT+0800 (中国标准时间) 100

set[UTC]FullYear()

设置年份(4位数),以及可选的月份值和日期值

set[UTC]Month()

设置月份(0-11),以及可选的日期值

set[UTC]Date()

设置第几天(1-31)

var d = new Date('2016-07-12T10:00');
console.log(d.setFullYear(2015,1,1),d.getFullYear());//1422784800000 2015
console.log(d.setMonth(2),d.getMonth());//1425204000000 2
console.log(d.setDate(20),d.getDate());//1426845600000 20
console.log(d.toLocaleString());//2015/3/20 下午6:00:00

set[UTC]Hours()

设置小时值(0-23),以及可选的分钟值、秒值及毫秒值

set[UTC]Minutes()

设置分钟值(0-59),以及可选的秒值及毫秒值

set[UTC]Seconds()

设置秒值(0-59),以及可选的毫秒值

set[UTC]Milliseconds()

设置毫秒值(0-999)

var d = new Date('2016-07-12T10:20:30');
console.log(d.setHours(1,2,3),d.getHours());//1468256523000 1
console.log(d.setMinutes(2,3),d.getMinutes());//1468256523000 2
console.log(d.setSeconds(3),d.getSeconds());//1468256523000 3
console.log(d.toLocaleTimeString())//上午1:02:03
var d = new Date('2016-07-12T10:20:30');
console.log(d.setUTCHours(1,2,3),d.getHours());//1468285323000 9
console.log(d.setUTCMinutes(2,3),d.getMinutes());//1468285323000 2
console.log(d.setUTCSeconds(3),d.getSeconds());//1468285323000 3
console.log(d.toLocaleTimeString())//上午9:02:03

以上这篇javascript类型系统——日期Date对象全面了解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
JS实现多选框的操作
Jun 24 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 #Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 #Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 #Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 #Javascript
Bootstrap登陆注册页面开发教程
Jul 12 #Javascript
深入浅析knockout源码分析之订阅
Jul 12 #Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 #Javascript
You might like
PHP中防止SQL注入实现代码
2011/02/19 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
浅析Ajax语法
2016/12/05 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python yield 使用方法浅析
2017/05/20 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python得到电脑的开机时间方法
2018/10/15 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
社区志愿者培训方案
2014/06/10 职场文书
党员争先创优承诺书
2015/01/20 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
python对文档中元素删除,替换操作
2022/04/02 Python