46. Сортировка и её подводные камни

JavaScript: Мозги. Урок “Сортировка и её подводные камни”

Сортировка - это фундаментальный алгоритм в программировании, позволяющий упорядочить элементы массива по определенному критерию. В JavaScript, как и в любом другом языке, есть встроенные инструменты для сортировки, но важно понимать, как они работают и какие “подводные камни” могут встретиться.

Основы сортировки в JavaScript

Самый простой способ отсортировать массив в JavaScript - использовать метод sort(). По умолчанию, он преобразует все элементы массива в строки и сортирует их в алфавитном порядке.

const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "grape", "orange"]

Но что, если нам нужно отсортировать массив чисел? Тут нас ждет первая “подводная лодка”.

const numbers = [10, 5, 40, 25, 1];
numbers.sort();
console.log(numbers); // [1, 10, 25, 40, 5]  - Ой!

Результат неожиданный, потому что JavaScript сравнивает числа как строки. Чтобы правильно отсортировать числа, нужно передать функцию сравнения в метод sort().

const numbers = [10, 5, 40, 25, 1];
numbers.sort((a, b) => a - b); // Функция сравнения для числовой сортировки
console.log(numbers); // [1, 5, 10, 25, 40] - Теперь все правильно!

a - b определяет порядок сортировки:

• Если a - b возвращает отрицательное число, a ставится перед b.
• Если a - b возвращает положительное число, b ставится перед a.
• Если a - b возвращает 0, порядок a и b не меняется.

Для обратной сортировки можно использовать b - a.

Сортировка объектов

Сортировка объектов требует указания, по какому свойству сортировать.

const products = [
  { name: "Laptop", price: 1200 },
  { name: "Keyboard", price: 75 },
  { name: "Mouse", price: 25 },
];

products.sort((a, b) => a.price - b.price); // Сортировка по цене
console.log(products);

Жизненный пример

Сортировка используется повсеместно. Например:

• Интернет-магазины: Сортировка товаров по цене, популярности, рейтингу.
• Социальные сети: Сортировка постов по времени, лайкам, релевантности.
• Фреймворки: React, Angular, Vue.js используют сортировку для отображения списков, таблиц и других компонентов. Например, сортировка столбцов в таблице данных.

Рассмотрим пример React компонента, который сортирует список пользователей по имени:

// Пример React компонента
function UserList({ users, sortBy }) {
  const sortedUsers = [...users].sort((a, b) => {
    if (sortBy === 'name') {
      return a.name.localeCompare(b.name);
    }
    return 0; // Не сортировать, если sortBy не 'name'
  });

  return (
    <ul>
      {sortedUsers.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

В этом примере используется localeCompare для корректной сортировки строк, учитывая локаль.

Ключевые моменты

• sort() изменяет исходный массив. Если нужно сохранить исходный массив, создайте его копию ([...array].sort()).
• Для числовой сортировки обязательно передавайте функцию сравнения.
• Для сортировки строк используйте localeCompare для корректной сортировки с учетом локали.
• Сортировка объектов требует указания свойства для сортировки.
• Понимание алгоритмов сортировки (например, быстрая сортировка, сортировка слиянием) может помочь оптимизировать производительность для больших объемов данных, хотя встроенный sort() обычно достаточно хорош.

Интерактивный пример