Сортировка массива объектов по свойству в JavaScript: array.sort()

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

Для выполнения алфавитной сортировки массива объектов по определённому свойству прибегните к методу .sort(), реализующем функцию localeCompare:

let items = [{ name: "Edward" }, { name: "Sharpe" }, { name: "Zeros" }];

items.sort((a, b) => a.name.localeCompare(b.name));

В этом примере производится сортировка объектов по свойству name.

Разбираемся в sort() и localeCompare

Метод sort() идеально подойдёт для работы с массивами, содержащими как простые значения так и объекты. Чтобы отсортировать объекты, вам нужно указать соответствующее свойство, например a.DepartmentName.

Рекомендуется применить методы toUpperCase() или toLowerCase(), чтобы обеспечить сортировку без учета регистра. Так дела, слова apple и Apple будут располагаться рядом.

items.sort((a, b) => a.name.toUpperCase().localeCompare(b.name.toUpperCase()));

Запомните, что итоговые результаты функции сортировки: -1, 0 или +1, определяют местоположения элементов в массиве.

Рассмотрим более сложные варианты сортировки

Многоуровневая сортировка

Если необходимо сначала провести сортировку по одному критерию, а затем по другому для одинаковых значений, используйте следующий подход:

items.sort((a, b) => {
  let comparison = a.department.localeCompare(b.department);
  if (comparison !== 0) return comparison;
  return a.name.localeCompare(b.name);
});

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

Сортировка по свойствам нестрокового типа

Для сортировки свойств числового типа или данных можно незначительно модифицировать подход:

items.sort((a, b) => a.id – b.id);  // Для чисел

Интернационализация

При работе с международным контентом важно учесть особенности языка. localeCompare с параметрами Intl.Collator поможет учесть эти тонкости при сортировке.

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

Представим, что у нас есть библиотека, в которой есть книги:

Перед сортировкой: [📚 "JavaScript", 📚 "HTML", 📚 "CSS"]

Теперь отсортируем их по названию:

books.sort((a, b) => a.title.localeCompare(b.title));

Как итог, мы получим следующий алфавитный порядок:

После сортировки: [📚 "CSS", 📚 "HTML", 📚 "JavaScript"]

Экспериментируем с пользовательскими компараторами

Стрелочные функции

Вы можете упростить компараторы, используемые при сортировке, с помощью стрелочных функций ES6:

items.sort((a, b) => a.rank.localeCompare(b.rank));

Стрелочные функции упрощают код и делают его более удобочитаемым.

Учёт неопределённых и null значений

Разберемся с неопределёнными значениями и null в свойствах:

items.sort((a, b) => 
  (a.name || '').localeCompare(b.name || ''));

Совместимость с new

Если мы создаем объекты через new, нам следует сосредоточиться на собственных свойствах:

function Employee(name) {
  this.name = name;
}

let employees = [new Employee("Alice"), new Employee("Bob")];

employees.sort((a, b) => a.name.localeCompare(b.name));

Проверка и улучшение кода

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

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

1. Array.prototype.sort() – JavaScript | MDN — руководство по использованию метода sort().
2. Arrow function expressions – JavaScript | MDN — применение стрелочных функций в JavaScript.
3. JavaScript String localeCompare() Method — метод localeCompare() для сравнения строк в JavaScript.
4. How to perform case-insensitive sorting array of string in JavaScript? – Stack Overflow — дискуссия о сортировке без учета регистра.
5. String.prototype.localeCompare() – JavaScript | MDN — метод localeCompare().
6. Intl.Collator – JavaScript | MDN — Intl.Collator для интернационализации при сортировке.
7. GitHub – trekhleb/javascript-algorithms: 📝 Алгоритмы и структуры данных, реализованные на JavaScript с объяснениями и ссылками для дополнительного чтения — коллекция алгоритмов и структур данных на JavaScript.