Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Оглавление

Сортировка массивов

Сортировка расставляет элементы по порядку: товары по цене, имена по алфавиту, задачи по сроку. В JavaScript этим занимается метод sort(). Ему можно передать правило сравнения, и тогда он отсортирует что угодно.

sort для строк

Без аргументов sort() расставляет строки по алфавиту:

const names = ['Олег', 'Анна', 'Ира'];
 
names.sort();
 
console.log(names.join(', ')); // Анна, Ира, Олег

sort() меняет сам массив и возвращает его же.

Функция сравнения

Чтобы задать свой порядок, в sort() передают функцию сравнения. Она получает два элемента a и b и возвращает число: отрицательное — a должен стоять раньше, положительное — позже, ноль — порядок не важен. Для чисел достаточно вычесть одно из другого:

const prices = [300, 25, 1000, 7];
 
prices.sort((a, b) => a - b);
 
console.log(prices.join(', ')); // 7, 25, 300, 1000

По убыванию

Чтобы получить обратный порядок, достаточно поменять a и b местами:

const prices = [300, 25, 1000, 7];
 
prices.sort((a, b) => b - a);
 
console.log(prices.join(', ')); // 1000, 300, 25, 7

Метод reverse() просто переворачивает массив задом наперёд, ничего не сравнивая.

Строки по правилам языка

Обычное сравнение строк учитывает регистр: заглавные буквы оказываются раньше строчных. Метод localeCompare() сравнивает строки так, как принято в языке, и подходит для функции сравнения:

const words = ['яблоко', 'Груша', 'арбуз'];
 
words.sort((a, b) => a.localeCompare(b));
 
console.log(words.join(', ')); // арбуз, Груша, яблоко

Массив объектов

Объекты сортируют по одному из свойств — в функции сравнения обращаются к нему у a и b:

const products = [
  { title: 'Кофе', price: 12 },
  { title: 'Чай', price: 5 },
  { title: 'Сок', price: 8 },
];
 
products.sort((a, b) => a.price - b.price);
 
console.log(products.map((p) => p.title).join(', ')); // Чай, Сок, Кофе

Частая ошибка

Без функции сравнения sort() сравнивает элементы как строки, даже если это числа. Строка '10' начинается с '1', поэтому оказывается раньше '9':

console.log([10, 9, 1].sort().join(', '));                // 1, 10, 9
console.log([10, 9, 1].sort((a, b) => a - b).join(', ')); // 1, 9, 10

И помните, что sort() меняет исходный массив. Если он ещё нужен в прежнем порядке, используйте toSorted() — он принимает ту же функцию сравнения, но возвращает отсортированную копию:

const prices = [300, 25, 1000];
const sorted = prices.toSorted((a, b) => a - b);
 
console.log(sorted.join(', ')); // 25, 300, 1000
console.log(prices.join(', ')); // 300, 25, 1000

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.