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

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

簡介

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

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) 来重置时间。

相关推荐：

js data日期初始化的5种方法_javascript技巧

javascript-问：php使用post方式提交data，进行js加密，然后显示出来

以上是js中data物件的詳細用法介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！