Сортировка массива объектов по нескольким полям: подходы

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

// Сортировка производится сначала по полю "город", затем – "цена"
const sortedArray = yourArray.sort((a, b) => 
  a.city.localeCompare(b.city) || a.price – b.price
);

Код выше эффективно сортирует массив объектов по полю "город", затем по полю "цена". Данный пример демонстрирует использование синтаксиса ES6 и возможность умелого сочетания сравнений строк и чисел.

Пошагово: Создание функции многоуровневой сортировки

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

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

Определите параметры сортировки и порядок, а после передайте их в "чудодействующую" функцию сортировки.

const sortBy = [
  { field: "city", order: "asc" },
  { field: "price", order: "desc" }
];

const dynamicSort = (fields) => {
  return (a, b) => { 
    for (let { field, order } of fields) {
      if (a[field] !== b[field]) {
        return (order === "asc" 
          ? a[field].localeCompare(b[field]) 
          : b[field].localeCompare(a[field]));
      }
    }
    return 0;  // Если поля идентичны, объекты считаются равнозначными
  };
};

const sortedArray = yourArray.sort(dynamicSort(sortBy));

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

Сортировка с применением функционального программирования и иммутабельности

Применяя map, можно гарантировать иммутабельность обработки и осуществить цепочечную сортировку для создания чистого и многоразового решения.

const sortedArray = yourArray.map(object => ({ ...object }))
    .sort((a, b) => a.city.localeCompare(b.city) || a.price – b.price);

Использование библиотек для автоматизации сортировки

Библиотека thenBy.js предлагает удобный и простой способ реализации многоуровневой сортировки, идеально подходящий для сложных задач.

const firstBy = require('thenby');
const sortedArray = yourArray.sort(
  firstBy('city').thenBy('price', 'desc')
);

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

Чтобы представить процесс сортировки массива объектов по нескольким критериям, вообразите игрушечный магазин. Сначала вы размещаете товары по категориям, затем — по цене, облегчая поиск необходимого товара покупателям.

До сортировки: [🧸 $5, 🎠 $3, 🧸 $2, 🎠 $4, 🚂 $3]
После сортировки:
1. 🎠 $3 (Карусель)
2. 🎠 $4 (Карусель)
3. 🚂 $3 (Поезд)
4. 🧸 $2 (Мишка Тедди)
5. 🧸 $5 (Мишка Тедди)

Сортировка дат и булевых значений

При работе с датами и булевыми значениями требуется особая точность для достижения предсказуемого результата сортировки.

// Старые даты и активные элементы идут вначале
const sortedArray = yourArray.sort((a, b) => 
  new Date(b.date) – new Date(a.date) || b.isActive – a.isActive
);

Учет производительности

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

yourArray.forEach(object => object.parsedDate = new Date(object.date));
const sortedArray = yourArray.sort((a, b) => 
  a.parsedDate – b.parsedDate || b.isActive – a.isActive
);

Решение нестандартных задач

Согласованность типов данных

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

Обработка null и undefined

Добавьте проверки на null и undefined, чтобы исключить возможные ошибки в функции сортировки:

// Если город не указан, используется пустая строка, если цена не определена – ноль
const sortedArray = yourArray.sort((a, b) => 
  (a.city || "").localeCompare(b.city || "") || 
  (b.price || 0) – (a.price || 0)
);

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

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

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