JavaScript Date & Times 時間處理

new Date() 物件的時間處理

我們常需要在網頁上處理或顯示時間，例如文章是何時編輯的、購物時間或是在觀察程式碼的效能時也會需要時間的處理，JavaScript 是如何處理日期和時間的呢？

JavaScript 包含了一個處理時間的物件：new Date()，透過這個構造式裡的方法或參數，我們可以精準的計算任何形式的時間。在這個物件的時間計算單位為毫秒（1000 毫秒為一秒），所以處理時需要另外除以 1000 才能得到我們熟悉的秒數。

Date()物件是基於世界標準時間（UTC） 1970 年 1 月 1 日開始的毫秒數值來儲存時間的。要得到當下的時間是很容易的，這個當下時間來自於我們本身使用的電腦當下的時間，而電腦的時間，有可能是透過網路而得到電腦當下所在時區的時間。但如果我們想要「計算時間」就必須透過一些方式與計算，例如想要計算不是在同時需的時間，或是要對某個時間點做倒數。

我們先來看看Date - JavaScript | MDN 怎麼解釋。

構造函式 new Date()

因為是構造式，創建時間的物件須先以new Date()創建，所回傳的值是一個封裝好的物件，以這個構造式被執行的時間點為標記傳回時間。

1 2	let date = new Date(); console.log(date); // Sat Aug 08 2020 15:36:59 GMT+0200 (中歐夏令時間)

以上的範例傳回// Sat Aug 08 2020 15:36:59 GMT+0200 (中歐夏令時間)
如果我們沒有給Date()任何參數，回傳的會是依電腦系統的設定，產生當下時間的 Date 物件。

以參數的方式取得時間

Date()可接受多種格式參數，回傳一個該參數對應的時間。

參數為字串：如果想指定我們所需要的特定日期（月/日/年）時間(時：分：秒)，傳入一個表示時間的字串作為參數，回傳值則是我們指定的日期時間。
參數為毫秒：參數為時間零點開始計算的毫秒數，回傳從 1970/1/1 00:00:00 開始算起的時間點。
參數為多個整數值：參數為代表年、月、日、小時、分鐘、秒、毫秒，回傳對應的時間。

// 參數為時間零點開始計算的毫秒數
let date1 = new Date(157821628600);
// Wed Jan 01 1975 16:20:28 GMT+0100 (中歐標準時間)
// 從 1970/1/1 00:00:00 開始算起的時間點

// 參數為字串的時間日期
let date2 = new Date('08/08/2020');
// Sat Aug 08 2020 00:00:00 GMT+0200 (中歐夏令時間)
let date3 = new Date('08/08/2020 12:42:24');
// Sat Aug 08 2020 12:42:24 GMT+0200 (中歐夏令時間)

// 參數為多個整數值: 年、月、日、小時、分鐘、秒、毫秒
let date4 = new Date(2020, 8, 8, 0, 0, 0, 0);
// Tue Sep 08 2020 00:00:00 GMT+0200 (中歐夏令時間)

只要是能被Date.parse()解析的字串，都可以當作是Date()的參數，所以不同的參數寫法都可以得到相同的時間。

new Date('2020/5/8');
new Date('2020-8-8');
new Date('05/8/2020');
new Date('2020-August-8');
new Date('August 8, 2020');
new Date('August, 8, 2020');
new Date('8, August, 2020');
new Date('8 August 2020');
// Sat Aug 08 2020 00:00:00 GMT+0200 (中歐夏令時間)

Date() 以物件的方法取得時間計算

Date()包含了許多的方法，透過呼叫這些方法，可以得到較為細節的時間，以下我們只介紹我們常用的方法。

get*() 得到特定的時間，並回傳整數

以 get 開頭的方法顧名思義是用來取得時間的，以字串為參數，直接指定時間，回傳的整數皆以 0 為起始，以星期來說，0 為週日、月份 0 為一月，以此類推。

1
2
3

let date = new Date('08/08/2020 12:42:24');
console.log(date); // Sat Aug 08 2020 12:42:24 GMT+0200 (中歐夏令時間)
let day = date.getDay(); // 回傳數字 6 ，表示 08/08/2020 這天是週六

以下為常用的get*()方法

getTime()：回傳當下時間距離 1970 年 1 月 1 日 00:00:00 的毫秒數
getDate()：回傳當下時間對應每個月的幾號（從 1 開始）。
getDay()：回傳星期幾，星期日為 0，星期一為 1，以此類推。
getFullYear()：回傳四位的年份。
getMonth()：回傳月份（0 表示 1 月，11 表示 12 月）。
getHours()：回傳小時（0-23）。
getMilliseconds()：回傳毫秒（0-999）。
getMinutes()：回傳分鐘（0-59）。
getSeconds()：回傳秒（0-59）。

let date = new Date();
let time = date.getTime();
// 回傳的是從1970年到至今的時間
console.log(time / 1000 / 60 / 60 / 24 / 365);
// 得到的時間值除以毫秒單位/秒單位/分單位/時單位/日單位
// 50.63727990001903
// 從1970 到現在 08/08/2020 共經過了50.637年

如果把戳印時間減去現在時間，原本應該是得到 0，卻回傳-3600000，是因為時區不同的原因，

let testDate = new Date('1/1/1970 0:0:0');
console.log(testDate);
// Thu Jan 01 1970 00:00:00 GMT+0100 (中歐標準時間)
// 現在時間
let nowTime = testDate.getTime();
console.log(nowTime); // -3600000
// 和標準時間相差值
let differTime = nowTime / 1000 / 60 / 60;
console.log(differTime); // -1 差一小時

now()回傳當下的時間戳印

可利用now()方法得到當下的時間，利用時間的戳印特性來測試程式碼的執行效能

let start = Date.now();
console.log(start);

for (let i = 0; i < 1000; i++) {
  // console.log(i);
}
let end = Date.now();
console.log(end);
console.log(`執行了${end - start}毫秒`);

取執行前和執行後的時間戳印相減，即可得執行時間

set*() 設置時間的方法

以 set 為開頭的方法，主要以設定時間為主，set*()來設定當下的時間點，常用的有：

setDate(date)：設置當前時間對應的每個月的幾號（1-31），返回改變後時間(毫秒)。
setFullYear(year)：設置四位數的年份。
setHours(hour)：設置小時（0-23）。
setMilliseconds()：設置毫秒（0-999）。
setMinutes(min)：設置分鐘（0-59）。
setMonth(month)：設置月份（0-11）。
setSeconds(sec)：設置秒（0-59）。
setTime(milliseconds)：設置毫秒時間。

Timer 設定定時的方法

使用定時的方法可以讓我們時做出不同的效果，另如定時器、倒數、重複時間循環。

setTimeout()

setTimeout()用來指定某個函數或某段 code 在多少毫秒之後執行。
此方法有兩個參數： setTimeout(function|code, delay);
setTimeout(將要延遲執行的函式或 code, 延遲執行的毫秒數)，如果省略第二個參數，則默認為 0(也就沒有延遲的意義並馬上執行)。

clearTimeout()

取消｀ setTimeout()｀設的定時器。

setInterval()

和setTimeout()完全一致，差別在於setInterval()可以無限次的設置定時器的執行。
此方法有兩個參數：setInterval(function|code, delay);第一參數為執行的函式或程式、第二參數為延遲的毫秒數。

clearInterval()

取消setInterval()設的定時器。