Rodrick

vuePress-theme-reco Rodrick    2022
Rodrick Rodrick

Choose mode

  • dark
  • auto
  • light
Home
Category
  • CS基础
  • 数据库
  • 前端
  • 其他
Tag
About
Timeline
D&T
  • 官方文档

    • Vue
    • Vue3
    • Webpack
    • MDN
    • Node中文网
    • React
    • 小程序
    • FineReport
  • 学习面试

    • 现代JavaScript教程
    • ES6
    • 阿西河
    • LeetCode
    • 牛客网
  • 工具

    • bejson
Contact
  • Github
  • Gitee
author-avatar

Rodrick

62

Article

18

Tag

Home
Category
  • CS基础
  • 数据库
  • 前端
  • 其他
Tag
About
Timeline
D&T
  • 官方文档

    • Vue
    • Vue3
    • Webpack
    • MDN
    • Node中文网
    • React
    • 小程序
    • FineReport
  • 学习面试

    • 现代JavaScript教程
    • ES6
    • 阿西河
    • LeetCode
    • 牛客网
  • 工具

    • bejson
Contact
  • Github
  • Gitee
  • JS

    • ES6核心语法
    • 模块化&Webpack
    • Promise&异步函数async
    • WebSocket原理浅析
    • axios的使用
    • ES5的变量提升和ES6的暂时性死区
    • call、apply、bind的用法
    • 对象的原始值转换
    • 可选链"?."
    • 随机数方法
    • 深浅拷贝实现
    • Array常用处理
    • 防抖与节流
    • postMessage窗口间通讯
    • 解构赋值
    • Map&Set
    • 日期和时间
    • 对象属性
    • Toast组件简单封装
    • 原型链
    • 类 Class
    • Generator与异步迭代
    • 偏函数Partial和柯里化Currying
    • DOM操作
    • 事件处理
    • 事件循环EventLoop
    • 网络请求
    • 浏览器中存储数据
    • 正则表达式
  • CSS

  • 其他

日期和时间

vuePress-theme-reco Rodrick    2022

日期和时间

Rodrick 2020-11-22 js

# 创建

  • new Date()

不带参数 —— 创建一个表示当前日期和时间的 Date 对象

  • new Date(milliseconds)

创建一个 Date 对象,millisecondsf 是时间戳

let Dec31_1969 = new Date(-24 * 3600 * 1000)

  • new Date(datestring)

如果只有一个参数,并且是字符串,那么它会被自动解析,年份必须四位,其他可以是一位

let date = new Date("2017-01-26");
let date = new Date("2017-1-6 1:5:5");
  • new Date(year, month, date, hours, minutes, seconds, ms)

使用当前时区中的给定组件创建日期。只有前两个参数是必须的。

  • year 必须是四位数:2013 是合法的,98 是不合法的。
  • ✨ month 计数从 0(一月)开始,到 11(十二月)结束。
new Date(2011, 0, 1)
// Sat Jan 01 2011 00:00:00 GMT+0800
  • date 是当月的具体某一天,如果缺失,则为默认值 1。
  • 如果 hours/minutes/seconds/ms 缺失,则均为默认值 0

# 获取时间 get

从 Date 对象中访问年、月等信息有多种方式:

  • getFullYear() 获取年份(4 位数)
  • getMonth() 获取月份,从 0 到 11。
  • getDate() 获取当月的具体日期,从 1 到 31,这个方法名称可能看起来有些令人疑惑。
  • getHours() ,getMinutes() ,getSeconds() ,getMilliseconds() 获取相应的时间组件。
  • getDay() 获取一周中的第几天,从 0(星期日)到 6(星期六)。第一天始终是星期日,在某些国家可能不是这样的习惯,但是这不能被改变。
  • getTime() 返回日期的时间戳 —— 从 1970-1-1 00:00:00 UTC+0 开始到现在所经过的毫秒数。
  • getTimezoneOffset() 返回 UTC 与本地时区之间的时差,以分钟为单位:

不是 getYear(),而是 getFullYear() 很多 JavaScript 引擎都实现了一个非标准化的方法 getYear()。不推荐使用这个方法。它有时候可能会返回 2 位的年份信息。永远都不要使用它。要获取年份就使用 getFullYear()。

# 设定时间 set

# 方法

下列方法可以设置日期/时间组件:

  • setFullYear(year, [month], [date])
  • setMonth(month, [date])
  • setDate(date)
  • setHours(hour, [min], [sec], [ms])
  • setMinutes(min, [sec], [ms])
  • setSeconds(sec, [ms])
  • setMilliseconds(ms)
  • setTime(milliseconds) (使用自 1970-01-01 00:00:00 UTC+0 以来的毫秒数来设置整个日期)

以上方法除了 setTime() 都有 UTC 变体,例如:setUTCHours()。

# 自动校准

自动校准 是 Date 对象的一个非常方便的特性。我们可以设置超范围的数值,它会自动校准

  • 超出范围的日期组件将会被自动分配,可以设置0甚至负值
let date = new Date(2013, 0, 32); // 32 Jan 2013 ?!?
alert(date); // ……是 1st Feb 2013!
  • 日期加减超出范围也会自动变化
let date = new Date(2016, 1, 28);
date.setDate(date.getDate() + 2);

alert( date ); // 1 Mar 2016

# 日期转化为数字,日期差值

当 Date 对象被转化为数字时,得到的是对应的时间戳,与使用 date.getTime() 的结果相同

let date = new Date();
alert(+date); // 以毫秒为单位的数值,与使用 date.getTime() 的结果相同

日期可以相减,相减的结果是以毫秒为单位时间差。

# Date.now()

场景:如果我们仅仅想要测量时间间隔,我们不需要 Date 对象。
有一个特殊的方法 Date.now(),它会返回当前的时间戳。
它相当于 new Date().getTime(),但它不会创建中间的 Date 对象。因此它更快,而且不会对垃圾处理造成额外的压力。
**

# Date.parse(str)

Date.parse(str) 方法可以从一个字符串中读取日期。

字符串的格式应该为:YYYY-MM-DDTHH:mm:ss.sssZ,其中:

  • YYYY-MM-DD —— 日期:年-月-日。
  • 字符 "T" 是一个分隔符。
  • HH:mm:ss.sss —— 时间:小时,分钟,秒,毫秒。
  • 可选字符 'Z' 为 +-hh:mm 格式的时区。单个字符 Z 代表 UTC+0 时区。


简短形式也是可以的,比如 YYYY-MM-DD 或 YYYY-MM,甚至可以是 YYYY。
Date.parse(str) 调用会解析给定格式的字符串,并返回时间戳(自 1970-01-01 00:00:00 起所经过的毫秒数)。如果给定字符串的格式不正确,则返回 NaN。

let ms = Date.parse('2012-01-26T13:51:50.417-07:00');

alert(ms); // 1327611110417  (时间戳)

也可以作用在 new Date() 里,其实和直接 new Date(str) 是一样的

let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );
// let date = new Date('2012-01-26T13:51:50.417-07:00'); 结果一致
alert(date);

# 使用场景

# 显示星期数

编写一个函数 getWeekDay(date) 以短格式来显示一个日期的星期数:‘MO’,‘TU’,‘WE’,‘TH’,‘FR’,‘SA’,‘SU’。

function getWeekDay(date) {
  let days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];

  return days[date.getDay()];
}

let date = new Date(2014, 0, 3); // 3 Jan 2014
alert( getWeekDay(date) ); // FR

# 许多天之前的日期

写一个函数 getDateAgo(date, days),返回特定日期 date 往前 days 天是哪个月的哪一天。 例如,假设今天是 20 号,那么 getDateAgo(new Date(), 1) 的结果应该是 19 号,getDateAgo(new Date(), 2) 的结果应该是 18 号。

function getDateAgo(date, days) {
  let dateCopy = new Date(date);

  dateCopy.setDate(date.getDate() - days);
  return dateCopy.getDate();
}

let date = new Date(2015, 0, 2);

alert( getDateAgo(date, 1) ); // 1, (1 Jan 2015)

# 某月的最后一天?

写一个函数 getLastDayOfMonth(year, month) 返回 month 月的最后一天。有时候是 30,有时是 31,甚至在二月的时候会是 28/29。 举个例子,getLastDayOfMonth(2012, 1) = 29(闰年,二月)

思路:让我们使用下个月创建日期,但将零作为天数(day)传递

function getLastDayOfMonth(year, month) {
  let date = new Date(year, month + 1, 0);
  return date.getDate();
}

alert( getLastDayOfMonth(2012, 0) ); // 31
alert( getLastDayOfMonth(2012, 1) ); // 29
alert( getLastDayOfMonth(2013, 1) ); // 28

# 获取当前日期为一年中的第几天

Math.ceil(( new Date("2020-01-02") 
           - new Date(new Date().getFullYear().toString()))/(24*60*60*1000))+1

# Moment.js

Moment.js 是一个 JavaScript 日期处理类库 ,可以做一些日期时间上的处理和转换,作为一个工具库,平时开发也很常用,可以参考。

欢迎来到 Rodrick
看板娘