Сортировка по дате в JavaScript: массивы объектов и нюансы

[hannadev]

Сортировка по дате в JavaScript - это базовая задача для работы с данными. Часто нужно упорядочить массив объектов, где дата хранится в свойстве. Это помогает в задачах вроде отображения постов или событий по хронологии.

Метод sort() делает всю работу, но требует правильной функции сравнения. Без нее даты как строки сортируются лексикографически, а не хронологически. Простые примеры покажут, как это исправить, и разберем типичные проблемы.

Базовая сортировка массива объектов по дате

Метод Array.sort() изменяет исходный массив и принимает функцию сравнения. Для дат функция возвращает разницу timestamp’ов: отрицательное число - a перед b, положительное - наоборот. Это работает с объектами Date или строками, которые преобразуются в Date.

Возьмем массив задач с датами создания. Без сортировки они в случайном порядке. После sort() они выстроятся от ранних к поздним. Важно: всегда преобразуйте строку в new Date(), иначе ‘2023-01-02’ уйдет после ‘2023-01-10’ из-за строкового сравнения.

Вот ключевые шаги для базовой сортировки:

• Извлеките дату из свойства объекта.
• Создайте объекты Date.
• Верните разницу в миллисекундах.

let tasks = [
  { title: 'Задача 1', date: '2023-05-10' },
  { title: 'Задача 2', date: '2023-01-15' },
  { title: 'Задача 3', date: '2023-03-20' }
];

tasks.sort((a, b) => new Date(a.date) - new Date(b.date));

Параметр	Описание	Пример
a.date	Строка или Date	‘2023-01-15’
new Date()	Преобразование	Date объект
Разница	Число для sort	-ve, 0, +ve

Сортировка по убыванию и обработка null

По умолчанию sort() идет по возрастанию. Для убывания меняем знак: b.date - a.date. Проблема возникает с null или undefined датами - new Date(null) дает 1970 год. Это сдвигает элементы не туда.

Рассмотрим массив постов: некоторые без даты обновления. Используем fallback на дату создания. Если дата обновления null, берем created. Это логично для блога: свежие обновления сверху.

Плюсы такого подхода: гибкость, нет ошибок. Минус - чуть больше кода. Тестируйте на реальных данных с разными форматами.

• Проверьте на null: a.updated || a.created.
• Убывание: new Date(b.updated || b.created) - new Date(a.updated || a.created).
• Кэшируйте Date для производительности в больших массивах.

const posts = [
  { title: 'Пост 1', updated: '2023-06-01', created: '2023-01-01' },
  { title: 'Пост 2', updated: null, created: '2023-02-15' }
];
posts.sort((a, b) => {
  const dateA = new Date(a.updated || a.created);
  const dateB = new Date(b.updated || b.created);
  return dateB - dateA;
});

Сложные случаи: время, зоны и производительность

Даты часто включают время, как ‘2023-01-14T22:09:12’. Стандартный new Date() учитывает локальную зону, но для UTC или конкретной зоны нужны Intl.DateTimeFormat или библиотеки. Без этого сортировка сбивается на границах дней.

Пример с задачами по времени регистрации. Если игнорировать зону, ‘2023-01-01 23:00 UTC’ окажется раньше ‘2023-01-02 01:00 Moscow’. Решение: парсинг с указанием зоны или timestamp. Для тяжелых списков кэшируйте timestamp в Map.

Нюанс: В Web Workers сортировка асинхронна, чтобы не блокировать UI. Это полезно для таблиц с тысячами строк.

Список продвинутых техник:

• Сортировка по времени без даты: извлеките часы/минуты.
• Мульти-сорт: сначала дата, потом имя: sort((a,b) => dateCmp || nameCmp(a,b)).
• Библиотеки: Lodash _.sortBy для сложных случаев.

Сценарий	Код	Особенность
Только время	new Date('1970-01-01T' + timeStr)	Игнор даты
Мульти-сорт	dateA - dateB || a.name.localeCompare(b.name)	Вторичный ключ
Кэш	Map для timestamp	Быстрее на 1000+ элементов

Когда стандартного sort() мало: альтернативы

Для UI-библиотек вроде Webix или DataTables встроенная сортировка по ‘date’ парсит строки автоматически. Но в чистом JS на больших данных sort() может тормозить - O(n log n). Используйте indexedDB или предварительную сортировку на сервере.

В форумных примерах часто встречается moment.js для парсинга нестандартных форматов вроде ‘14.01.2021T22:09’. Но native Date предпочтительнее - без зависимостей. Тестируйте на edge-кейсах: недействительные даты возвращают NaN.

// Безопасная версия
function safeDateSort(arr, key) {
  return arr.sort((a, b) => {
    const dA = new Date(a[key]);
    const dB = new Date(b[key]);
    return isNaN(dA) ? 1 : isNaN(dB) ? -1 : dA - dB;
  });
}

Проверьте форматы: ISO надежны, русские ‘dd.mm.yyyy’ требуют парсера.

Результаты на практике и масштабирование

Сортировка по дате упрощает жизнь в проектах с динамическими списками. Базовый sort() покрывает 90% случаев, а fallback’и и кэш - остальные. Масштабируйте с виртуализацией списков.

Остались вопросы с локализацией или реал-тайм обновлениями? Там уже IndexedDB и Diffing алгоритмы, но это другая история. Тестируйте код на реальных данных для точности.