js中的 new Date() 你可能不知道的背后冷知识

海阔凭鱼跃，天高任鸟飞。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全球通用时间标准。过程不断的改进，我想这就是伟大人类的智慧吧。

感谢

点赞👍再看，已成习惯！该系列持续更新，你们的一键三连就是我持续写作的最大动力，如果对本篇博客有任何意见和建议，欢迎小伙伴们留言！欢迎来扰！😜😝

本文首发于公众号「前端秦爱德」，欢迎关注。

感兴趣的小伙伴还可以加入我的「秦爱德前端交流群」，我在成都上班儿，群里有大批成都本土优秀大佬以及美女HR，如果你碰巧也是成都的，那就赶快进来吧。

我是秦爱德，一个在互联网夹缝求生的程序员！