Как работает метод sort в js?

Метод массива sort(), как можно догадаться из названия - занимается сортировкой содержимого на вызванном массиве.

Данный метод имеет особенности:

• Мутирует исходный массив. Т.е. данный метод не возвращает новый, а именно меняет тот массив, на котором происходит вызов.
• Может принимать в качестве аргумента функцию-компаратор, или сортирует в лексическом порядке по возрастанию, если функция не задана.

Рассмотрим синтаксис подробнее:

// Выполнить сортировку по умолчанию
someArray.sort()

// Выполнить сортировку с использованием стрелочной функции для сравнения
someArray.sort((a, b) => { ... } )

// Выполнить сортировку с помощью функции сравнения
someArray.sort(compareFn)

Рассмотрим пример:

const numbers = [34, 26, 356, 12, 9, 5, 10];
numbers.sort();
console.log(numbers);
// -> [10, 12, 26, 34, 356, 5, 9]

Вывод может озадачить, но мы помним, что метод sort() по умолчанию сортирует в лексическом порядке по возрастанию. Т.е. перед сравнением значения будут переведены в строку. Чтобы добиться желаемого результата, нужно написать функцию-аргумент, в которой и указать способ сравнения. Функция-компаратор в свою очередь, если она предоставлена, определяет сортировку всех элементов в массиве за исключением undefined. Все неопределенные элементы просто будут поставлены в конец массива, и неопределенные элементы не передаются в функцию сравнения.

const numbers = [34, 26, 356, 12, 9, 5, 10];
numbers.sort((a, b) => a - b);
console.log(numbers);
// -> [5, 9, 10, 12, 26, 34, 356]

Как в данном случае работает функция-компаратор?

• Если a - b меньше 0, сортировка поставит a по меньшему индексу, чем b, то есть, a идёт первым.
• Если a - b вернёт 0, сортировка оставит a и b неизменными по отношению друг к другу, но отсортирует их по отношению ко всем другим элементам.
• Если a - b больше 0, сортировка поставит b по меньшему индексу, чем a.

sort() сортирует массив на месте и возвращает этот же массив. Без аргументов элементы сравниваются как строки, поэтому числа сортируются неправильно:

console.log([10, 1, 5, 100].sort()); // => [ 1, 10, 100, 5 ]

Для чисел передайте функцию сравнения:

const numbers = [10, 1, 5, 100];
numbers.sort((a, b) => a - b);
console.log(numbers); // => [ 1, 5, 10, 100 ]

numbers.sort((a, b) => b - a);
console.log(numbers); // => [ 100, 10, 5, 1 ]

Как работает функция сравнения

sort() передаёт в функцию пары элементов a и b и смотрит на результат:

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

const users = [
  { name: 'Оля', age: 30 },
  { name: 'Иван', age: 22 },
  { name: 'Анна', age: 25 },
];

users.sort((a, b) => a.age - b.age);
console.log(users.map((u) => u.name)); // => [ 'Иван', 'Анна', 'Оля' ]

users.sort((a, b) => a.name.localeCompare(b.name));
console.log(users.map((u) => u.name)); // => [ 'Анна', 'Иван', 'Оля' ]

localeCompare() правильно сравнивает русские буквы, включая «ё».

Без изменения исходного массива

sort() меняет массив. Чтобы получить отсортированную копию, используйте toSorted():

const original = [3, 1, 2];
const sorted = original.toSorted((a, b) => a - b);
console.log(sorted);   // => [ 1, 2, 3 ]
console.log(original); // => [ 3, 1, 2 ]

Сортировка в JavaScript стабильная: элементы с одинаковым ключом сохраняют исходный порядок.

Методы массивов разбирают в бесплатном курсе «Основы JavaScript».