第九章 引用类型 - 日期 - Date

发布时间 2023-03-30 11:09:54作者: caix-1987

Date 是 JS 中的重要的一个内置对象,其实例主要用于处理时间和日期

时间基于 1970-1-1 (世界标准时间)起的毫秒数,时间戳长度为 13 位(不同于 Unix 时间戳的长度 10 位)

moment - 重量级时间处理库,支持时间解析、格式化、计算等,功能强大,支持浏览器和 Node.js,压缩后体积约为 16.3 KB

date-fns - 较 moment 更轻量级的事件处理库,体积更小

时区

世界上有几百个时区,但在 JavaScript 中,你只需要了解两个就行:当地时间 和 世界协调时(UTC)。

默认情况下,Date 对象创建的都是当地时间,只有在指定 UTC 时它才会创建世界协调时

当地时间
 当地时间: 指你的计算机所在的时区
世界协调时 (UTC)
 世界协调时: 是最主要的世界时间标准,是最接近格林威治标准时间(GMT)

创建日期 构造函数 new Date()

通过 new Date() 来创建日期,根据传递的参数不同,它有四种使用方式

日期字符串
  给 new Date 传递一个日期字符串来创建
  
  let date_1 = new Date('1987-06-24')
  
  console.log(date_1) => Wed Jun 24 1987 00:00:00 GMT+0900 (中国夏令时间)
  
  注意: 如果写成 24-06-1987 在 Javascript 中无效
  
  let date_2 = new Date('24-06-1987')
  
  console.log(date_2) =>  Invalid Date {}
  
  所以: JavaScript 中,如果你想使用日期字符串,就必须使用一种全世界通用的格式。
  
  其中一种格式就是: ISO 8601 Extended format
ISO 8601 Extended format 通用格式
  ISO 8601 Extended format
  
  `YYYY-MM-DDTHH:mm:ss:sssZ`
  
     YYYY:4 位数的年份
  
     MM:2 位数的月份(01-12)
  
     DD:2 位数的日期(0-31)
  
     -:日期分隔符
  
     T:指示时间的开始
  
     HH: 小时 (0 to 23)
  
     mm: 分钟 (0 to 59)
  
     ss: 秒数 (0 to 59)
  
     sss: 毫秒 (0 to 999)
  
     : :时间分隔符
  
     Z:时区,有 Z 采用 UTC 时区,没有则是当地时区(仅限有时间的情况)
     
   其中 小时、分钟、秒、和毫秒是可选的
   
   如果创建一个不指定时间的日期,它会以 UTC(世界协调时) 为时区
   
   所以推荐你不要使用日期字符串来创建日期
   
   如果要创建日期,请使用参数或时间戳
参数
 最多可以传递 7 个参数来创建日期
 
 使用参数创建的时间都是本地时间
 
 new Date(2019, 5, 11, 5, 23, 59)
 
 => Sat Apr 22 2017 05:23:50 GMT+0800 (中国标准时间)
 
 它的参数从左到右分别为:年,月,日,时,分,秒,毫秒
 
    Year: 4 为数年份
 
    Month: 月份 (0-11),默认值为 0
 
    Day:天(1-31),默认值为 1
 
    Hour:小时(0-23),默认值为 0
 
    Minutes:分钟 (0-59),默认值为 0
 
    Seconds:秒数(0-59),默认值为 0
 
    Milliseconds: 毫秒数 (0-999),默认值为 0

 注意 
 
    月份的索引是从 0 开始的。如 1月 === 0,2月 === 1
    
    如果你想创建 UTC(世界协调时)的话
    
    new Date(Date.UTC(2019, 5, 11))
时间戳
 在 JavaScript 中,时间戳 是指 自1970年1月1日到现在的毫秒数
 
 很少有人用它来创建日期,因为这个数字往往大的惊人
 
 更多的是使用它来比较两个日期的大小
 
 new Date(1560211200000)
 
 => Tue Jun 11 2019 08:00:00 GMT+0800 (中国标准时间) {}
无参数
 如果创建不带有任何的参数,它会返回当前的日期(本地时间)
 
 new Date()
 
 => Sat Mar 26 2022 22:47:44 GMT+0800 (中国标准时间)

创建日期 普通函数 Date()

 可作为最简单的函数调用,返回一个代表当前事件的字符串
 
 注意: 即使带有参数,Date 作为普通函数使用时,返回的还是当前时间
 
 console.log(Date()) 
 
    => 'Sat Mar 26 2022 22:56:25 GMT+0800 (中国标准时间)'
 
 console.log(Date(2000,1,1))
 
    => "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)"

静态方法

Date.now() 返回当前时间距离零点的毫秒数

Date.parse() 用来解析日期字符串,返回该时间距离时间零点的毫秒数。没有参数 返回 NaN

Date.UTC() 接收年、月、日等变量作为参数,返回该时间距离时间零点(1970年1月1日 00:00:00 UTC)的毫秒数。没有参数 返回 NaN

实例方法

除了valueOf 和 toString 可以分为以下三类

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

get 类:获取Date对象的日期和时间

set 类:设置Date对象的日期和时间

to 类方法 格式化日期
 let date_2 = new Date()
 
 console.log(date_2.valueOf()) 
 
    => 1648307133707
 
 console.log(date_2.toString()) 
 
    => Sat Mar 26 2022 23:05:33 GMT+0800 (中国标准时间)
    
 1、valueOf() 等同于 getTime() 方法,返回实例对象距离时间零点对应的毫秒数
 
 2、toString() 返回一个完整的日期字符串。
 
 3、toUTCString() 返回对应的 UTC 时间,也就是比北京时间晚8个小时。
 
 4、toISOString() 返回对应时间的 ISO8601 写法
 
 5、toJSON() 返回符合 JSON 格式的ISO 日期字符串,与toISOString方法的返回结果完全相同
 
 6、toDateString() 返回日期字符串(不含小时、分和秒)
 
 7、toTimeString() 返回时间字符串(不含年月日)
 
 8、toLocaleString() 返回完整的本地时间
 
 9、toLocaleDateString() 返回本地日期(不含小时、分和秒)
 
 10、toLocaleTimeString() 返回本地时间(不含年月日)
get 类方法 获取日期
 let date_3 = new Date()
 
 console.log(date_3.getTime()) => 1648308061647
 
 console.log(date_3.getDate()) => 26
 
 console.log(date_3.getDay()) => 6
 
 console.log(date_3.getFullYear()) => 2022    
 
 console.log(date_3.getMonth()) => 2
 
 1、getTime():返回实例距离1970年1月1日00:00:00的毫秒数,等同于valueOf方法。
 
 2、getDate():返回实例对象对应每个月的几号(从1开始)
 
 3、getDay():返回星期几,星期日为0,星期一为1,以此类推
 
 4、getFullYear():返回四位的年份
 
 5、getMonth():返回月份(0表示1月,11表示12月)
 
 6、getHours():返回小时(0-23)
 
 7、getMilliseconds():返回毫秒(0-999)
 
 8、getMinutes():返回分钟(0-59)
 
 9、getSeconds():返回秒(0-59)
 
 10、getTimezoneOffset():返回当前时间与 UTC 的时区差异,以分钟表示,返回结果考虑到了夏令时因素
set 类方法 设置日期
 1、setDate(date):设置实例对象对应的每个月的几号(1-31),返回改变后毫秒时间戳
 
 2、setFullYear(year [, month, date]):设置四位年份
 
 3、setHours(hour [, min, sec, ms]):设置小时(0-23)
 
 4、setMilliseconds():设置毫秒(0-999)
 
 5、setMinutes(min [, sec, ms]):设置分钟(0-59)
 
 6、setMonth(month [, date]):设置月份(0-11)
 
 7、setSeconds(sec [, ms]):设置秒(0-59)
 
 8、setTime(milliseconds):设置毫秒时间戳

Date 应用

日期的运算
 两个日期实例对象进行减法运算时,返回的是它们间隔的毫秒数
 
 进行加法运算时,返回的是两个字符串连接而成的新字符串
 
 let d1 = new Date(2000, 2, 1);
 let d2 = new Date(2000, 3, 1);

 console.log(d2 - d1) 
 
    => 2678400000

 console.log(d2 + d1) 
 
    => "Sat Apr 01 2000 00:00:00 GMT+0800 (CST)Wed Mar 01 2000 00:00:00 GMT+0800 (CST)"
日期比较
 如果想比较两个日期的大小,可直接使用比较符 >、<、>=、<= 
 
 const earlier = new Date(2019, 0, 26)
 const later = new Date(2019, 0, 27)

 console.log(earlier < later) => true
 
 但如果你想比较两个日期是否相等,此时使用 == 或 === 却无能为力了
 
 想要比较两个日期是否相等,可以使用 getTime 来获取时间戳来进行比较
 
 const a = new Date(2019, 0, 26)
 const b = new Date(2019, 0, 26)
 
 const isSameTime = (a,b) => {
    return a.getTime() === b.getTime()
 }

 console.log(isSameTime(a, b)) => true
 
 也可以检查它们的 getFullYear、getMonth 和 getDate 的值
自定义日期格式
 可以根据 get 类方法 来封装方法 获得自定义日期格式
计算器方法
setInterval()
  setInterval(function(){},time) 
  
  每个 time 的时间间隔 执行一次f unction 中的内容,首次执行等time 的时间 间隔 后去执行
  
  time是时间间隔以毫秒为单位
  
  清除计时器
  
     clearInterval(计时器名字)
  
     let seTime = setInterval(() => {},300)
     
     clearInterVal(seTime)
     
  为什么要清除计时器   
  
    因为如果使用了计时器,那么等计数器计算到了设置的时间不会停还会往下计时甚至会出现负数  
setTimeout()
   setTimeout(function(){},time)
   
   只执行一次 function 等 time 的时间后去执行
   
   清除计时器
   
       clearTimeout(计时器名字)
   
       let timeOut = setTimeout(() => {},300)
       
       clearTimeout(timeOut)