Как отсортировать массив объектов по строковому свойству в JavaScript?
Решение: используем метод sort() с функцией сравнения
В JavaScript метод sort() может сортировать не только числа, но и объекты, если передать ему функцию сравнения (компаратор). Эта функция должна вернуть отрицательное число, если первый элемент должен идти раньше второго, положительное — если позже, и ноль, если они равны.
Для строкового свойства name мы используем метод localeCompare(), который как раз возвращает нужные значения: -1, 0 или 1. Это корректно работает с русскими буквами и учитывает регистр.
Базовая сортировка по возрастанию (А → Я)
const users = [
{ name: 'Иван', age: 25 },
{ name: 'Анна', age: 30 },
{ name: 'Петр', age: 22 },
{ name: 'Елена', age: 28 }
];
// Сортировка по имени (А → Я)
users.sort((a, b) => a.name.localeCompare(b.name));
console.log(users);
// Результат:
// [
// { name: 'Анна', age: 30 },
// { name: 'Елена', age: 28 },
// { name: 'Иван', age: 25 },
// { name: 'Петр', age: 22 }
// ]
Сортировка по убыванию (Я → А)
Чтобы получить обратный порядок, просто поменяйте местами a и b в вызове localeCompare:
// Сортировка по имени (Я → А)
users.sort((a, b) => b.name.localeCompare(a.name));
console.log(users);
// Результат:
// [
// { name: 'Петр', age: 22 },
// { name: 'Иван', age: 25 },
// { name: 'Елена', age: 28 },
// { name: 'Анна', age: 30 }
// ]
Универсальная функция для сортировки
Вы можете создать переиспользуемую функцию, которая принимает массив, имя свойства и направление сортировки:
function sortByProperty(arr, prop, order = 'asc') {
return arr.sort((a, b) => {
if (order === 'asc') {
return a[prop].localeCompare(b[prop]);
} else {
return b[prop].localeCompare(a[prop]);
}
});
}
// Пример использования
sortByProperty(users, 'name', 'asc'); // А → Я
sortByProperty(users, 'name', 'desc'); // Я → А
Важные моменты
- Мутация массива: Метод
sort()изменяет исходный массив. Если нужно сохранить оригинал, сделайте копию:const sorted = [...users].sort(...) - Регистр букв:
localeCompare()по умолчанию учитывает регистр (заглавные буквы идут раньше строчных). Чтобы игнорировать регистр, передайте опцию{ sensitivity: 'base' }:a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }) - Сортировка по числам: Для числовых полей (например, age) используйте
a.age - b.age(по возрастанию) илиb.age - a.age(по убыванию). - Сложные строки: Если в именах есть цифры или спецсимволы,
localeCompareвсё равно работает корректно, так как учитывает правила языка.
Теперь вы можете легко сортировать массивы объектов по любому строковому свойству! Если у вас есть вопросы или нужны дополнительные примеры — пишите в комментариях.
<<Альтернативный подход: сортировка без localeCompare
Если вы не хотите использовать localeCompare() или работаете с простыми строками (только латиница, без учёта локали), можно применить стандартное сравнение строк с помощью операторов < и >.
// Сортировка по имени (А → Я) без localeCompare
users.sort((a, b) => {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
});
// Сортировка по имени (Я → А)
users.sort((a, b) => {
if (a.name > b.name) return -1;
if (a.name < b.name) return 1;
return 0;
});
Этот способ проще для понимания, но у него есть недостатки:
- Не учитывает правила локали (например, русские буквы 'ё' и 'е' могут сортироваться некорректно).
- Регистрозависим: заглавные буквы всегда меньше строчных (например, 'Apple' будет раньше 'apple').
- Не подходит для строк с акцентами (é, ñ и т.д.).
Поэтому для большинства реальных проектов рекомендуется использовать localeCompare(), особенно если приложение работает с разными языками. Но для простых задач или учебных примеров можно обойтись и этим вариантом.
Ещё один вариант — комбинированный подход: сортировать сначала по одному полю, а затем по другому (например, по имени, а если имена совпадают — по возрасту). Для этого просто добавьте второе условие в функцию сравнения.
Ответов пока нет.
Войдите чтобы оставить ответ