转行学前端的第 36 天 : 了解 ECMAScript Date 实例对象方法

我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。

今日学习目标

昨天主要是基于搜索来基础学习 Date 对象,今天准备学习一下Date实例对象的方法 ,又是适合学习的一天,加油,小又又!!!!


今日学习概要

  • 对于日期实例方法进行整体了解

  • 对于感兴趣的方法进行详细了解

注意对于不建议的方法和未标准实现的方法从分类中会进行排除~~~


Getter(获取值)

获取基础日期值属性相关

方法名具体说明
Date.prototype.getDate()根据本地时间返回指定日期对象的月份中的第几天(1-31)。
Date.prototype.getDay()根据本地时间返回指定日期对象的星期中的第几天(0-6)。
Date.prototype.getFullYear()根据本地时间返回指定日期对象的年份(四位数年份时返回四位数字)。
Date.prototype.getHours()根据本地时间返回指定日期对象的小时(0-23)。
Date.prototype.getMilliseconds()根据本地时间返回指定日期对象的毫秒(0-999)。
Date.prototype.getMinutes()根据本地时间返回指定日期对象的分钟(0-59)。
Date.prototype.getMonth()根据本地时间返回指定日期对象的月份(0-11)。
Date.prototype.getSeconds()根据本地时间返回指定日期对象的秒数(0-59)。

获取特定日期相差值

方法名具体说明
Date.prototype.getTime()返回从 1970-1-1 00:00:00 UTC(协调世界时)到该日期经过的毫秒数,对于 1970-1-1 00:00:00 UTC 之前的时间返回负值。
Date.prototype.getTimezoneOffset()返回当前时区的时区偏移。
Date.prototype.getUTCDate()根据世界时返回特定日期对象一个月的第几天(1-31).
Date.prototype.getUTCDay()根据世界时返回特定日期对象一个星期的第几天(0-6).
Date.prototype.getUTCFullYear()根据世界时返回特定日期对象所在的年份(4 位数).
Date.prototype.getUTCHours()根据世界时返回特定日期对象当前的小时(0-23).
Date.prototype.getUTCMilliseconds()根据世界时返回特定日期对象的毫秒数(0-999).
Date.prototype.getUTCMinutes()根据世界时返回特定日期对象的分钟数(0-59).
Date.prototype.getUTCMonth()根据世界时返回特定日期对象的月份(0-11).
Date.prototype.getUTCSeconds()根据世界时返回特定日期对象的秒数(0-59).

Setter(设置值)

设置基础日期值属性相关

方法名具体说明
Date.prototype.setDate()根据本地时间为指定的日期对象设置月份中的第几天。
Date.prototype.setFullYear()根据本地时间为指定日期对象设置完整年份(四位数年份是四个数字)。
Date.prototype.setHours()根据本地时间为指定日期对象设置小时数。
Date.prototype.setMilliseconds()根据本地时间为指定日期对象设置毫秒数。
Date.prototype.setMinutes()根据本地时间为指定日期对象设置分钟数。
Date.prototype.setMonth()根据本地时间为指定日期对象设置月份。
Date.prototype.setSeconds()根据本地时间为指定日期对象设置秒数。

设置特定日期相差值

方法名具体说明
Date.prototype.setTime()通过指定从 1970-1-1 00:00:00 UTC 开始经过的毫秒数来设置日期对象的时间,对于早于 1970-1-1 00:00:00 UTC 的时间可使用负值。
Date.prototype.setUTCDate()根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
Date.prototype.setUTCFullYear()根据世界时设置 Date 对象中的年份(四位数字)。
Date.prototype.setUTCHours()根据世界时设置 Date 对象中的小时 (0 ~ 23)。
Date.prototype.setUTCMilliseconds()根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
Date.prototype.setUTCMinutes()根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
Date.prototype.setUTCMonth()根据世界时设置 Date 对象中的月份 (0 ~ 11)。
Date.prototype.setUTCSeconds()根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。

Conversion getter(转换设置)

特有方法

方法名具体说明
Date.prototype.toDateString()以人类易读(human-readable)的形式返回该日期对象日期部分的字符串。
Date.prototype.toISOString()把一个日期转换为符合 ISO 8601 扩展格式的字符串。
Date.prototype.toJSON()使用 toISOString() 返回一个表示该日期的字符串。为了在 JSON.stringify() 方法中使用。
Date.prototype.toLocaleDateString()返回一个表示该日期对象日期部分的字符串,该字符串格式与系统设置的地区关联(locality sensitive)。
Date.prototype.toLocaleFormat()使用格式字符串将日期转换为字符串。
Date.prototype.toLocaleTimeString()返回一个表示该日期对象时间部分的字符串,该字符串格式与系统设置的地区关联(locality sensitive)。
Date.prototype.toTimeString()以人类易读格式返回日期对象时间部分的字符串。
Date.prototype.toUTCString()把一个日期对象转换为一个以 UTC 时区计时的字符串。

继承方法

方法名具体说明
Date.prototype.toLocaleString()返回一个表示该日期对象的字符串,该字符串与系统设置的地区关联(locality sensitive)。覆盖了 Object.prototype.toLocaleString() 方法。
Date.prototype.toSource()返回一个与 Date 等价的原始字符串对象,你可以使用这个值去生成一个新的对象。重写了 Object.prototype.toSource() 这个方法。
Date.prototype.toString()返回一个表示该日期对象的字符串。覆盖了 Object.prototype.toString() 方法。
Date.prototype.valueOf()返回一个日期对象的原始值。覆盖了 Object.prototype.valueOf() 方法。

Getter(获取值)

getDate()

基础语法

dateObj.getDate()

返回值说明

getDate()返回一个1 到 31的整数值。


详细说明

根据本地时间,返回一个指定的日期对象为一个月中的哪一日(从1--31)。


案例

下面第二条语句将值25赋给 day 变量,该值基于日期对象 Xmax95的值。

var Xmas95 = new Date("December 25, 1995 23:15:00");
var day = Xmas95.getDate();

alert(day); // 25


getDay()

基础语法

dateObj.getDay()

返回值说明

根据本地时间,返回一个0到6之间的整数值,代表星期几: 0 代表星期日, 1 代表星期一,2 代表星期二, 依次类推。


详细说明

getDay()方法根据本地时间,返回一个具体日期中一周的第几天,0 表示星期天。对于某个月中的第几天,参考Date.prototype.getDate().


案例

基础案例

下面第二条语句,基于Date对象 Xmas95的值,把 1赋值给 weekday。也就是说1995年12月25日是星期一。

var Xmas95 = new Date("December 25, 1995 23:15:30");
var weekday = Xmas95.getDay();

console.log(weekday); // 1


结合Intl.DateTimeFormat

可以使用Intl.DateTimeFormat与一个额外的options参数,从而返回这天的全称(如"Monday").使用此方法,结果会更加国际化

var Xmas95 = new Date("December 25, 1995 23:15:30");
var weekday = Xmas95.getDay();

var options = { weekday: 'long'};
console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
// Monday

console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
// Montag


getFullYear()

基础语法

dateObj.getFullYear()

返回值说明

根据当地时间,返回一个对应于给定日期的年份数字。


详细说明

getFullYear()方法根据本地时间返回指定日期的年份。

getFullYear()返回的值是绝对数。 对于10009999之间的日期,getFullYear()返回一个四位数字,如1995。使用此函数确保在2000年后兼容。


案例

下面的例子将当前年份的四位数值分配给变量year

var today = new Date();
var year = today.getFullYear();


getHours()

基础语法

dateObj.getHours()

返回值说明

getHours返回一个0 到 23之间的整数值。


详细说明

getHours()方法根据本地时间,返回一个指定的日期对象的小时。


案例

下面第二条语句,基于日期对象 Xmas95 的值,把 23 赋值给了变量 hours。

var Xmas95 = new Date("December 25, 1995 23:15:00");
var hours = Xmas95.getHours();

alert(hours); // 23


getMilliseconds()

基础语法

dateObj.getMilliseconds()

返回值说明

getMilliseconds()方法,根据本地时间,返回一个指定的日期对象的毫秒数。


详细说明

getMilliseconds()方法返回一个0 到 999的整数。


案例

下例中,将当前时间的毫秒数赋值给变量 ms。

var ms;
Today = new Date();
ms = Today.getMilliseconds();


getMinutes()

基础语法

dateObj.getMinutes()

返回值说明

getMinutes()方法根据本地时间,返回一个指定的日期对象的分钟数。


详细说明

getMinutes返回一个0 到 59的整数值。


案例

下例中,第二行语句运行过后,变量 minutes 的值为15,也就是说 Xmas95 这个日期对象的值为某时15分某秒。

var Xmas95 = new Date("December 25, 1995 23:15:00");
var minutes = Xmas95.getMinutes();


getMonth()

基础语法

dateObj.getMonth()

返回值说明

getMonth返回一个0 到 11的整数值: 0 代表一月份,1 代表二月份, 2 代表三月份,依次类推。


详细说明

根据本地时间,返回一个指定的日期对象的月份,为基于0的值(0表示一年中的第一月)。


案例

下面第二条语句,基于 Date 对象 Xmas95 的值,把11赋值给变量 month。

var Xmas95 = new Date('December 25, 1995 23:15:30');
var month = Xmas95.getMonth();

console.log(month); // 11


getSeconds()

基础语法

dateObj.getSeconds()

返回值说明

该方法返回一个 0 到 59 的整数值。


详细说明

getSeconds()方法根据本地时间,返回一个指定的日期对象的秒数。


案例

下面第二条语句,基于日期对象 Xmas95的值,把 30赋值给变量 secs

var Xmas95 = new Date("December 25, 1995 23:15:30");
var secs = Xmas95.getSeconds();


Setter(设置值)

setDate(dayValue)

基础语法

dateObj.setDate(dayValue)

参数说明

dayValue

一个整数,表示该月的第几天。


返回值说明

setDate()方法根据本地时间来指定一个日期对象的天数。


详细说明

如果 dayValue超出了月份的合理范围,setDate将会相应地更新 Date对象。

例如,如果为dayValue指定0,那么日期就会被设置为上个月的最后一天。

如果dayValue被设置为负数,日期会设置为上个月最后一天往前数这个负数绝对值天数后的日期。-1会设置为上月最后一天的前一天(译者注:例如当前为4月,如果setDate(-2),则为3月29日)


案例

下面第二条语句将值25赋给 day 变量,该值基于日期对象 Xmax95的值。

var theBigDay = new Date(1962, 6, 7); // 1962-07-07
theBigDay.setDate(24);  // 1962-07-24
theBigDay.setDate(32);  // 1962-08-01


setFullYear(yearValue[, monthValue[, dayValue]])

基础语法

dateObj.setFullYear(yearValue[, monthValue[, dayValue]])

参数说明

yearValue

指定年份的整数值,例如1995。


monthValue

一个0到11之间的整数值,表示从一月到十二月。


dayValue

一个1到31之间的整数值,表示月份中的第几天。如果你指定了 dayValue 参数,就必须同时指定 monthValue。


返回值说明

根据当地时间,返回一个对应于给定日期的年份数字。


详细说明

如果没有指定 monthValuedayValue参数,将会使用getMonthgetDate方法的返回值。

如果有一个参数超出了合理的范围,setFullYear 方法会更新其他参数值,日期对象的日期值也会被相应更新。

例如,为 monthValue 指定 15, 则年份会加1,月份值会为3。


案例

var theBigDay = new Date();
theBigDay.setFullYear(1997);


setHours(hoursValue[, minutesValue[, secondsValue[, msValue]]])

基础语法

dateObj.setHours(hoursValue[, minutesValue[, secondsValue[, msValue]]])

参数说明

hoursValue

一个 0 到 23 的整数,表示小时。

minutesValue

一个 0 到 59 的整数,表示分钟。

secondsValue

一个 0 到 59 的整数,表示秒数。如果指定了 secondsValue 参数,则必须同时指定 minutesValue 参数。

msValue

一个 0 到 999 的数字,表示微秒数,如果指定了 msValue 参数,则必须同时指定 minutesValue 和 secondsValue 参数。


返回值说明

根据当地时间,返回一个对应于给定日期的年份数字。


详细说明

如果不指定 minutesValuesecondsValuemsValue参数,则会使用getMinutes()getSeconds()getMilliseconds()方法的返回值。

如果有一个参数超出了合理范围,setHours会相应地更新日期对象中的日期信息。例如,如果为secondsValue指定了 100,则分钟会加 1,然后秒数使用 40。


案例

var theBigDay = new Date();
theBigDay.setHours(7);


今日学习总结


今日心情

今日主要是基于搜索来基础学习 Date 实例对象方法,主要是学习了日期对象的年月日时分秒获取和设置,印象比较深的就是在日期值设置的时候,如果传递的参数超出了合理范围,方法会相应地更新日期对象中的日期信息~~~~

希望明天学习到更多东西~~~~

本文使用 mdnice排版

原文链接:juejin.im

上一篇:react 打造页面可视化 自定义布局搭建 (1) 持续更新
下一篇:react+webpack4.x搭建前端项目(六)webpack的多模块打包配置

相关推荐

官方社区

扫码加入 JavaScript 社区