Сортировка объектов по строковому полю с JavaScript

Быстрый ответ

Для сортировки массива строк в JavaScript используйте метод sort() в комбинации с функцией localeCompare():

let fruits = ['Банан', 'яблоко', 'Апельсин'];
fruits.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
console.log(fruits); // ['яблоко', 'Банан', 'Апельсин']

Функция localeCompare() сортирует с учетом регистра и правильно обрабатывает специальные символы. В свою очередь, опция { sensitivity: 'base' } обеспечивает одинаковое поведение на различных платформах.

Надёжная сортировка строк

Для избежания ошибок удостоверьтесь, что сортируемые данные представляют собой строки:

let items = [{name: 'Банан'}, {name: 'яблоко'}, {name: 'Апельсин'}];
items.sort((a, b) => ('' + a.name).localeCompare('' + b.name));
console.log(items.map(item => item.name)); // ['яблоко', 'Банан', 'Апельсин']

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

Сложные сценарии сортировки

Работа со специальными символами и локализацией

Вы можете управлять сортировкой в соответствии с лингвистическими особенностями разных языков и обрабатывать специальные символы, указывая локаль языка:

let words = ['ä', 'a', 'z'];
words.sort((a, b) => a.localeCompare(b, 'de', { sensitivity: 'base' }));
console.log(words); // ['a', 'ä', 'z'] // Немцы ценят порядок в деталях.

Подробнее об этом расскажет наш спикер на видео

Сортировка по нескольким критериям

Данный пример аналогичен сортировке учеников Хогвартса по факультетам и именам:

let students = [{house: 'Гриффиндор', name: 'Гарри'}, {house: 'Слизерин', name: 'Драко'}, {house: 'Гриффиндор', name: 'Невилл'}];
students.sort((a, b) => {
  let houseComparison = a.house.localeCompare(b.house);
  return houseComparison !== 0 ? houseComparison : a.name.localeCompare(b.name);
});
console.log(students); // Конечно, ни у кого не возникает мысли использовать JavaScript для сортировки учеников Хогвартса.

Предотвращение ошибок сортировки

В проектном коде крайне важно предусматривать и обрабатывать возможные исключения:

try {
  fruits.sort((a, b) => a.localeCompare(b));
} catch (e) {
  console.error('Ошибка сортировки:', e); // О нет! В нашем списке неразбериха!
}

Визуализация

Сортировка строк в JavaScript схожа с расстановкой книг на полке в алфавитном порядке:

Несортированная полка: ["Ветер", "О дивный новый мир", "Скотный двор", "1984"] Сортируем:

Шаг 1: ["Скотный двор", "О дивный новый мир", "Ветер", "1984"] Шаг 2: ["Скотный двор", "О дивный новый мир", "1984", "Ветер"] Шаг 3: ["1984", "Скотный двор", "О дивный новый мир", "Ветер"] Итоговая последовательность:

["1984", "Скотный двор", "О дивный новый мир", "Ветер"] Вуаля! Массив отсортирован. Метод sort() отработал без нареканий! 🍾 🎉 😎

Тонкости и возможные проблемы

Единообразие в различных браузерах

Метод localeCompare() обладает хорошей поддержкой, но между разными браузерами из-за специфики сортировки Unicode могут возникнуть незначительные расхождения. Если важно сохранить консистентность, рассмотрите возможность создания собственной функции сортировки или используйте внешние библиотеки.

Производительность

Для обработки больших массивов данных рекомендуется провести "benchmarking" и искать более быстрые решения, в сравнении с стрелочными функциями в паре с localeCompare().

Особые случаи и символы

При работе с сложными наборами символов Unicode, возможно, вам потребуется создать собственную функцию сортировки. Профессиональный совет: сохраняйте промежуточные значения в переменных для наглядности отладки и передачи кода.

Лучшие практики

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

Полезные материалы

1. String.prototype.localeCompare() – JavaScript | MDN — детально об сравнении строк с учетом локалей.
2. Array.prototype.sort() – JavaScript | MDN — официальная документация метода sort().
3. How to sort strings in JavaScript – Stack Overflow — интересное обсуждение разных подходов к сортировке строк.
4. Метод sort() массива JavaScript — подробный гайд по использованию sort() в JavaScript.
5. Методы массивов — исчерпывающий материал об методах массивов, включая sort().
6. Спецификация языка ECMAScript® 2019 — подробное описание поведения Array.prototype.sort согласно стандарту ECMAScript.
7. php – Список всех локалей и их кодов? – Stack Overflow — полный список локалей для сортировки, учитывающей лингвистические особенности.