【Date】時間不在於你擁有多少，而在於你怎樣使用

這是我參與新手入門的第0篇文章，慌的一批，歡迎各位大佬在評論區提意見·。· 文末有乾貨🍔。javascript

基礎概念

ECMAScript 的 Date 類型參考了 Java 早期版本中的 java.util.Date。爲此，Date 類型將日期保存爲自協調世界時（UTC，Universal Time Coordinated）時間 1970 年 1 月 1 日午夜（零時）至今所通過的毫秒數。使用這種存儲格式，Date 類型能夠精確表示 1970 年 1 月 1 日以前及以後285616年的日期。前端

如何使用

語法

要建立日期對象，就使用 new 操做符來調用 Date 構造函數，語法：java

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
複製代碼

上述代碼也是Date()構造函數的四種基本形式，用法以下：數組

沒有參數瀏覽器

若是沒有提供參數，那麼新建立的Date對象表示實例化時刻的日期和時間。markdown
```
new Date()  // Mon Jul 05 2021 14:50:15 GMT+0800 (中國標準時間)
複製代碼
```
Unix時間戳函數

valueoop

一個 Unix 時間戳，時間戳是一個整數值，表示自1970年1月1日00:00:00 UTC（the Unix epoch）以來的毫秒數，忽略了閏秒，若 value 爲負數，則表示1970年1月1日00:00:00 以前的日期。請注意大多數 Unix 時間戳功能僅精確到最接近的秒。ui
```
new Date(1625467815913) //Mon Jul 05 2021 14:50:15 GMT+0800 (中國標準時間)
new Date(-1625467815913) //Sun Jun 30 1918 01:09:44 GMT+0800 (中國標準時間) 
複製代碼
```

時間戳字符串spa

dateString

表示日期的字符串值。該字符串應該能被 Date.parse() 正確方法識別。若是 dateString 並不表示日期，則該方法會返回 NaN。若是直接把表示日期的字符串傳給 Date 構造函數，那麼 Date 會在後臺調用Date.parse() 。

new Date('2021-07-05 15:25:00')  //Mon Jul 05 2021 15:25:00 GMT+0800 (中國標準時間)
new Date('2021/07/05 15:25:00')  //Mon Jul 05 2021 15:25:00 GMT+0800 (中國標準時間)
new Date('Mon Jul 05 2021 15:25:00')  //Mon Jul 05 2021 15:25:00 GMT+0800 (中國標準時間)
複製代碼

分別提供日期與時間的每個成員

當至少提供了年份與月份時，這一形式的 Date() 返回的 Date 對象中的每個成員都來自下列參數。沒有提供的成員將使用最小可能值（對日期爲1，其餘爲0）。

year 表示年份的整數值。 0到99會被映射至1900年至1999年，其它值表明實際年份。

monthIndex 表示月份的整數值，從 0（1月）到 11（12月），monthIndex 是從「0」開始計算的，這就意味着一月份爲「0」，十二月份爲「11」。

date 可選表示一個月中的第幾天的整數值，從1開始。默認值爲1。

hours 可選表示一天中的小時數的整數值 (24小時制)。默認值爲0（午夜）。

minutes 可選表示一個完整時間（如 01:10:00）中的分鐘部分的整數值。默認值爲0。

seconds 可選表示一個完整時間（如 01:10:00）中的秒部分的整數值。默認值爲0。

milliseconds 可選表示一個完整時間的毫秒部分的整數值。默認值爲0。
```
new Date(2021,6,5,15,22,00)  //Mon Jul 05 2021 15:22:00 GMT+0800 (中國標準時間)
複製代碼
```

注意

不一樣的瀏覽器對 Date 類型的實現有不少問題。好比，不少瀏覽器會選擇用當前日期替代越界的日期，所以有些瀏覽器會將"January 32, 2019"解釋爲"February 1,2019"。Opera 則會插入當前月的當前日，返回"January 當前日, 2019"。就是說，若是是在 9 月 21 日運行代碼，會返回"January 21, 2019"。

屬性

Date.prototype

容許爲 Date 對象添加屬性。
Date.length

Date.length 的值是 7。這是該構造函數可接受的參數個數。

方法

Date.now()

返回自 1970-1-1 00:00:00 UTC（世界標準時間）至今所通過的毫秒數。等同於 new Date().getTime()，區別在於Date.now()不會建立額外Date對象。
```
Date.now()  //1625473495744 
new Date().getTime()  //1625473495744
複製代碼
```
Date.parse()

解析一個表示日期的字符串，並返回從 1970-1-1 00:00:00 所通過的毫秒數。
Date.UTC()

接受和構造函數最長形式的參數相同的參數（從2到7），並返回從 1970-01-01 00:00:00 UTC 開始所通過的毫秒數。

Date實例

全部的 Date 實例都繼承自 Date.prototype。修改 Date 構造函數的原型對象會影響到全部的 Date 實例。

實例屬性

Date.prototype.constructor

返回建立了實例的構造函數，默認是 Date 構造函數。

實例方法

一下列出了經常使用的實例方法，更多方法可參考 developer.mozilla.org/zh-CN/docs/…

Getter

Date.prototype.getDate()

根據本地時間返回指定日期對象的月份中的第幾天（1-31）。
Date.prototype.getDay()

根據本地時間返回指定日期對象的星期中的第幾天（0-6）。
Date.prototype.getFullYear()

根據本地時間返回指定日期對象的年份（四位數年份時返回四位數字）。
Date.prototype.getHours()

根據本地時間返回指定日期對象的小時（0-23）。
Date.prototype.getMinutes()

根據本地時間返回指定日期對象的分鐘（0-59）。
Date.prototype.getMonth()

根據本地時間返回指定日期對象的月份（0-11）。
Date.prototype.getSeconds()

根據本地時間返回指定日期對象的秒數（0-59）。
Date.prototype.getTime()

返回從1970-1-1 00:00:00 UTC（協調世界時）到該日期通過的毫秒數，對於1970-1-1 00:00:00 UTC以前的時間返回負值。

Setter

Date.prototype.setDate()

根據本地時間爲指定的日期對象設置月份中的第幾天。
Date.prototype.setFullYear()

根據本地時間爲指定日期對象設置完全年份（四位數年份是四個數字）。
Date.prototype.setHours()

根據本地時間爲指定日期對象設置小時數。
Date.prototype.setMinutes()

根據本地時間爲指定日期對象設置分鐘數。
Date.prototype.setMonth()

根據本地時間爲指定日期對象設置月份。
Date.prototype.setSeconds()

根據本地時間爲指定日期對象設置秒數。
Date.prototype.setTime()

經過指定從 1970-1-1 00:00:00 UTC 開始通過的毫秒數來設置日期對象的時間，對於早於 1970-1-1 00:00:00 UTC的時間可以使用負值。

經常使用方法（全是乾貨，歡迎評論區補充！！！）

根據Date實例提供的方法，結合平常工做工做中的需求，總結了一下幾個方法

返回一個包含各類日期格式的對象，不夠用的話本身加就行，方便管理和複用

function formatDate(dateStr){
        if(!dateStr) {return}
        let _date = dateStr

        if (typeof dateStr == 'string') {
            _date = new Date(str_date.replace(/-/g, "/"))
        }

        if (typeof _date != 'object') {
            return {};
        }

        // 小於10時補0
        function fix(num) {
          return (String(num)).padStart(2,0)
        }

        // yyyy-MM-dd HH:mm:ss
        var year = _date.getFullYear()
            , month = _date.getMonth() + 1
            , date = _date.getDate()
            , day = _date.getDay()
            , hours = _date.getHours()
            , minutes = _date.getMinutes()
            , seconds = _date.getSeconds();

        var months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            , months_en = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
            , months_abbr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            , days = ['週日', '週一', '週二', '週三', '週四', '週五', '週六']
            , days_en = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday']
            , days_abbr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

        return {
            year: year,
            month: fix(month),
            date: fix(date),
            day: day,
            hours: fix(hours),
            minutes: fix(minutes),
            seconds: fix(seconds),
            month_name: months[month - 1],
            month_name_en: months_en[month - 1],
            month_abbr: months_abbr[month - 1],
            day_name: days[day],
            day_name_en: days_en[day],
            day_abbr: days_abbr[day],
            // yyyy-MM-dd
            ymd: year + '-' + fix(month) + '-' + fix(date),
            // yyyy.MM.dd
            ymd2: year + '.' + fix(month) + '.' + fix(date),
            // HH:mm:ss
            hms: fix(hours) + ':' + fix(minutes) + ':' + fix(seconds),
            // HH:mm
            hm: fix(hours) + ':' + fix(minutes),
            // yyyy-MM-dd HH:mm:ss
            full: year + '-' + fix(month) + '-' + fix(date) + ' ' + fix(hours) + ':' + fix(minutes) + ':' + fix(seconds),
            // yyyy.MM.dd HH:mm:ss
            full2: year + '.' + fix(month) + '.' + fix(date) + ' ' + fix(hours) + ':' + fix(minutes) + ':' + fix(seconds),
            // yyyy/MM/dd HH:mm
            ymdhm: year + '/' + fix(month) + '/' + fix(date) + ' ' + fix(hours) + ':' + fix(minutes),
            // yy/MM/dd HH:mm
            ymdhm2: (year + '').substring(2, 4) + '/' + fix(month) + '/' + fix(date) + ' ' + fix(hours) + ':' + fix(minutes),
            // MM/dd HH:mm
            mdhm: fix(month) + '/' + fix(date) + ' ' + fix(hours) + ':' + fix(minutes),
            // dd month yyyy HH:mm
            west: fix(date) + ' ' + months_abbr[month - 1] + ' ' + year + ' ' + fix(hours) + ':' + fix(minutes)
        };
    }
 
formatDate(new Date())

// {
// date: "05"
// day: 1
// day_abbr: "Mon"
// day_name: "週一"
// day_name_en: "Monday"
// full: "2021-07-05 17:05:02"
// full2: "2021.07.05 17:05:02"
// hm: "17:05"
// hms: "17:05:02"
// hours: "17"
// mdhm: "07/05 17:05"
// minutes: "05"
// month: "07"
// month_abbr: "Jul"
// month_name: "七月"
// month_name_en: "July"
// seconds: "02"
// west: "05 Jul 2021 17:05"
// year: 2021
// ymd: "2021-07-05"
// ymd2: "2021.07.05"
// ymdhm: "2021/07/05 17:05"
// ymdhm2: "21/07/05 17:05"
// }

複製代碼

返回一個由 開始時間 和 結束時間 組成的數組，獲取快捷鍵日期本月currentMounth、上月prevMounth、本週currentWeek、上週prevWeek(不傳入tag默認本月)

function getShortkeyDate(tag){
    const tempDate = new Date().getDate(); // 當前幾號
    const tempDay = new Date().getDay() ? new Date().getDay() : 7; // 當前周幾
    const currentDate = new Date(); // 當前日期
    let end = new Date();
    let start = new Date().setTime(currentDate.getTime() - 3600 * 1000 * 24 * (tempDate-1));
    if(tag == 'currentMounth'){ 
        end = new Date();
        start = new Date().setTime(currentDate.getTime() - 3600 * 1000 * 24 * (tempDate-1));
    } else if(tag == 'currentWeek'){ 
        end = new Date();
        start = new Date().setTime(currentDate.getTime() - 3600 * 1000 * 24 * (tempDay-1));
    } else if(tag == 'prevMounth'){
        end = new Date().setTime(currentDate.getTime() - 3600 * 1000 * 24 * tempDate);
        const endTempDate = new Date(end).getDate(); // 上個月最後一天是幾號
        start = new Date(end).setTime(new Date(end).getTime() - 3600 * 1000 * 24 * (endTempDate-1));
    } else if(tag == 'prevWeek'){ 
        end = new Date().setTime(currentDate.getTime() - 3600 * 1000 * 24 * tempDay);
        start = new Date().setTime(currentDate.getTime() - 3600 * 1000 * 24 * (tempDay-1+7));
    }
    return [new Date(start), new Date(end)]
}
      
getShortkeyDate('currentMounth')
//[Thu Jul 01 2021 17:30:11 GMT+0800 (中國標準時間), Mon Jul 05 2021 17:30:11 GMT+0800 (中國標準時間)] 
複製代碼

獲取當前日期的上個月日期，通常用於獲取近30天日期，返回一個表示日期的字符串

function getPreMonth(date) {
    let arr = date.split('-');
    let year = arr[0]; //獲取當前日期的年份
    let month = arr[1]; //獲取當前日期的月份
    let day = arr[2]; //獲取當前日期的日
    let days = new Date(year, month, 0);
    days = days.getDate(); //獲取當前日期中月的天數
    let year2 = year;
    let month2 = parseInt(month) - 1;
    if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
    }
    let day2 = day;
    let days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
        day2 = days2;
    }
    if (month2 < 10) {
        month2 = '0' + month2;
    }
    let t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
}
      
getPreMonth('2021-07-31')  //"2021-06-30"
getPreMonth('2021-01-01')  //"2020-12-01"
複製代碼

獲取兩個時間段的每一天，通常用來處理渲染圖表用，本身根據日期判斷有無數據，沒有的話就造一個，返回一個包含 開始時間 至 結束時間 之間每一天日期的數組

function formatEveryDay(start, end) {
    let dateList = []; 
    let startTime = new Date(start);
    let endTime = new Date(end);

    while ((endTime.getTime() - startTime.getTime()) >= 0) {
        let year = startTime.getFullYear();
        let month = (String(startTime.getMonth() + 1)).padStart(2,0);
        let day = (String(startTime.getDate())).padStart(2,0);
        dateList.push(year + "-" + month + "-" + day); 
        startTime.setDate(startTime.getDate() + 1);
    }
    return dateList;
}
    
formatEveryDay('2021-07-01', '2021-07-05')
// ["2021-07-01", "2021-07-02", "2021-07-03", "2021-07-04", "2021-07-05"] 
複製代碼

獲取num天前/後的日期，num是正數表示以後的時間，num負數表示以前的時間，0表示今天，返回一個表示日期的字符串

function getFormatXDate(num) { 
    let date = new Date();
    date.setDate(date.getDate() + num);
    let Y = date.getFullYear()
    let M = (date.getMonth() + 1) < 10? "0"+ (date.getMonth() + 1) : date.getMonth() + 1
    let D =  date.getDate()< 10? "0" + date.getDate() : date.getDate()
    let time = Y+"-"+M+"-"+D; 
    return time;
}

// 今天日期
getFormatXDate(0)  //"2021-07-05"
// 4天后的日期，當前日期爲2021-07-05
getFormatXDate(4)  //"2021-07-09"
// 8天前的日期
getFormatXDate(-8)  //"2021-06-27" 

複製代碼

總結

也不知道有沒有人能看到總結，隨便灑灑水·。·一直都有寫文章的想法，奈何文筆不行加之以爲本身前端方面學識淺薄，無法輸出優質的文章，好屢次打開wolai卻也只是停留在新建模板這步。轉念一想仍是嘗試一下吧，萬事開頭難，慢慢掌握技巧，寫的多了就行了，沖沖衝。