如何在JavaScript中按日期对数组进行排序

2,975 阅读6分钟

简介

在这个简短的指南中,我们将介绍在JavaScript中对数组进行日期排序的所有必要方面。

JavaScript中的数组数据结构有一个内置的sort() 方法,但它不是用来按日期排序的。有很多不同的日期格式,无论用什么格式来表示日期,我们都需要使排序工作。

首先,让我们来了解一些基本的概念和约束条件,我们需要了解这些概念和约束条件,以便能够改变sort() 方法,使其能够按日期对数组中的元素进行排序,然后我们将展示一些实际的例子,解释按日期排序是如何工作的。

**注意:**在本指南中,我们将对一个日期数组进行排序,但同样的规则也适用于对包含日期属性的对象数组进行排序的情况。

JavaScript的*sort()*方法

如前所述,JavaScript中的Array 数据结构有一个内置的sort() 方法,用于对数组的元素进行排序。sort() 方法的工作原理是将元素转换为字符串,并将这些字符串表示的元素按升序进行排序。

另一个需要记住的重要事实是,sort() 方法对元素进行就地排序,这意味着它改变了原始数组。

const exampleArray = ['bbb', 'aa', 'ddd', 'c'];
exampleArray.sort();
console.log(exampleArray);
// Outputs: ['aa', 'bbb', 'c', 'ddd']

很明显,sort() 方法是为处理字符串而设计的,但它不是为处理日期而设计的。例如,让我们假设我们想对下面的日期数组进行排序。

const dates = ['Mar 16 2017', 'Jan 22 2021', 'Dec 31 2000'];
dates.sort();
console.log(dates);

所需的输出将是一个按日期升序排序的数组。

['Dec 31 2000', 'Mar 16 2017', 'Jan 22 2021']

实际的输出结果将是。

['Dec 31 2000', 'Jan 22 2021', 'Mar 16 2017']

这是因为sort() 方法的工作原理是对元素的字符串表示进行排序,而不是对实际元素进行排序。

例如,'Dec 31 2000' 中的D'Jan 22 2021' 中的J 小,以此类推。这种不受欢迎的行为无论在何种日期格式下都是一样的,因此,我们需要找到一种方法来改变sort() 方法,使其适合于日期的排序

JavaScript中关于日期的入门知识

为了知道如何在JavaScript中按日期对数组进行排序,首先,我们需要了解JavaScript如何表示日期。

简而言之,在JavaScript中用来表示日期的结构是一个**Date** 对象,它通过存储一个Number ,表示自1970年1月1日起的毫秒数。

有四种创建Date 对象的方法,但从本质上讲,所有这些方法都将日期存储为Number ,如前所述。

// Blank constructor - the current date and time
const now = new Date();

// Date string as the argument
const exampleDate1 = new Date(dateString);

// Number of milliseconds since 1 Jan 1970 as the argument
const exampleDate2 = new Date(milliseconds);

// Year, month, ... as the argument
const exampleDate3 = new Date(year, month, day, hour, minute, second, millisecond);

由于按日期对数组排序的问题的性质,我们将使用第二种方式,在Date 构造函数中传递日期的字符串表示。一般来说,有3种格式的字符串被用来表示日期。

名称格式例子与浏览器无关
ISO日期YYYY-MM-DD"2017-09-24"**是**(由ISO标准严格定义)
简短日期MM/DD/YYYY"09/24/2017"**不** (在不同的浏览器上可能有所不同)
长日期DD月YYY"2017年9月24日"**没有** (在不同的浏览器上可能有所不同)

因此,如果我们想为2017年9月24日创建一个Date 对象,我们将通过以下方式之一来实现。

const date = new Date("2017-09-24");
// Or
const date = new Date("09/24/2017");
// Or
const date = new Date("24 September 2017");

所有这些都将代表完全相同的日期(自1970年1月1日起的相同毫秒数)。

如何在JavaScript中按日期对数组排序(字符串表示法)

现在我们知道了Date 对象和sort() 方法是如何工作的,我们可以解释一下如何使用sort() 方法来对一个数组进行日期排序。

首先,让我们假设我们需要对一个日期数组进行排序。

//            ['16 March 2017', '22 January 2021', '31 December 2000']
const dates = ['16 March 2017', '01/22/2021', '2000-12-31'];

我们可以看到,dates 数组的元素是一些日期的字符串表示。dates 正如我们之前所讨论的,简单地在sort() 方法不会产生所需的输出,所以我们需要改变它,使其适合于对日期进行排序。我们将通过创建一个适当的自定义的 比较函数并将其传递给sort() 方法。

比较函数,简单地说,是一个接受两个参数(数字)并返回正、负或零值的函数。它被用来定义sort() 方法中的排序顺序。

例如,下面的比较函数将用于按升序对元素进行排序。

function(a, b){
    return a - b;
}

以下规则适用于基于比较函数返回值的排序顺序。

返回值排序顺序
正的b在a之前
为零相同的
负数a在b之前

能够对日期进行排序的比较函数必须首先将日期的字符串表示转换为Date 对象,然后以期望的方式比较两个日期。值得庆幸的是,Date 构造函数接受各种各样的格式,并能将它们翻译成易于比较的格式。

function(a, b){
    // Convert string dates into `Date` objects
    const date1 = new Date(a);
    const date2 = new Date(b);
    
    return date1 - date2;
}

对于降序排序,我们需要做的唯一改变是在返回语句中交换date1date2 的位置。

return date2 - date1;

当我们创建了适当的比较函数后,唯一要做的就是把它传递给sort() 方法,以便它能够对日期进行排序。

dates.sort(function(a, b){
    const date1 = new Date(a)
    const date2 = new Date(b)
    
    return date1 - date2;
})

或者,你可以将该函数定义为一个非匿名函数,并以这种方式传递给它。

function dateComparison(a, b) {
    const date1 = new Date(a)
    const date2 = new Date(b)
    
    return date1 - date2;
}

dates.sort(dateComparison);
console.log(dates);

现在,dates 数组是按升序排序的。

['2000-12-31', '16 March 2017', '01/22/2021']

如何在JavaScript中按日期对数组排序(日期对象)

这个问题的简单版本是dates 数组已经是一个Date 对象的数组的情况。在这种情况下,最简单的比较函数就可以完成这个工作。

const date1 = new Date('16 March 2017');
const date2 = new Date('01/22/2021');
const date3 = new Date('2000-12-31');
const dates = [date1, date2, date3];

dates.sort(function(a, b){
    return a - b 
});

console.log(dates);

输出结果将是。

['2000-12-31', '16 March 2017', '01/22/2021']

结论

在本指南中,我们已经讨论了关于按日期对数组进行排序的重要事实。完成它,你应该有关于数组排序的知识,Date 对象,你能够结合你所学到的知识,将一个日期数组按所需的顺序排序。