JS 瞭解Date對象

前陣子寫了一個週年優惠券倒計時的需求，假設優惠券過時時間爲2019-07-23 23:59:59，則有代碼以下：

let deadline = Date.parse('2019-07-23T23:59:59')
countdownTimer = setInterval(() => {
    const time = getCountDownTime(deadline)
    setDay(lp((Math.floor(time.hours / 24)), 2, 0))
    setHours(lp(time.hours % 24, 2, 0))
    setMinutes(lp(time.minutes, 2, 0))
    setSeconds(lp(time.seconds, 2, 0))
}, 1000)
複製代碼

一頓操做猛如虎,寫完直接上線，結果發現IOS的時間竟然多了8個小時？？？？

因而藉此機會，梳理一下Date()對象。

• 本篇涉及的內容有
  • GMT & UTC
  • 時區 & Date().getTimezoneOffset()
  • Date對象的四種參數
  • Date.parse() 與 Date.UTC()
  • 小小的坑

GMT & UTC

• GMT： 格林威治標準時間，指位於倫敦郊區的皇家格林威治天文臺的標準時間，由於本初子午線被定義在經過那裏的經線。

• UTC： 協調世界時，以原子時秒長爲基礎，在時刻上接近於格林威治標準時間的一種時間計量系統。

  因爲地球的自轉有些不規則，而且正在緩慢減速，格林威治時間再也不做爲標準時間使用，而使用協調世界時UTC。

  爲了方便，在不須要精確到秒的狀況下，一般將GMT和UTC視爲等同。

時區 & Date().getTimezoneOffset()

• 時區：時區是地球上的區域使用同一個時間定義。全球被劃分爲24個時區，每一個時區橫跨經度15度，時間恰好爲1小時。因此每差一個時區，區時相差一小時。

  那麼如何得到當前所在經緯度的區時呢？這時可使用Date對象的getTimezoneOffset()方法。

• getTimezoneOffset()： getTimezoneOffset()方法返回UTC相對於當前時區的時間差值，單位爲分鐘。

  const time = new Date()
  console.log(time.getTimezoneOffset())
  // -480 （0時區-（+8時區））* 60min = -480
  複製代碼

  若是計算出來的時間比預期的時間多出8小時，可能就是時區差哦

Date對象的四種參數

• 沒有參數： 返回的Date對象表示實例化時刻的日期和時間

const time = new Date()
// Tue Jul 23 2019 10:14:27 GMT+0800 (中國標準時間)
複製代碼

• 時間戳： 是指格林威治時間1970年01月01日00時00分00秒至指定時間的總秒數

new Date().getTime()
// 1563848320776 時間戳
new Date(1563848320776)
// Tue Jul 23 2019 10:18:40 GMT+0800 (中國標準時間)
複製代碼

• 表示日期的字符串值

  ** 標準日期字符串

  • "2019-07-23" （僅日期表單）
  • "2019-07-23T12:00:00" （日期時間表單）
  • "2019-07-23T12:00:00.000+08:00"（具備毫秒和時區的日期時間表單）
  • "2019-01-01T00:00:00.000Z"（指定UTC時區，Z是協調世界時0時區的標誌）

  **非標準日期字符串（根據不一樣瀏覽器的實現不一樣，詳情請閱MDN說明）

• 分別提供日期與時間的每個成員

  至少須要提供年份與月份，沒有提供參數將使用其最小值

  • year： 表示年份的整數值
  • monthIndex： 表示月份的整數值，從0（1月）到11（12月）
  • day： 表示一個月中第幾天的整數值
  • hours： 表示一天中的小時數的整數值
  • minutes： 表示分鐘部分的整數值
  • seconds： 表示秒部分的整數值
  • milliseconds： 表示毫秒部分的整數值

Date.parse() 與 Date.UTC()

• new Date('2019-07-24') 等價於 Date.parse('2019-07-24')

  Date.parse()方法接受一個表示日期的字符串參數，而後嘗試根據這個字符串返回相應日期的毫秒數。

  若是直接將日期字符串傳遞給Date構造函數，也會在後臺調用Date.parse()

• new Date(2019, 6, 24) 不等價於 new Date(Date.UTC(2019, 6, 24))

  Date.UTC()一樣返回表示日期的毫秒數，但參數是日期與時間的每個成員。

  注意： new Date(2019, 6, 24) 是基於本地時間，而new Date(Date.UTC(2019, 6, 24))是基於UTC時間

  new Date(2019, 6, 24)
  // Wed Jul 24 2019 00:00:00 GMT+0800 (中國標準時間)
  Date(Date.UTC(2019, 6, 24))
  // Tue Jul 23 2019 11:58:00 GMT+0800 (中國標準時間)
  複製代碼

小小的坑

參數爲日期表單，時間卻多了8個小時？？

let time1 = Date.parse('2019-07-24')
// 1563926400000
let time2 = new Date().getTime()
// 1563850261989 本地時間爲10AM
(time1 - time2) * 3600
// 21 （3600 = 60分鐘 * 60秒 *1000毫秒到秒的轉換）
複製代碼

官方原話爲：若是不存在時區偏移，則僅日期表單將被解釋爲UTC時間，而日期時間表單將被解釋爲本地時間。 故'2019-07-24'被解釋爲UTC時間，而且js在本地存儲時，不會存儲實例化該日期時的時區信息，所以比預期多了8個小時。

參數爲日期時間表單，Safari瀏覽器上多了8個小時？？

大概是Safari瀏覽器將日期時間表單也解釋爲UTC時間吧。😊

小結

• 爲保證各瀏覽器表現形式同樣，推薦日期字符串使用具備時區的日期時間表單或者標誌UTC時區的日期時間表單