Сортировка данных — одна из самых частых задач в JavaScript. Практически любой интерфейс работает с массивами объектов: список товаров, пользователи, комментарии, статьи, сообщения или заказы. И почти всегда эти данные нужно отображать в определённом порядке: по цене, имени, рейтингу, дате публикации или статусу.
На первый взгляд задача кажется простой, но именно здесь новички регулярно сталкиваются с неожиданным поведением JavaScript. Числа начинают сортироваться как строки, даты отображаются в неправильном порядке, а текст с разным регистром выглядит хаотично. Особенно заметно это при работе с API, таблицами и динамическими интерфейсами.
Чтобы нормально работать с массивами объектов, важно понимать, как устроен метод sort() и как правильно сравнивать разные типы данных. Метод localeCompare() считается стандартным способом сортировки строк, а даты обычно сравнивают через объект Date.
Как работает sort() в JavaScript
Метод sort() сортирует элементы массива прямо на месте, изменяя исходный массив.
Простейший пример:
const numbers = [5, 2, 9, 1]; numbers.sort(); console.log(numbers);
Результат:
[1, 2, 5, 9]
Но здесь есть важный нюанс. По умолчанию JavaScript сортирует элементы как строки.
Если добавить число 10, результат станет неправильным:
const numbers = [5, 2, 10, 1]; numbers.sort(); console.log(numbers);
Результат:
[1, 10, 2, 5]
Именно поэтому для массивов объектов почти всегда используется собственная функция сравнения.
Сортировка массива объектов по числу
Представим массив товаров:
const products = [
{ name: 'Phone', price: 800 },
{ name: 'Laptop', price: 1500 },
{ name: 'Tablet', price: 600 }
];
Чтобы отсортировать объекты по цене:
products.sort((a, b) => a.price - b.price);
Результат:
[
{ name: 'Tablet', price: 600 },
{ name: 'Phone', price: 800 },
{ name: 'Laptop', price: 1500 }
]
Логика здесь очень простая.
| Выражение | Что происходит |
|---|---|
| < 0 | Элемент a ставится раньше |
| > 0 | Элемент b ставится раньше |
| 0 | Порядок не меняется |
Именно поэтому вычитание считается самым удобным способом сортировки чисел.
После такой сортировки массив становится удобным для каталогов, таблиц и аналитики.
Как сделать сортировку по убыванию
Для обратного порядка достаточно поменять элементы местами:
products.sort((a, b) => b.price - a.price);
Теперь массив будет отсортирован от большего значения к меньшему.
Подобный вариант особенно часто используется в интернет-магазинах и административных панелях.
Сортировка массива объектов по строке
Со строками ситуация сложнее. Простое вычитание здесь уже не работает.
Например:
const users = [
{ name: 'Alex' },
{ name: 'Maria' },
{ name: 'John' }
];
Для строк обычно используют localeCompare().
users.sort((a, b) =>
a.name.localeCompare(b.name)
);
Результат:
[
{ name: 'Alex' },
{ name: 'John' },
{ name: 'Maria' }
]
localeCompare() корректно работает с разными языками, Unicode и локалями.
Почему localeCompare() лучше обычного сравнения
Многие новички сортируют строки так:
users.sort((a, b) =>
a.name > b.name ? 1 : -1
);
Такой подход работает нестабильно:
- появляются проблемы с регистром;
- ломается сортировка кириллицы;
- возникают ошибки с Unicode;
- строки с числами сортируются неправильно.
localeCompare() решает эти проблемы и считается более надёжным вариантом.
Как сортировать строки без учёта регистра
Иногда строки с заглавными буквами отображаются отдельно.
Например:
[
'Alex',
'john',
'Maria'
]
Чтобы избежать подобных проблем, строки обычно приводят к одному регистру:
users.sort((a, b) =>
a.name.toLowerCase()
.localeCompare(
b.name.toLowerCase()
)
);
Так сортировка становится более предсказуемой и визуально аккуратной.
Сортировка массива объектов по дате
С датами новички сталкиваются особенно часто.
Например:
const posts = [
{
title: 'Post 1',
date: '2025-01-10'
},
{
title: 'Post 2',
date: '2024-12-01'
},
{
title: 'Post 3',
date: '2025-02-15'
}
];
Правильный способ — преобразовать строку в объект Date.
posts.sort((a, b) =>
new Date(a.date) -
new Date(b.date)
);
Результат:
[
{ title: 'Post 2', date: '2024-12-01' },
{ title: 'Post 1', date: '2025-01-10' },
{ title: 'Post 3', date: '2025-02-15' }
]
Именно такой подход чаще всего используют в блогах, CRM и административных интерфейсах.
Как показывать новые записи первыми
Для обратного порядка:
posts.sort((a, b) =>
new Date(b.date) -
new Date(a.date)
);
Теперь сначала будут отображаться самые новые записи.
Такой вариант особенно популярен в новостных лентах и системах комментариев.
Как не изменять исходный массив
Важно помнить, что sort() изменяет оригинальный массив.
Например:
const sorted =
products.sort(...);
После этого изменится и products.
Чтобы сохранить исходные данные, создают копию массива:
const sorted = [...products]
.sort((a, b) =>
a.price - b.price
);
Такой подход особенно важен в React и современном frontend-коде.
Как сортировать по нескольким полям
Иногда одного поля недостаточно.
Например:
- сначала по возрасту;
- потом по имени;
- потом по рейтингу.
Тогда сортировка строится поэтапно.
users.sort((a, b) => {
if (a.age !== b.age) {
return a.age - b.age;
}
return a.name.localeCompare(
b.name
);
});
Сначала сортировка идёт по возрасту, а если значения одинаковые — по имени.
Подобный подход особенно часто используют в таблицах и административных интерфейсах.
Какие ошибки чаще всего делают новички
Самая распространённая проблема — забывать, что sort() работает со строками.
Например:
[1, 2, 10].sort()
Результат будет неправильным.
Вторая ошибка — сравнивать даты как обычные строки.
Третья проблема — мутировать исходный массив. Особенно критично это в React, где изменение state напрямую может ломать интерфейс.
Также новички часто забывают:
- Использовать localeCompare() для строк.
- Создавать копию массива перед сортировкой.
- Приводить строки к одному регистру.
- Проверять формат даты.
- Правильно сортировать числа через вычитание.
- Обрабатывать вложенные объекты.
Именно эти мелочи чаще всего становятся причиной багов в интерфейсах.