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

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

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

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

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

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

本地時(shí)間是指你的計(jì)算機(jī)所在的時(shí)區(qū)。

UTC實(shí)際上是格林威治標(biāo)準(zhǔn)時(shí)間(GMT)的同義詞

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

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

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

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

時(shí)間戳參數(shù)

不帶參數(shù)

new Date("1988-03-21")

這種方式方便且直觀。

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

這是有原因的。

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

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

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

YYYY：4位數(shù)年份

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

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

-：日期分隔符

T：表示開始時(shí)間

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

mm：分鐘（0到59）

ss：秒（0到59）

sss：毫秒（0到999）

:：時(shí)間分隔符

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

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

new Date("2019-06-11")    

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

如果你住在格林威治標(biāo)準(zhǔn)時(shí)間(GMT)晚的的地區(qū)，你會(huì)得到一個(gè)日期是6月10日。

如果你住在比格林威治標(biāo)準(zhǔn)時(shí)間早的地區(qū)，才會(huì)等得到6月11日的日期。

發(fā)生這種情況是因?yàn)槿掌谧址畢?shù)的方法具有特殊行為：如果創(chuàng)建日期（未指定時(shí)間），則會(huì)獲得UTC格式設(shè)置的日期。

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

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

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

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

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

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

Year：4位數(shù)年份

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

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

Hour：一天中的小時(shí)（0-23），如果省略，則默認(rèn)為0。

Minutes：分鐘（0-59），如果省略，則默認(rèn)為0。

Seconds：秒（0-59），如果省略，則默認(rèn)為0。

Milliseconds：毫秒（0-999），如果省略，則默認(rèn)為0。

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

許多開發(fā)人員比較少用這種方式，因?yàn)樗雌饋砗軓?fù)雜，但它實(shí)際上非常簡(jiǎn)單。可以從左到右記憶:年、月、日、小時(shí)、分鐘、秒和毫秒。

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

再來一些事件熟悉一下多個(gè)參數(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í)間

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

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

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

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

new Date()

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

有四種可能的語法：

使用字符串日期值

使用一系列參數(shù)

使用時(shí)間戳

不帶參數(shù)

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

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

記住月份是從0開始的

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

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

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

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

toString：格式化成 "Wed Jan 23 2019 17:23:42 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)"

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對(duì)象日期方法。

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

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

getMonth：獲取當(dāng)時(shí)時(shí)間的月份，注意從 0 開始

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

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

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

因?yàn)樾瞧诤驮路菔菑?開始的，所以我們可以創(chuàng)建一個(gè)映射表：

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ù)組代替對(duì)象，結(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月

簡(jiǎn)化一下：

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

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

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

獲取方式：

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

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

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

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

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

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

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

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

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

console.log(earlier < later) // true

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

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獲取它們的時(shí)間戳，用時(shí)間戳進(jìn)行比較。

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

如果只想檢查兩個(gè)日期是否在同一天，可以比較他們的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

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

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

從另一個(gè)日期添加/減去增量

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

setFullYear: 設(shè)置年份

setMonth：設(shè)置月份

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

setHours：設(shè)置時(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方法會(huì)改變?cè)既掌趯?duì)象。 在實(shí)際中，我們不應(yīng)該改變對(duì)象，應(yīng)該在新的日期對(duì)象上執(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上更受歡迎，它簡(jiǎn)潔，但更難掌握。 第二種方法更冗長(zhǎng)，但更容易理解。

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

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

首先，我們創(chuàng)建一個(gè)新的Date對(duì)象，這樣就不會(huì)改變?cè)既掌?/p>

const finalDate = new Date(today)

接下來，我們需要知道要更改的值。因?yàn)槲覀円淖內(nèi)掌?，所以我們可以?b>getDate獲得日期

const currentDate = today.getDate()

因?yàn)楂@取三天后的日期，所以需要在得到的日期加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方法，更改對(duì)應(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提供一個(gè)超出其可接受范圍的值，JS 將自動(dòng)重新計(jì)算日期。

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

這意味著在創(chuàng)建增量時(shí)無需擔(dān)心計(jì)算分鐘，小時(shí)，天，月等，JavaScript會(huì)自動(dòng)處理。

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

干貨系列文章匯總?cè)缦拢X得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

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

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

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。