Как отсортировать массив по дате в Javascript

Все мы сталкивались с ситуацией, когда у нас есть набор данных, все с разными датами, которые мы хотим быстро отсортировать по дате. Давайте посмотрим, как это работает.

Примечание о датах в Javascript: Следует отметить, что в Javascript нет такого понятия, как date. Вместо этого в Javascript есть только дата-время. Это означает, что каждая дата сопровождается соответствующим временем. Подробнее о датах в Javascript вы можете прочитать здесь.

Как сортировать по дате в Javascript

Первый шаг к сортировке по дате — убедиться, что все ваши даты имеют формат date. Предположим, у нас есть объект следующего вида:

let articles = [
    { name: "HTML Inputs", date: "03/03/2022" },
    { name: "Python Tips", date: "04/04/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

Вход в полноэкранный режим Выйти из полноэкранного режима

Это не совсем подходит для сортировки дат, поскольку наше свойство date имеет текстовый формат. В зависимости от вашей конкретной ситуации, возможно, вам придется действовать несколько иначе. В данном случае я просто разделю каждую дату на прямую косую черту и заменю значение на действительное значение даты.

let articles = [
    { name: "HTML Inputs", date: "12/03/2022" },
    { name: "Python Tips", date: "04/06/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

for(let article of articles) {
    // Split the date by the slash, resulting in an array of [ '03', '03', '2022' ], for example
    let dateArr = article.date.split('/');
    // Year, month, and day from the array. We subtract 1 from month, since months start counting from 0 in Javascript dates.
    let year = parseFloat(dateArr[2]);
    let month = parseFloat(dateArr[1]) - 1;
    let day = parseFloat(dateArr[0])
    // Pass in the different components as year, month, day to get the valid date
    let articleDate = new Date(year, month, day);
    // Update the object
    article.date = articleDate;
}   

console.log(articles);
// This will output the object, now with valid dates!

Вход в полноэкранный режим Выход из полноэкранного режима

Иногда вам не придется этого делать. Иногда у вас будут правильные даты. Вы можете проверить, потому что в нашем вышеприведенном console.log для articles после преобразования дат, они отображаются в формате Thu Mar 03 2022 00:00:00 GMT+0000 (Greenwich Mean Time)}, например.

В любом случае, теперь, когда у вас есть даты в стандартном формате, давайте их отсортируем. Для этого мы будем использовать sort:

let articles = [
    { name: "HTML Inputs", date: "03/03/2022" },
    { name: "Python Tips", date: "04/04/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

for(let article of articles) {
    // Split the date by the slash, resulting in an array of [ '03', '03', '2022' ], for example
    let dateArr = article.date.split('/');
    // Year, month, and day from the array. We subtract 1 from month, since months start counting from 0 in Javascript dates.
    let year = parseFloat(dateArr[2]);
    let month = parseFloat(dateArr[1]) - 1;
    let day = parseFloat(dateArr[0])
    // Pass in the different components as year, month, day to get the valid date
    let articleDate = new Date(year, month, day);
    // Update the object
    article.date = articleDate;
}   

console.log(articles);
// This will output
VM93:20 (3) [{…}, {…}, {…}]0: {name: 'HTML Inputs', date: Thu Mar 03 2022 00:00:00 GMT+0000 (Greenwich Mean Time)}1: {name: 'Python Tips', date: Mon Apr 04 2022 00:00:00 GMT+0100 (British Summer Time)}2: {name: 'Javascript Objects', date: Thu May 05 2022 00:00:00 GMT+0100 (British Summer Time)}length: 3[[Prototype]]: Array(0)
undefined
let articles = [
    { name: "HTML Inputs", date: "12/03/2022" },
    { name: "Python Tips", date: "04/06/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

for(let article of articles) {
    // Split the date by the slash, resulting in an array of [ '03', '03', '2022' ], for example
    let dateArr = article.date.split('/');
    // Year, month, and day from the array. We subtract 1 from month, since months start counting from 0 in Javascript dates.
    let year = parseFloat(dateArr[2]);
    let month = parseFloat(dateArr[1]) - 1;
    let day = parseFloat(dateArr[0])
    // Pass in the different components as year, month, day to get the valid date
    let articleDate = new Date(year, month, day);
    // Update the object
    article.date = articleDate;
}   

articles.sort((a, b) => a.date - b.date);
console.log(articles);

Войти в полноэкранный режим Выйти из полноэкранного режима

Важно отметить, что sort изменяет исходный массив. Поэтому нам не нужно создавать новую переменную для его хранения. Таким образом, articles станет постоянно отсортированным по дате, от самой ранней до самой поздней.

Если вы хотите сделать это наоборот, напишите articles.sort((a, b) => b.date - a.date).

Почему в Javascript мы можем сортировать даты как числа?

Может показаться непонятным, почему это работает. Конечно, date — это дата, так почему же мы можем вычитать их друг из друга? Проще говоря, как я уже упоминал, в Javascript нет типов date — только date-time.

Это означает, что каждая дата — это дата плюс время. Javascript представляет это под капотом как метку времени unix, которая является числом, представляющим количество секунд (или миллисекунд, в случае Javascript), прошедших с 1 января 1970 года. Таким образом, мы можем вычитать даты друг из друга в Javascript, поскольку они фактически представлены в виде чисел.