js中data物件的詳細用法介紹（附程式碼）-js教程-PHP中文網

這篇文章帶給大家的內容是關於js中data物件的詳細用法介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

簡介

在 JavaScript 中處理日期可能會很複雜，無論開發者技術如何，往往都會感到痛苦。

js中data物件的詳細用法介紹（附程式碼）

JavaScript 透過一個強大的Date物件對我們提供了日期處理功能。

DATE 物件

Date 物件實例表示單一時間點.

儘管名為Date, 它同樣被用來處理時間。

初始化 Date 物件

我們透過下述程式碼初始化一個 Date 物件：

new Date()

登入後複製

上述程式碼建立了一個表徵當下時刻的日期物件。

在內部, 日期表示自 1970年1月1日 (UTC) 起到現在的毫秒數。這個時間很重要, 因為就計算機而言, 這是其起始之時。

您可能熟悉 UNIX 時間戳記: 這表示自該著名日期以來過去的秒數。

注意UNIX 時間戳記以秒為單位，JavaScript 日期以毫秒為單位

#如果我們有一個UNIX 時間戳，我們可以透過下述方法初始化一個JavaScript 日期物件：

const timestamp = 1530826365
new Date(timestamp * 1000)

登入後複製

如果我們傳入的是0，我們將會得到表示Jan 1st 1970 (UTC) 這個時間點的日期。

new Date(0)

登入後複製

如果我們傳入的是字串而非數值，那麼Date 物件會使用parse 方法來判明你傳入的究竟是哪個日期，如：

new Date('2018-07-22')
new Date('2018-07') //July 1st 2018, 00:00:00
new Date('2018') //Jan 1st 2018, 00:00:00
new Date('07/22/2018')
new Date('2018/07/22')
new Date('2018/7/22')
new Date('July 22, 2018')
new Date('July 22, 2018 07:22:13')
new Date('2018-07-22 07:22:13')
new Date('2018-07-22T07:22:13')
new Date('25 March 2018')
new Date('25 Mar 2018')
new Date('25 March, 2018')
new Date('March 25, 2018')
new Date('March 25 2018')
new Date('March 2018') //Mar 1st 2018, 00:00:00
new Date('2018 March') //Mar 1st 2018, 00:00:00
new Date('2018 MARCH') //Mar 1st 2018, 00:00:00
new Date('2018 march') //Mar 1st 2018, 00:00:00

登入後複製

這裡很靈活。您可以在月份或天數內添加或省略前導零.

需要注意月/日的位置，否則可能會把月份解析為日期。

使用Date.parse 也可以處理字串：

Date.parse('2018-07-22')
Date.parse('2018-07') //July 1st 2018, 00:00:00
Date.parse('2018') //Jan 1st 2018, 00:00:00
Date.parse('07/22/2018')
Date.parse('2018/07/22')
Date.parse('2018/7/22')
Date.parse('July 22, 2018')
Date.parse('July 22, 2018 07:22:13')
Date.parse('2018-07-22 07:22:13')
Date.parse('2018-07-22T07:22:13')

登入後複製

Date.parse 會傳回毫秒錶示的時間戳記而非Date 對象

你也可以依照順序傳入值來表示日期的每一部分，參數順序如下：年份，月份（從0開始），日期，小時，分鐘，秒，毫秒

new Date(2018, 6, 22, 7, 22, 13, 0)
new Date(2018, 6, 22)

登入後複製

最少需要傳入三個參數，不過大多JavaScript 引擎也可以解析少於三個參數的情況

new Date(2018, 6) //Sun Jul 01 2018 00:00:00 GMT+0200 (Central European Summer Time)
new Date(2018) //Thu Jan 01 1970 01:00:02 GMT+0100 (Central European Standard Time)

登入後複製

上述程式碼的最終結果是依賴你的電腦的時區的相對值。這意味著傳入相同的參數在不同電腦上可能會有不同的結果。

JavaScript 在沒有任何有關時區的資訊的情況下, 會將日期視為 UTC, 結果會自動針對目前的電腦時區進行轉換。

總結一下，有四種方法可以讓你建立一個新的Date 物件：

不傳參數，會基於目前時間建立Date 物件；
傳入代表自1 Jan 1970 00:00 GMT 過去的毫秒數的數值；
傳入代表日期的字串；
傳入一系列分別代表各項的參數；

時區

初始化日期時, 您也可以傳入時區,此時日期不假定為UTC, 然後轉換為本地時區。

可以透過 HPURS 格式或新增時區名稱的方式傳入時區。

new Date('July 22, 2018 07:22:13 +0700')
new Date('July 22, 2018 07:22:13 (CET)')

登入後複製

如果在解析時傳入了錯誤的時區名稱，JavaScript 就會預設使用 UTC 並不會錯誤。

如果傳入了錯誤格式的數值，JavaScript會報 Invaild Date 錯誤。

日期轉換和格式化

對於一個給定的日期對象，存在著許多方法可以基於該日期生產字串

const date = new Date('July 22, 2018 07:22:13')

date.toString() // "Sun Jul 22 2018 07:22:13 GMT+0200 (Central European Summer Time)"
date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)"
date.toUTCString() //"Sun, 22 Jul 2018 05:22:13 GMT"
date.toDateString() //"Sun Jul 22 2018"
date.toISOString() //"2018-07-22T05:22:13.000Z" (ISO 8601 format)
date.toLocaleString() //"22/07/2018, 07:22:13"
date.toLocaleTimeString()    //"07:22:13"
date.getTime() //1532236933000
date.getTime() //1532236933000

登入後複製

Date 物件的GETTER 方法

Date 物件提供了幾種檢查其值的方法。這些方法的結果都取決於電腦的目前時區

const date = new Date('July 22, 2018 07:22:13')

date.getDate() //22
date.getDay() //0 (0 means sunday, 1 means monday..)
date.getFullYear() //2018
date.getMonth() //6 (starts from 0)
date.getHours() //7
date.getMinutes() //22
date.getSeconds() //13
date.getMilliseconds() //0 (not specified)
date.getTime() //1532236933000
date.getTimezoneOffset() //-120 (will vary depending on where you are and when you check - this is CET during the summer). Returns the timezone difference expressed in minutes

登入後複製

上述方法存在對應的獲取UTC 時間的版本：

date.getUTCDate() //22
date.getUTCDay() //0 (0 means sunday, 1 means monday..)
date.getUTCFullYear() //2018
date.getUTCMonth() //6 (starts from 0)
date.getUTCHours() //5 (not 7 like above)
date.getUTCMinutes() //22
date.getUTCSeconds() //13
date.getUTCMilliseconds() //0 (not specified)

登入後複製

編輯Date 物件

Date 物件提供了若干編輯日期值得方法

const date = new Date('July 22, 2018 07:22:13')

date.setDate(newValue)
date.setDay(newValue)
date.setFullYear(newValue) //note: avoid setYear(), it's deprecated
date.setMonth(newValue)
date.setHours(newValue)
date.setMinutes(newValue)
date.setSeconds(newValue)
date.setMilliseconds(newValue)
date.setTime(newValue)
date.setTimezoneOffset(newValue)

登入後複製

setDay 和setMonth 都從數值0 開始處理，例如三月應該為數值2

這裡有一個冷知識: 這些方法會「重疊」, 所以比如說如果你使用了date.setHours (48), 結果會影響到天。

還有一個冷知識，你可以為setHours() 方法傳入多個參數，用以設定分鐘，秒，毫秒，如setHours(0, 0, 0, 0), setMinutes 和setSeconds 存在類似的情況。

類似於眾多取得日期的方法一樣，設定日期的方法也存在對於的UTC 版本：

const date = new Date('July 22, 2018 07:22:13')

date.setUTCDate(newalue)
date.setUTCDay(newValue)
date.setUTCFullYear(newValue)
date.setUTCMonth(newValue)
date.setUTCHours(newValue)
date.setUTCMinutes(newValue)
date.setUTCSeconds(newValue)
date.setUTCMilliseconds(newValue)

登入後複製

取得目前的時間戳記

如果你想取得以毫秒為單位的目前時間戳，建議使用下述方法：

Date.now()

登入後複製

而不是

new Date().getTime()

登入後複製

JavaScript 總是嘗試取得最準確的結果

上面已經提到過，你傳入的天數會影響到總的日期，這不會報錯，會直接更新月份

new Date(2018, 6, 40) //Thu Aug 09 2018 00:00:00 GMT+0200 (Central European Summer Time)

登入後複製

上述現像在日期，小時，分鐘，秒以及毫秒同樣生效

依据本地情况格式化日期

Internationalization API 在现代浏览器中有很好的支持(除了 UC浏览器)，允许你转换日期。

本地化方法通过，通过 Int1 对象暴露，这个对象还可以用来帮助本地化数值，字符串以及货币。

这里我们用到的是 Intl.DateTimeFormat()

我们可以通过下述方法来依据电脑的本地情况格式化一个日期：

const date = new Date('July 22, 2018 07:22:13')
new Intl.DateTimeFormat().format(date) //"22/07/2018" in my locale

登入後複製

也可以依据不同的时区格式化日期：

new Intl.DateTimeFormat('en-US').format(date) //"7/22/2018"

登入後複製

Intl.DateTimeFormat 方法还接收一个可选的参数用以自定义输出格式，可以用来展示小时，分钟和秒

const options = {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
}

new Intl.DateTimeFormat('en-US', options).format(date) //"7/22/2018, 7:22:13 AM"
new Intl.DateTimeFormat('it-IT', options2).format(date) //"22/7/2018, 07:22:13"

登入後複製

点击这个链接可以查看所有可以用到的属性

两个日期的对比

可以通过 Date.getTime() 获取两个日期之间的差别

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 22, 2018 07:22:13')
const diff = date2.getTime() - date1.getTime() //difference in milliseconds

登入後複製

同样也可以通过这个方法检测两个日期是否相同：

const date2 = new Date('July 10, 2018 07:22:13')
if (date2.getTime() === date1.getTime()) {
  //dates are equal
}

登入後複製

需要注意的是，getTime() 方法比较的是毫秒，所以 July 10, 2018 07:22:13 和 July 10, 2018 并不相等。不过你可以通过 setHours(0, 0, 0, 0) 来重置时间。