【译】Javascript中的日期对象

原文：css-tricks.com/everything-…
做者：Zell Liew
译者：前端小白

日期在JavaScript中很奇怪。当咱们须要处理日期和时间的时候，它会让咱们很是焦虑，以致于咱们须要借助于date -fns和Moment这样的库 可是咱们并不老是须要使用库。若是你知道哪些地方须要注意，日期对象其实很简单。在本文中，我将带您了解关于Date对象的全部内容。 首先，让咱们讨论下时区

时区

世界上有上百个时区，在JavaScript中，咱们只关心两个时区：本地时间和协调世界时(UTC)

• 本地时间是指您的计算机所在的时区。
• UTC实际上就是格林威治标准时间(GMT)。

默认状况下，JavaScript中的几乎每一个日期方法(除了一个)都以本地时间显示日期/时间。只有当指定UTC时才会获得UTC。在这个前提下，咱们来讨论建立日期对象

创造一个日期对象

你可使用new date建立一个日期。有四种方式使用new Date():

• 日期格式的字符串
• 日期类型的参数
• 时间戳
• 空参数

日期字符串形式

在构造方法中，经过将日期格式的字符串传递给new date来建立一个日期。

new Date('1988-03-21')
复制代码

咱们更倾向于这种方式，这更贴近咱们日常生活的书写方式 若是写成21-03-1988，咱们能够推断出正确的日期1988年3月21日，可是在js里面，21-03-1988是无效的日期，你会获得Invalid Date

new Date('21-03-1988') returns Invalid Date.

在世界的不一样地方，对日期字符串的解释是不一样的。例如11-06-2019不是2019年6月11日就是2019年11月6日。可是你不能肯定我指的是哪个，除非你知道我使用的哪一种日期系统。

在JavaScript中，若是想使用日期字符串，须要使用一种全世界都接受的格式。其中一种格式是 ISO 8601 Extended format

// ISO 8601 Extended format
`YYYY-MM-DDTHH:mm:ss:sssZ`
复制代码

这些值表明：

• YYYY:四位数字的年
• MM:两数字的月（一月是01，12月是12）
• DD:两位数字的日期（0-31）
• -:日期分隔符
• T: 指定开始时间
• HH: 24小时制时间表示（0-23）
• mm: 分钟 (0 to 59)
• ss: 秒 (0 to 59)
• sss: 毫秒 (0 to 999)
• :: 时间分隔符
• Z: 若是制定了Z，日期就会被表示为UTC. 若是 Z 没有指定，则为当地时间. (仅只适用于提供时间的状况)

若是要建立日期，小时、分钟、秒和毫秒都是可选的。因此，若是你想为2019年6月11日设定一个日期，你能够这样写:

new Date('2019-06-11')
复制代码

这里要特别注意。使用日期字符串建立日期有一个很大的问题。若是console.log这个日期，就会发现问题。

若是你住在格林威治标准时间以后的地区，你会获得一个日期是6月10日。

new Date('2019-06-11') produces 10th June if you're in a place behind GMT.

若是你住在格林尼治时间以前，你会获得一个日期是6月11

new Date('2019-06-11')produces 11th June if you're in a place after GMT.

这是由于日期字符串这种方式有一个特殊的行为:若是你建立一个日期(不指定时间)，您将获得一个UTC中的日期集。

在上面的场景中，当new Date('2019-06-11')时，实际上建立的日期是2019年6月11日，UTC时间上午12点。这就是为何住在格林尼治标准时间以后的地区的人获得的是6月10日而不是6月11日。

若是但愿使用日期字符串的形式在本地时间建立日期，则须要包含时间。当你包括时间，你至少须要HH和mm(或谷歌Chrome返回一个无效的日期)。

new Date('2019-06-11T00:00')
复制代码

Date created in Local Time vsl. Date created in UTC.

本地时间和UTC类型的日期字符串这二者可能会产生错误，并且难以被发现。因此，我建议你不要使用日期字符串建立日期。（顺便说一下，MDN也警告不要使用日期字符串方法，由于浏览器可能以不一样的方式解析日期字符串）

MDN recommends against creating date with date strings.

若是要建立日期，请使用参数或时间戳。

使用参数建立日期

你能够传递给new Date()七种类型的参数来建立一个日期/时间

1. Year: 四位数的年.
2. Month: 月份 (0-11). 月份从0开始，若是省略，默认是0.
3. Day: 天 (1-31). 若是省略，默认是1.
4. Hour: 小时 (0-23). 若是省略，默认是0.
5. Minutes: 分钟 (0-59). 若是省略，默认是0.
6. Seconds: 秒 (0-59). 若是省略，默认是0.
7. Milliseconds: 毫秒 (0-999). 若是省略，默认是0。

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)
复制代码

许多开发人员(包括我本身)都避免使用arguments方法，由于它看起来很复杂。其实很简单。

试着从左到右阅读数字,依次递减为:年、月、日、小时、分钟、秒和毫秒。

new Date(2017, 3, 22, 5, 23, 50)

// This date can be easily read if you follow the left-right formula.
// Year: 2017,
// Month: April (because month is zero-indexed)
// Date: 22
// Hours: 05
// Minutes: 23
// Seconds: 50
复制代码

Date中最让人费解的地方是月份的值是从0开始的，例如，January === 0, February === 1, March === 2等等。

咱们不知道为何会这样，但确实javascript就是这么设计的。因此与其争论不如接受。 一旦你接受了这个事实，日期变得很是容易使用。

这里还有一些例子可让你熟悉下：

// 21st March 1988, 12am, Local Time.
new Date(1988, 2, 21)

// 25th December 2019, 8am, Local Time.
new Date(2019, 11, 25, 8)

// 6th November 2023, 2:20am, Local Time
new Date(2023, 10, 6, 2, 20)

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)
复制代码

注意，使用参数建立的日期都是本地时间？

这就是是使用参数的一个好处 - 你不会在本地时间和UTC之间混淆。 若是您须要UTC，请以这种方式建立UTC日期：

// 11th June 2019, 12am, UTC.
new Date(Date.UTC(2019, 5, 11))
复制代码

用时间戳建立日期

在JavaScript中，时间戳是自1970年1月1日以来通过的毫秒数（1970年1月1日也称为Unix纪元时间）。 根据个人经验，您不多使用时间戳来建立日期。 您只能使用时间戳来比较不一样的日期（稍后会详细介绍）。

// 11th June 2019, 8am (in my Local Time, Singapore)
new Date(1560211200000)
复制代码

空参数建立日期

若是您建立一个没有任何参数的日期，您将获得一个设置为当前时间的日期(在本地时间中)。

当前时间

你能够从图像中看出，当我写这篇文章时，它是5月25日上午11点10分在新加坡。

建立日期方式总结

1. 你可使用 new Date()建立日期.
2. 有四种可行的语法:
   1. 日期字符串
   2. 参数形式
   3. 时间戳
   4. 空参数
3. 不要使用日期字符串形式.
4. 最好使用参数形式.
5. 谨记月份是从0开始索引的.

接下来，让咱们讨论将日期转换为可读字符串。

格式化日期

大多数编程语言都提供了格式化工具来建立所需的任何日期格式。例如，在PHP中，可使用date(“d M Y”)将日期格式化为2019年1月23日。

但在javascript中没有这种简便的方式

原生Date对象提供了7种格式化方法。这七个方法中的每个都为您提供了一个特定的值(它们很是无用)。

const date = new Date(2019, 0, 23, 17, 23, 42)
复制代码

1. toString --> Wed Jan 23 2019 17:23:42 GMT+0800 (Singapore Standard Time)
2. toDateString --> Wed Jan 23 2019
3. toLocaleString --> 23/01/2019, 17:23:42
4. toLocaleDateString --> 23/01/2019
5. toGMTString --> Wed, 23 Jan 2019 09:23:42 GMT
6. toUTCString --> Wed, 23 Jan 2019 09:23:42 GMT
7. toISOString --> 2019-01-23T09:23:42.079Z

若是您须要自定义格式，则须要本身建立。

自定义日期格式

假设你想要的是Thu, 23 January 2019 这种格式，你须要使用Date对象提供的方法。 要获取日期，可使用如下四种方法：

1. getFullYear: 根据当地时间获取四位数表示的年
2. getMonth: 根据当地时间获月 (0-11).
3. getDate: 根据当地时间获取日期，一个月中的第多少天 (1-31).
4. getDay: 根据当地时间获取一周中的第多少天 (0-6)，一周是指 Sunday (0) 到 Saturday (6).

因此，为了建立Thu, 23 January 2019这种格式，咱们能够这样来作：

const d = new Date(2019, 0, 23)
const year = d.getFullYear() // 2019
const date = d.getDate() // 23
复制代码

可是，Thu,January 就有点难度了 要得到January，您须要建立一个对象，将全部十二个月的值映射到它们各自的名称。

const months = {
  0: 'January',
  1: 'February',
  2: 'March',
  3: 'April',
  4: 'May',
  5: 'June',
  6: 'July',
  7: 'August',
  8: 'September',
  9: 'October',
  10: 'November',
  11: 'December'
}
复制代码

因为Month是零索引的，因此咱们可使用数组而不是对象。它会产生相同的结果。

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]
复制代码

如今你能够这么作：

1. 使用 getMonth 获得月份对应的索引.
2. 根据索引从 months 获取对应的月份

const monthIndex = d.getMonth()
const monthName = months[monthIndex]
console.log(monthName) // January
复制代码

相同方法能够获取到Thu，建立一个包含一周七天的数组。

const days = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]
复制代码

而后：

1. 使用 getDay 获得 dayIndex
2. 根据 dayIndex 获得 dayName

const dayIndex = d.getDay()
const dayName = days[dayIndex] // Thu
复制代码

而后，将建立的全部变量组合起来以得到格式化的字符串。

const formatted = `${dayName}, ${date} ${monthName} ${year}`
console.log(formatted) // Thu, 23 January 2019
复制代码

的确，这样作很麻烦，可是一旦你掌握了，就简单了

若是须要建立自定义格式的时间，可使用如下方法（所有是根据当地时间）：

1. getHours: 小时 (0-23).
2. getMinutes: 分钟 (0-59).
3. getSeconds: 秒 (0-59).
4. getMilliseconds: 毫秒 (0-999).

接下来咱们来讨论日期之间的比较

比较日期

若是您想知道一个日期是在另外一个日期以前仍是以后，您能够直接将它们与>、<、>=和<=进行比较。

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier < later) // true
复制代码

若是你想确认两个日期是否刚好在同一时间，那就比较麻烦。你不能用==或===比较它们。

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false
复制代码

要检查两个日期是否彻底相同，你可使用getTime得到其时间戳，再比较。

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true
复制代码

若是想检查两个日期是否在同一天，能够比较它们的getFullYear、getMonth和getDate值。

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate()=== b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10am
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
console.log(isSameDay(a, b)) // true
复制代码

还有最后一个问题，咱们须要讨论

根据一个日期得到另外一个日期

有两种可能的状况，您但愿从一个日期获取另外一个日期。

1. 相对于另外一个日期开始，设置某个时间/日期值.
2. 相对于另外一个日期开始，增长或者减小某个值.

设置某个时间/日期值

你可使用下列方法，为某个日期设置时间/日期值,方法都是比较语义化的：

1. setFullYear: Set 4-digit year in Local Time.
2. setMonth: Set month of the year in Local Time.
3. setDate: Set day of the month in Local Time.
4. setHours: Set hours in Local Time.
5. setMinutes: Set minutes in Local Time.
6. setSeconds: Set seconds in Local Time.
7. setMilliseconds: Set milliseconds in Local Time.

例如，若是想将日期设置为一个月中的15号，可使用setDate(15)。

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 15 January 2019
复制代码

月份也是同样，记住，月份是从0开始的

const d = new Date(2019, 0, 10)
d.setMonth(5)

console.log(d) // 10 June 2019
复制代码

注意：上面的setter方法会改变原始日期对象。 在实际中，咱们不该该改变原对象（了解更多 ）咱们应该在新的日期对象上执行这些操做。

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 10 January 2019
console.log(newDate) // 10 June 2019
复制代码

从某个日期的基础上增长或者减小值

经过在另外一个日期添加/减去delta，个人意思是：您但愿从另外一个日期得到X的日期。 它能够是X年，X月，X天等。

要得到delta，您须要知道当前日期的值。 您可使用如下方法获取它：

1. getFullYear: Gets 4-digit year according to local time
2. getMonth: Gets month of the year (0-11) according to local time.
3. getDate: Gets day of the month (1-31) according to local time.
4. getHours: Gets hours (0-23) according to local time.
5. getMinutes: Gets minutes (0-59) according to local time.
6. getSeconds: Gets seconds (0-59) according to local time.
7. getMilliseconds: Gets milliseconds (0-999) according to local time.

添加/减去delta有两种通用方法。 第一种方法在Stack Overflow上更受欢迎。 它简洁，但更难掌握。 第二种方法更冗长，但更容易理解。

咱们假设今天是2019年3月28日，你想要一个三天之后的日期

第一种方式

// Assumes today is 28 March 2019
const today = new Date(2019, 2, 28)
复制代码

首先，咱们建立一个新的Date对象(这样咱们就不会更改原始日期)

const finalDate = new Date(today)
复制代码

接下来，咱们须要知道咱们想要改变的值。 因为咱们想改变的天数，因此咱们能够经过getDate得到天。

const currentDate = today.getDate()
复制代码

想得到三天之后的日期，咱们将使用将delta(3)添加到当前日期

finalDate.setDate(currentDate + 3)
复制代码

完整代码：

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate() + 3)

console.log(finalDate) // 31 March 2019
复制代码

第一种方式

咱们使用getFullYear、getMonth、getDate和其余getter方法，直到获得咱们想要更改的类型。而后，使用 new Date 来建立日期。

const today = new Date(2019, 2, 28)

// Getting required values
const year = today.getFullYear()
const month = today.getMonh()
const day = today.getDate()

// Creating a new Date (with the delta)
const finalDate = new Date(year, month, day + 3)

console.log(finalDate) // 31 March 2019
复制代码

日期自动纠错

若是为Date提供一个超出其可接受范围的值，JavaScript将自动从新计算日期。

假如咱们将日期设置为33rd March 2019，这是个无效的日期，JavaScript 会自动将 33rd March 调整到 2nd April.

// 33rd March => 2nd April
new Date(2019, 2, 33)
复制代码

33rd March gets converted to 2nd April automatically.

这意味着在建立一个增量时，您不须要担忧计算分钟、小时、天、月等。JavaScript自动为您处理它。

// 33rd March => 2nd April
new Date(2019, 2, 30 + 3)
复制代码

30 + 3 = 33. 33rd March gets converted to 2nd April automatically.

以上就是你须要了解的关于JavaScript的原生日期对象的知识