js中的 new Date() 你可能不知道的背後冷知識

2021-12-09 前端秦愛德

海闊憑魚躍,天高任鳥飛。Hey 你好!我是秦愛德。😄

導讀

在我們日常項目開發當中,必不可少的就是對日期時間的處理。針對此類需求,通常第三方插件或者廣大輪子哥們已然為我們提供了全套服務(開箱即用,手動點讚👍👍👍)。當然了,我們也可以通過系統對象new Date()來輕鬆實現對時間的處理。不過對於出場率如此之高的 new Date() 你真的了解它麼?什麼是時區?時間標準如何定義?JavaScript中的時區有何不同? 穩住,別慌!今天就讓我們來扒開Date()的外衣,看看它背後的冷知識。😜😜😜

什麼是時區?

通過查閱維基百科我們可以得出一個結論:一個時區是地球上的某個區域是觀察一個統一的標準時間為法律,商業和社會的目的。時區往往遵循國家及其分區的邊界,而不是嚴格遵循經度,因為便於緊密商業或其他通信區域保持同一時間。傳送門

一圖勝千言1884年10月在美國華盛頓召開的國際子午線會議,採納了一份提案。這份提案明確了,選取以穿過英國格林威治天文臺子午儀中心的那條子午線,作為確定全球經度和時間的本初子午線。最終,該會議將格林威治子午線設定為本初子午線,並將格林威治平時 (GMT, Greenwich Mean Time) 作為世界時間標準。由此也確定了全球24小時自然時區的劃分,所有時區都以和 GMT 之間的偏移量做為參考。

一個時區內的當地時間,會用與世界標準時間 (UTC) 之間的偏移量來定義。這個偏移量可以表示為 UTC- 或 UTC+,後面接上偏移的小時數和分鐘數。

我們常說的「時差」其實就是時區的差距,規定將全球劃分為24個時區(東、西各12個時區)。每個時區橫跨15個金緯度,相當於一個小時。

**舉個慄子:**🌰

美國紐約州紐約的時區為:GMT-4

中國四川省成都市的時區為:GMT+8

咱們大成都和美國紐約的時差為 8 - (-4) = 12

UTC - 世界時間的標準世界時間 (UT) 產生於1884年的華盛頓子午線會議。它是如今我們使用的24小時時區系統的基礎。世界標準時間 (UTC, Coordinated Universal Time) 是當今民用時間的基礎。它使用一天 24 小時時間制,並結合了地球的自轉時間與原子鐘的高精度度量。UTC 是一個全球通用的時間標準。全球各地都同意將各自的時間進行同步協調 (coordinated),這也是 UTC 名字的來源:Universal Coordinated Time。JavaScript中的new Date()

創建一個 JavaScript Date 實例,該實例呈現時間中的某個時刻。Date 對象則基於Unix Time Stamp,即指格林威治時間1970年01月01日00時00分00秒(北京時間1970年01月01日08時00分00秒)起至現在的總秒數。

獲取時區
// 當我們在谷歌瀏覽器控制臺輸入(我的坐標是在成都) new Data(),則輸出
// Tue Sep 22 2020 16:47:13 GMT+0800 (中國標準時間)
// 眼尖的小夥伴可能已經發現 'GMT+0800' 字樣,沒錯!這就是我們所在地的時區
// 可通過getTimezoneOffset函數來獲取當前地方時和UTC時間的差值(分鐘表示)。
let time = -new Date().getTimezoneOffset() / 60; // 輸出:8

獲取UTC標準時間到指定日期的毫秒數
// UTC() 方法可根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數(UTC時間與GMT(格林尼治時間)相同)
Date.UTC(2020,09,22) // 輸出:1603324800000
// 將本地時間轉換為UTC時間
new Date(Date.UTC(2020,09,22)) // 輸出:Thu Oct 22 2020 08:00:00 GMT+0800 (中國標準時間)
// 這裡需要注意一個點:new Date(2020,09,22) 是基於本地時間,而new Date(Date.UTC(2020,09,22))是基於UTC時間

一個有意思的現象(日期表單參數創建時間相差八小時)

一圖勝千言從控制臺的輸出得知兩個結果相差了8個小時。

一圖勝千言傳送門

MDN介紹到:如果不存在時區偏移,則僅日期表單將被解釋為UTC時間,而日期時間表單將被解釋為本地時間。(UTC時間即是0時區的標準時間)

提出疑問?new Date()實例可以修改時區麼?

答:不能!

舉個慄子🌰

原因在於實例化一個Date()對象後,js在本地存儲時,都會將它轉換成本地時區並不會存儲實例化該日期時的時區信息。

如果需要修改時區,可藉助第三方工具包momentjs

聲明一個moment實例,可通過實例上的tz()與format()方法配合使用,達到修改時區效果。具體用法可參考文檔這裡不做過多講述---文檔傳送門

蘋果手機的日期表單時間創建報錯問題
new Date('2020-09-22 00:00:00')

👆如上代碼,在做移動端h5頁面的時候,蘋果手機可能會報錯。原因在於蘋果手機多數使用safari瀏覽器,看到這裡!老划水員們可能早已心領神會,這是safari瀏覽器一直存在的兼容性問題。我們需要換一個寫法,如下👇

new Date('2020/09/22 00:00:00')

安利一些好用的時間處理工具包

https://momentjs.com/

https://github.com/iamkun/dayjs

https://date-fns.org/

好了👌,以上就是本次對new Date()的一些知識總結了,其實主要就是對時區的解釋。在寫這篇博客的時候,我也翻閱了相關資料,了解了一些關於「時間標準」的演進歷史,從利用太陽在正午的角度來測量時間到最早的測時工具日晷滴漏直至如今UTC全球通用時間標準。過程不斷的改進,我想這就是偉大人類的智慧吧。

❤️愛心三連擊

1.點讚在看,已成習慣!該系列持續更新,你們的一鍵三連就是我持續寫作的最大動力

2.關注公眾號前端秦愛德

3.點讚、在看、轉發 === 催更!

歡迎關注我的公眾號「前端秦愛德」,每天給你推送新鮮的技術文章。回復 「電子書」 即可獲得我精心準備的前端學習大禮包

感興趣的小夥伴還可以加入我的「秦愛德前端交流群」,我在成都上班兒,群裡有大批成都本土優秀大佬以及美女HR,如果你碰巧也是成都的,那就趕快進來吧。

多一個點在看多一條小魚乾

相關焦點

  • 你可能不知道的 Date 類
    ., 不使用 new 操作符)會返回一個代表當前日期和時間的字符串。2.特別提示[Firefox]不支持帶 '-' 的完整時間,比如 new Date('2012-07-08 00:00:00') 為無效的值,而 new Date('2012-07-08') 是正確的值。[month]4. 值的邊界不同執行環境下的邊界值有差異, Chrome 下甚至連負值都能支持。
  • 關於蛋雞養殖,你可能不知道的冷知識!
    ,下面這些冷知識,也許你真的不曉得。說出來你可能不信,我們現在所看到的雞其實是從一種史前肉食恐龍進化而來的。曾有科學家從霸王龍的遺傳信息上檢測出雞的信息,這就更加證明了在人類還沒有出現之前,雞和恐龍是有一腿的。更加可怕的是,目前雞身上的DNA仍然存有恐龍的記憶基因。
  • 前端冷知識,你可能不知道的前端知識之html篇
    注意,執行javascript代碼,要在瀏覽器中手工輸入,複製代碼的話,IE及Chrome會自動去掉代碼開頭的javascript:,所以需要手動添加起來才能正確執行,而Firefox中雖然不會自動去掉,但它根本就不支持在地址欄運行JS代碼!!
  • 你不知道的口袋妖怪冷知識集
    這裡就為大家帶來一些關於精靈寶可夢你可能不知道的各種冷知識,黑歷史,都市傳說以及彩蛋,那麼馬上開始吧!禿鷹丫頭與禿鷹娜身上的骨頭可不簡單,將其翻轉過來放到一起可以發現是一個骷髏頭。不不不是60kg,不信你去翻圖鑑~另外也可以挑戰去找上圖裡的小磁怪,一共有五隻哦
  • 你不知道的十個日本冷知識!
    上次帶大家了解了一遍有趣的日本文化,可能其中有些是大家已經知道的了,所以今天小編就跟著大家一起來看看日本的冷知識。富士山是私人的,沒錯,富士山並不是日本國家的,而是私人所有的。富士山3250米之上的部分歸淺間神社所有,就是富士山頂那段最美的地方,是不屬於日本政府的,也不屬於日本皇室。
  • 如何繼承 Date 對象?由一道題徹底弄懂 JS 繼承
    如果你關心性能,你就不應該在一個對象中修改它的 [[Prototype]](否則就算繼承了,也無法調用這些內置類的方法)構造函數與實例對象看到這裡,不知道是否對上午中頻繁提到的構造函數,實例對象有所混淆與困惑呢?這裡稍微描述下。要弄懂這一點,需要先知道 new一個對象到底發生了什麼?
  • 你不知道的GraphQL
    : Boolean}我在這個系列的前一篇文章中簡短的介紹了Schema的語法。你只需要知道,這裡的type類似REST裡的resources概念。你可以用它來定義擁有唯一id鍵的實體(如Tweet和User)。你也可以用它來定義值對象,這種類型嵌套在實體內部,因此不需要唯一鍵(例如Stat)。
  • 【科普】你所不知道的神奇寶貝冷知識②
    halo,訓練師們周二好呀今天阿斯給大家帶來神奇寶貝冷知識第二彈快一起來看一下吧~
  • js Date對象常用操作
    () 從 Date 對象返回一個月中的某一天 (1 ~ 31)。設置 Date 對象中月的某一天 (1 ~ 31)。setMonth() 設置 Date 對象中月份 (0 ~ 11)。setFullYear() 設置 Date 對象中的年份(四位數字)。注意不要使用setYear()方法。setHours() 設置 Date 對象中的小時 (0 ~ 23)。setMinutes() 設置 Date 對象中的分鐘 (0 ~ 59)。
  • 我的世界中國版冷知識科普:90%的人都不知道的mc冷知識
    在我的世界中有許多我們不太常見的冷知識,你知道有哪些嗎?今天小編就來給大家科普一下90%的人都知道的m... 我的世界在許多玩家看來是一款的遊戲,因為可以按照自己的心意來創建自己的王國,這正是吸引玩家的所在。在我的世界中有許多我們不太常見的冷知識,你知道有哪些嗎?今天小編就來給大家科普一下90%的人都知道的mc冷知識到底有哪些。
  • 《英雄聯盟》冷知識,全知道的玩家不超過10%
    英雄聯盟中的冷知識非常的多,各種各樣,從英雄到地圖基本上都有。
  • Js日期權威指南
    您可能熟悉 UNIX 時間戳: 這表示自該著名日期以來過去的秒數。(newValue)date.setTime(newValue)date.setTimezoneOffset(newValue)setDay 和 setMonth 都從數值 0 開始處理,比如三月應該為數值 2```這裡有一個冷知識: 這些方法會 「重疊」, 所以比如說如果你使用了 date.setHours (48), 結果會影響到天。
  • 【英魂冷知識】你就站在我的大招裡,可是你卻不知道...
    大家好,我是雅典娜,英魂的最高智慧女神會解答大家遊戲裡的一切疑問,今天是第94期冷知識
  • Node.js開發人員都應該知道的12個有用的包
    本文列出了在我看來所有 Node.js 開發人員都應該知道的軟體包列表。大家可以把將這些 NPM 包視為節省時間的好用工具和助力工作的魔法小精靈。Husky 可以幫助我們簡單直接地實現 git hooks。你們團隊正在協作開發,並希望在整個團隊中推行一套編碼標準?沒問題!有了 Husky,你就可以要求所有人在提交或推送到存儲庫之前自動完成 lint 並測試其代碼。
  • 付臨門大講堂|你不知道的信用卡冷知識!
    現如今,大家對信用卡的依賴程度小編就不多說了,絕對是除了手機之外很難拋棄的東西了~但我們使用過程中,大家並不是都了解掌握信用卡的規則和政策,信用卡也有一些
  • 《我的世界》你絕對不知道的四大冷知識!
    大家好,這裡是正在琢磨《我的世界》冷知識的方塊菌~
  • 晶片行業你應該知道的幾個冷知識
    討論火熱的背後,有些冷知識你可能不知道,比如,手機廠商每賣出一部智慧型手機,都要向高通繳納一部分的專利費用;在PC端獨領風騷的Intel,為什麼就造不出好的手機晶片呢?以下,就是尋找中國創客(ID:xjbmaker)為你梳理的幾個不得不知的晶片冷知識:每一部你買的智慧型手機都要向高通繳納專利費普通用戶對高通的熟知來源於手機上使用的高通晶片。
  • 【 Node.js】你應該知道的 NPM 知識都在這!
    為什麼寫這篇文章很多 Node.js 開發者,都知道有 package.json 這個文件,也多少都了解一些 npm 知識,但是可能沒有系統的學習過,這部分的知識對於開發一個  cli 工具,發布自己的 npm 包都很常用,開發中也會經常用到npm script內容,系統的學習一下確實會有所幫助,上面三個場景如果你都用不到,配置上節約時間,
  • 原生JS實現日曆
    UI設計日曆組件用三方庫也無法理解滿足需求,這時候了解日曆的基本實現應對這些需求也不會很慌了,大不了就自己實現一個😆TIP本文中日曆採用原生js開發,無需任何三方依賴包(順帶也算好好回顧下快忘記的原生開發,畢竟框架用多了。。)
  • JS冷知識: 你所不知道的 void
    而你可能在某些地方見過 void(0) 這樣的代碼,尤其是在<a>標籤的 href 屬性:< a href="javascript:void(0)">...</a>那麼這樣一個神奇的 void 操作符到用是用來做什麼呢?