如何在Javascript中比较日期:方法和注意事项

2021年11月28日05:37:42 发表评论 1,091 次浏览

Javascript如何比较两个日期?处理日期是开发人员经常遇到的事情。从创建到存储和处理日期,Javascript 中的日期操作 在应用程序开发中有许多用例。在今天的教程中,我们考虑关注其中之一:比较日期。

如何在Javascript中比较日期?Javascript 的内置日期对象为我们提供了足够的功能来比较日期,特别是对于查找快速简单的解决方案。不过,在本教程的最后,我们将研究如何在第三方库的帮助下在 Javascript 中比较日期,并且包括一些Javascript中比较日期代码示例


我们可以使用逻辑运算符进行日期比较吗?

Javascript 的日期对象是否支持使用诸如<>===、 等逻辑运算符比较日期?==?这就是我们将在本节中找到的内容。

事实证明,使用小于 (<) 和大于 (>) 运算符比较 Javascript 日期是解决此问题的最直接的方法之一,如下例所示。

const date1 = new Date("2021-01-31")
const date2 = new Date("2021-04-21")
const date3 = new Date("2021-05-09")

console.log(date1 > date2) //false
console.log(date1 < date2) //true
console.log(date2 < date3) //true
console.log(date2 > date3) //false

但是当我们使用相等运算符来检查两个日期是否相同时,两个相等的日期都不返回=====返回正确的结果。

const date1 = new Date("2021-01-31")
const date2 = new Date("2021-04-21")
const date3 = new Date("2021-01-31")

console.log(date1) //2021-01-31T00:00:00.000Z
console.log(date2) //2021-04-21T00:00:00.000Z
console.log(date3) //2021-01-31T00:00:00.000Z

console.log(date1 == date2) //false
console.log(date1 === date2) //false
console.log(date1 == date3) //false
console.log(date1 === date3) //false
console.log(date1 !== date3) //true
console.log(date1 != date3) //true

这种行为是 Javascript 的底层性质造成的。在 Javascript 中,无论你使用的是严格 ( ===) 还是抽象相等 ( ==) 运算符,两个不同的对象都不可能相等。

因此,当你想要涵盖日期比较的所有三个基础时,你必须使用与逻辑运算符不同的方法来获得正确的结果。


使用 getTime 方法比较日期时间

因此,作为在 Javascript 中比较日期与时间的另一种方法,我们可以使用日期对象的内置方法getTime. 该getTime方法返回自纪元时间(1970 年 1 月 1 日 00:00:00 (UTC))到日期对象表示的日期时间经过的毫秒数。这为在两个日期之间进行更简单的数字比较铺平了道路,我们可以使用所有逻辑运算符而不会出现任何奇怪的行为。

Javascript中比较日期代码示例:下面是一个实际的 getTime 方法示例。

const date1 = new Date("2021-01-31")
const date2 = new Date("2021-04-21")
const date3 = new Date("2021-01-31")

console.log(date1.getTime() > date2.getTime()) //false
console.log(date1.getTime() < date2.getTime()) //true
console.log(date1.getTime() === date3.getTime()) //true
console.log(date1.getTime() !== date3.getTime()) //false

使用 getTime 方法而不是直接日期对象比较的好处是它比替代方法运行得更快。


使用 valueOf 比较日期时间

Javascript如何比较两个日期?Javascript 中的另一种日期比较方法是 valueOf。此方法还返回自纪元时间以来经过的毫秒数。下面是我们如何在我们的代码中使用它。

console.log(date1.valueOf() > date2.valueOf()) //false
console.log(date1.valueOf() < date2.valueOf()) //false
console.log(date1.valueOf() === date3.valueOf()) //true
console.log(date1.valueOf() !== date3.valueOf()) //false

Javascript 只比较日期对象

如何在Javascript中比较日期?到目前为止,我们所有的示例在比较日期时都考虑了日期的时间部分。但是我们可以在 Javascript 中只比较日期对象的日期部分吗?答案是肯定的。

但是由于 Javascript 没有提供直接进行这种类型比较的内置方法,我们必须从其他一些函数中获得帮助才能达到我们正在寻找的最终结果。

简而言之,我们必须分别从初始对象中提取月份组件的年、月和日,以比较没有时间的日期。

Javascript中比较日期代码示例 - 在下面的示例中,我们共享一个方法,该方法在 getFullYear、getMonth、getDate 内置 Javascript 方法的帮助下检查两个日期之间的相等性。

function isDateEqual(date1, date2) {
    return date1.getFullYear() === date2.getFullYear() &&
        date1.getMonth() === date2.getMonth() &&
        date1.getDate() === date2.getDate()
}

const date1 = new Date("2021-01-31T09:11:12Z")
const date2 = new Date("2021-04-21T12:10:34Z")
const date3 = new Date("2021-01-31T03:34:23Z")

console.log(isDateEqual(date1, date2))
console.log(isDateEqual(date1, date3))

作为上述解决方案的替代方案,我们可以在使用 getTime 或 valueOf 方法比较日期之前将日期对象的时间部分更改为共享值,这样可以防止其时间值影响结果。

如果你的用例不会受到初始数据更改的影响,你可以轻松地进行比较,如下例所示。否则,你可以选择克隆初始对象并继续执行此实现。

const date1 = new Date("2021-01-31T09:11:12Z")
const date2 = new Date("2021-04-21T12:10:34Z")
const date3 = new Date("2021-01-31T03:34:23Z")

date1.setHours(0, 0, 0, 0)
date2.setHours(0, 0, 0, 0)
date3.setHours(0, 0, 0, 0)

console.log(date1.getTime() > date2.getTime()) //false
console.log(date1.getTime() < date2.getTime()) //true
console.log(date1.getTime() === date3.getTime()) //true
console.log(date1.getTime() !== date3.getTime()) //false

Javascript如何比较两个日期?我们还可以使用 toDateString 方法仅提取对象的日期部分来比较没有时间的日期。以下是你如何实现这一目标。

date1 = new Date(date1.toDateString())
date2 = new Date(date2.toDateString())
date3 = new Date(date3.toDateString())

console.log(date1.getTime() > date2.getTime()) //false
console.log(date1.getTime() < date2.getTime()) //true
console.log(date1.getTime() === date3.getTime()) //true
console.log(date1.getTime() !== date3.getTime()) //false

考虑时区

在 Javascript 中处理日期时我们必须非常小心的一件事是时区差异。即使我们比较日期也是如此。那么,时区对我们迄今为止所做的一切有什么影响?

如何在Javascript中比较日期?在使用 getTime 和 valueOf 方法的比较中,Javascript 测量与其纪元时间相关的时间,以 UTC 为单位。因此,即使我们比较在两个时区创建的两个日期,这些方法也会输出我们期望看到的正确结果。

const date1 = new Date("2021-01-31T09:11:12+05:00")
const date2 = new Date("2021-01-31T05:11:12+01:00")

console.log(date1.getTime() === date2.getTime()) //true

但是,当我们在有选择地选择年、月和日期(如在 isDateEqual 函数中)之后比较没有时间分量的日期时,我们必须意识到时区对过程的影响。在这种情况下,首先,我们必须将它们转换为 UTC,而不直接从对象中提取日期组件。

let date1 = new Date("2021-01-31T09:11:12+05:00")
let date2 = new Date("2021-01-31T05:11:12+01:00")

date1 = new Date(Date.UTC(date1.getUTCFullYear(), date1.getUTCMonth(), date1.getUTCDate()))
date2 = new Date(Date.UTC(date2.getUTCFullYear(), date2.getUTCMonth(), date2.getUTCDate()))

console.log(date1.getTime() === date2.getTime()) //true
console.log(date1.getTime() !== date2.getTime()) //false

使用 date-fns 比较日期

到目前为止,我们只依靠 Javascript 的原生日期对象来比较日期。尽管它提供了足够的方法来执行基本比较,但我们必须使用几行代码来实现更高级的东西,比如比较没有时间的日期。

然而,像 date-fns 这样的第三方日期操作库带有专用的方法,允许我们用一行代码来解决这些问题。所以,我们认为看看如何在 date-fns 库的帮助下在 Javascript 中执行日期比较是一个好主意。

Javascript如何比较两个日期?我们可以使用 date-fns 的 isAfter、isBefore、isEqual 方法来检查两个日期是否相等、大于或小于,如下例所示。

let date1 = new Date("2021-01-31T09:11:12Z")
let date2 = new Date("2021-04-21T12:10:34Z")
let date3 = new Date("2021-01-31T05:11:12Z")

//Is first date after the second one
console.log(datefns.isAfter(date1, date2)) //false
console.log(datefns.isAfter(date2, date1)) //true

//Is first date before the second one
console.log(datefns.isAfter(date1, date3)) //true
console.log(datefns.isAfter(date3, date1)) //false

//Is first date equal to second one
console.log(datefns.isEqual(date1, date3)) //true
console.log(datefns.isEqual(date1, date2)) //false

Javascript中比较日期代码示例 - 对于不考虑时间的比较,我们可以像这样使用 isSameDay 函数:

console.log(datefns.isSameDay(date1, date3)) //true
console.log(datefns.isSameDay(date1, date2)) //false

就是这样!我们可以通过调用单个函数来找到问题的答案。


概括

如何在Javascript中比较日期?在今天的教程中,我们向你介绍了如何在 Javascript 中比较日期。虽然原生 Javascript 对象为我们提供了足够的功能来处理此任务,但如果你必须在你的应用程序中执行不同的比较操作,使用第三方库可以简化你的实现并清理代码。

无论你喜欢哪种日期比较方式,我们都希望你喜欢我们的帖子并在今天学到一些新的东西,你会发现这些东西对你的下一个项目有用。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: