摘要：實際上是格林威治標準時間的同義詞默認情況下，中的幾乎每個日期方法除了一個都是本地時間。如果你住在格林威治標準時間晚的的地區(qū)，你會得到一個日期是月日。需要知道對象日期方法。

為了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

JS中的 Date 很奇怪。當我們需要處理日期和時間的時候比較麻煩，經(jīng)常借助像date-fns和 Moment 這樣的庫。

但是我們并不總是需要使用庫。如果知道要注意一些總是，日期實際上可以非常簡單。接下介紹有關(guān)Date對象的所有信息

我們的世界有數(shù)百個時區(qū)。 在JavaScript中，我們只關(guān)心兩個， 本地時間和協(xié)調(diào)世界時（UTC）。

本地時間是指你的計算機所在的時區(qū)。

UTC實際上是格林威治標準時間(GMT)的同義詞

默認情況下，JS中的幾乎每個日期方法（除了一個）都是本地時間。 只有指定UTC，才能獲得 UTC 時間 。

可以使用 new Date() 來創(chuàng)建日期，傳入的參數(shù)通常有4種常用的方式：

使用日期字符串參數(shù)

使用一系列的參數(shù)

時間戳參數(shù)

不帶參數(shù)

new Date("1988-03-21")

這種方式方便且直觀。

如果現(xiàn)在寫的是21-03-1988，我們可以毫不費力想表達的是1988年3月21日。但是如果用JS 編寫21-03-1988，則會得到無效的日期。

這是有原因的。

在世界的不同地方以不同的方式解釋日期字符串。 例如11-06-2019是2019年6月11日還是 2019年11月6日。你不能確定我指的是哪一個，除非你知道我正在使用的日期系統(tǒng)。

在JS中，如果要使用日期字符串參數(shù)，則需要使用全球都能接受的格式，其中一種格式是ISO 8601擴展格式。

// ISO 8601 Extended format
`YYYY-MM-DDTHH:mm:ss:sssZ`

YYYY：4位數(shù)年份

MM：兩位數(shù)月份(即 1月為01,12月為12)

DD：兩位數(shù)的日期(0到31)

-：日期分隔符

T：表示開始時間

HH：24位小時數(shù)（0到23）

mm：分鐘（0到59）

ss：秒（0到59）

sss：毫秒（0到999）

:：時間分隔符

Z：如果存在Z，則日期將設(shè)置為UTC，如果Z不存在，則為本地時間。

其中小時，分鐘，秒和毫秒是可選的，如果你想創(chuàng)建一個2019年6月11日的日期，可以這樣寫：

new Date("2019-06-11")    

在這里要特別注意，使用日期字符串參數(shù)創(chuàng)建日期存在很大問題，把創(chuàng)建的日期打印出來就可以發(fā)現(xiàn)問題。

如果你住在格林威治標準時間(GMT)晚的的地區(qū)，你會得到一個日期是6月10日。

如果你住在比格林威治標準時間早的地區(qū)，才會等得到6月11日的日期。

發(fā)生這種情況是因為日期字符串參數(shù)的方法具有特殊行為：如果創(chuàng)建日期（未指定時間），則會獲得UTC格式設(shè)置的日期。

在上面的場景中，使用new Date("2019-06-11") 創(chuàng)建日期時，實際上創(chuàng)建的日期是2019年6月11日，UTC時間上午12點。這就是為什么住在格林尼治標準時間之后的地區(qū)的人得到的是6月10日而不是6月11日。

如果要使用日期字符串參數(shù)方法在“本地時間”中創(chuàng)建日期，則需要包括時間。如果包含時間，則需要至少寫入HH和mm

new Date("2019-06-11T00:00")  

使用日期字符串參數(shù)的創(chuàng)建的本地時間與UTC的比較可能是一個難以捕捉的錯誤。所以，建議不要使用日期字符串創(chuàng)建日期方式。

格林威治標準時間GMT 
 十七世紀，格林威治皇家天文臺為了海上霸權(quán)的擴張計畫而進行天體觀測。1675年舊皇家觀測所(Old Royal Observatory) 正式成立，到了1884年決定以通過格林威治的子午線作為劃分地球東西兩半球的經(jīng)度零度。觀測所門口墻上有一個標志24小時的時鐘，顯示當下的時間，對全球而言，這里所設(shè)定的時間是世界時間參考點，全球都以格林威治的時間作為標準來設(shè)定時間，這就是我們耳熟能詳?shù)摹父窳滞螛藴蕰r間(Greenwich Mean Time，簡稱G.M.T.)的由來，標示在手表上，則代表此表具有兩地時間功能，也就是同時可以顯示原居地和另一個國度的時間。 
世界協(xié)調(diào)時間UTC    
  多數(shù)的兩地時間表都以GMT來表示，但也有些兩地時間表上看不到GMT字樣，出現(xiàn)的反而是UTC這3個英文字母，究竟何謂UTC？事實上，UTC指的是Coordinated Universal Time－ 世界協(xié)調(diào)時間（又稱世界標準時間、世界統(tǒng)一時間），是經(jīng)過平均太陽時(以格林威治時間GMT為準)、地軸運動修正后的新時標以及以「秒」為單位的國際原子時所綜合精算而成的時間，計算過程相當嚴謹精密，因此若以「世界標準時間」的角度來說，UTC比GMT來得更加精準。其誤差值必須保持在0.9秒以內(nèi)，若大于0.9秒則由位于巴黎的國際地球自轉(zhuǎn)事務(wù)中央局發(fā)布閏秒，使UTC與地球自轉(zhuǎn)周期一致。所以基本上UTC的本質(zhì)強調(diào)的是比GMT更為精確的世界時間標準，不過對于現(xiàn)行表款來說，GMT與UTC的功能與精確度是沒有差別的。

最多可以傳入七個參數(shù)來創(chuàng)建日期/時間。

Year：4位數(shù)年份

Month：一年中的某月（0-11）

Day：每月的某天（1-31），如果省略，則默認為1。

Hour：一天中的小時（0-23），如果省略，則默認為0。

Minutes：分鐘（0-59），如果省略，則默認為0。

Seconds：秒（0-59），如果省略，則默認為0。

Milliseconds：毫秒（0-999），如果省略，則默認為0。

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

許多開發(fā)人員比較少用這種方式，因為它看起來很復雜，但它實際上非常簡單。可以從左到右記憶:年、月、日、小時、分鐘、秒和毫秒。

Date 中需要注意的地方Month是從0開始的，如1月=== 0，2月=== 1，3月=== 2，依此類推。

再來一些事件熟悉一下多個參數(shù)的用法

// 21st March 1988, 12am, Local Time.
new Date(1988, 2, 21)

// 25th December 2019, 8am, Local Time.
new Date(2019, 11, 25, 8)

// 6th November 2023, 2:20am, Local Time
new Date(2023, 10, 6, 2, 20)

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

注意，使用參數(shù)創(chuàng)建的日期都是用本地時間

使用參數(shù)的還有一個好處是不會在本地時間和UTC之間混淆，如果需要UTC時間，請以這種方式創(chuàng)建UTC 日期：

// 11th June 2019, 12am, UTC.
new Date(Date.UTC(2019, 5, 11))

在JS中，時間戳是自1970年1月1日以來經(jīng)過的毫秒數(shù)（1970年1月1日也稱為Unix紀元時間）。 根據(jù)我的經(jīng)驗，很少使用時間戳來創(chuàng)建日期，一般使用時間戳來比較不同的日期或者格式化日期，后面在討論。

如果創(chuàng)建沒有任何參數(shù)的日期，則會將日期設(shè)置為當前時間（以本地時間為單位）。

new Date()

使用 new Date() 創(chuàng)建日期

有四種可能的語法：

使用字符串日期值

使用一系列參數(shù)

使用時間戳

不帶參數(shù)

最好不要使用字符串日期值的方法創(chuàng)建日期

最好使用一系列參數(shù)方式創(chuàng)建日期

記住月份是從0開始的

多數(shù)編程語言都提供了一種格式工具來創(chuàng)您想要的任何日期格式 例如，在PHP中，可以將date("d M Y")格式化成23 1月 2019這樣的日期。

但是在JS 中格式化日期并不容易。

原生 Date 對象提供了七種格式化方法，這七種方法中的每一種都會給你一個特定的價值，而且它們毫無用處。

const date = new Date(2019, 0, 23, 17, 23, 42)

toString：格式化成 "Wed Jan 23 2019 17:23:42 GMT+0800 (中國標準時間)"

toDateString: 格式化成 "Wed Jan 23 2019"

toLocaleString：格式化成 "2019/1/23 下午5:23:42"

toLocaleDateString：格式化成 "2019/1/23"

toGMTString：格式化成 "Wed, 23 Jan 2019 09:23:42 GMT"

toUTCString：格式化成 "Wed, 23 Jan 2019 09:23:42 GMT"

toISOString ：格式化成 "2019-01-23T09:23:42.000Z"

如果需要自定義格式，則要自己創(chuàng)建。

假設(shè)想要 2019年1月23日 星期四這樣的日期格式。需要知道 Date對象日期方法。

要獲取這樣的格式，用到 Date 中的四個方法：

getFullYear：獲取當?shù)貢r間4位數(shù)的年份

getMonth：獲取當時時間的月份，注意從 0 開始

getDate：獲取當?shù)貢r間月中的某一天（1-31）

getDay：獲取當?shù)貢r間的星期幾（0-6），星期日（0）開始，到星期六（6）結(jié)束。

const d = new Date(2019, 0, 23)
const year = d.getFullYear() // 2019
const date = d.getDate() // 23

因為星期和月份是從0開始的，所以我們可以創(chuàng)建一個映射表：

const months = {
  0: "1月",
  1: "2月",
  2: "3月",
  3: "4月",
  4: "5月",
  5: "6月",
  6: "7月",
  7: "8月",
  8: "9月",
  9: "10月",
  10: "11月",
  11: "12月"
}

由于月份是0開始的的，我們可以使用數(shù)組代替對象，結(jié)果一樣：

const months = [
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月"
}

要得到1月份，你需要

const monthIndex = d.getMonth()
const monthName = months[monthIndex]
console.log(monthName) // 1月

簡化一下：

const monthName = months(d.getMonth())
console.log(monthName) // 1月

為了獲取 星期四，還需要 做同樣的事情：

const days = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六"
]

獲取方式：

const dayName = days[d.getDay()] // 星期四

接著就產(chǎn)拼接起來。這是相對乏味的。

如果需要創(chuàng)建自定義格式的時間，可以使用以下方法

getHours：獲取當?shù)貢r間獲取小時數(shù)（0-23）。

getMinutes:獲取本地時間獲取分鐘(0-59)。

getSeconds：獲取本地時間獲取秒數(shù)（0-59）。

getMilliseconds:獲取本地時間獲取毫秒(0-999)。

比較日期的前后，可以直接使用>, <, >= 和 <= 時行比較。

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier < later) // true

比較兩個日期是否一樣，就比較麻煩，不能直接用 == 或 ===

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false

可以getTime獲取它們的時間戳，用時間戳進行比較。

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true

如果只想檢查兩個日期是否在同一天，可以比較他們的getFullYear，getMonth和getDate值。

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate()=== b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10am
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
console.log(isSameDay(a, b)) // true

有兩種可能的情況，希望從另一個日期獲得一個日期。

設(shè)置另一個日期特定的日期/時間值

從另一個日期添加/減去增量

可以使用以下方法設(shè)置另一個日期的日期/時間:

setFullYear: 設(shè)置年份

setMonth：設(shè)置月份

setDate：設(shè)置每月的某一天

setHours：設(shè)置時

setNubytes：設(shè)置分

setSeconds：設(shè)置秒

setMilliseconds：設(shè)置毫秒

例如，如果想將日期設(shè)置為每月15日，可以使用setDate(15)

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 15 January 2019

注意：上面的setter方法會改變原始日期對象。 在實際中，我們不應(yīng)該改變對象，應(yīng)該在新的日期對象上執(zhí)行這些操作。

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 10 January 2019
console.log(newDate) // 10 June 2019

添加/減去增量有兩種通用方法。 第一種方法在Stack Overflow上更受歡迎，它簡潔，但更難掌握。 第二種方法更冗長，但更容易理解。

假設(shè)希望獲得從今天起三天的日期。 對于這個例子，假設(shè)今天是2019年3月28日。

const today = new Date(2019, 2, 28)

首先，我們創(chuàng)建一個新的Date對象，這樣就不會改變原始日期

const finalDate = new Date(today)

接下來，我們需要知道要更改的值。因為我們要改變?nèi)掌冢晕覀兛梢杂?b>getDate獲得日期

const currentDate = today.getDate()

因為獲取三天后的日期，所以需要在得到的日期加3

setDate(currentDate + 3)

完整代碼：

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate() + 3)

console.log(finalDate) // 31 March 2019

使用getFullYear，getMonth，getDate方法，更改對應(yīng)的值， 然后，我們使用new Date創(chuàng)建最終日期。

const today = new Date(2019, 2, 28)

// Getting required values
const year = today.getFullYear()
const month = today.getMonh()
const day = today.getDate()

// Creating a new Date (with the delta)
const finalDate = new Date(year, month, day + 3)

console.log(finalDate) // 31 March 2019

如果為Date提供一個超出其可接受范圍的值，JS 將自動重新計算日期。

如下所示，假設(shè)我們把日期定在2019年3月33日，日歷上沒有33日，JS 會自動將3月33日調(diào)整為4月2日。

這意味著在創(chuàng)建增量時無需擔心計算分鐘，小時，天，月等，JavaScript會自動處理。

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。

干貨系列文章匯總?cè)缦拢X得不錯點個Star，歡迎 加群 互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術(shù)保持學習愛好者。我會經(jīng)常分享自己所學所看的干貨，在進階的路上，共勉！

關(guān)注公眾號，后臺回復福利，即可看到福利，你懂的。