Learn JavaScript

sort() - метод для сортировки массива в JavaScript

sort() сортирует элементы массива.

Это очень полезный метод, но у него есть две важные особенности:

  • по умолчанию элементы сравниваются как строки
  • метод меняет исходный массив

Синтаксис

array.sort()
array.sort(compareFn)

compareFn - необязательная функция сравнения.

Что делает sort()

Метод переставляет элементы массива в новом порядке.

const letters = ["c", "a", "b"];

letters.sort();

console.log(letters); // ["a", "b", "c"]

sort() меняет исходный массив

sort() работает прямо с исходным массивом, а не создаёт новый.

const numbers = [3, 1, 2];

numbers.sort();

console.log(numbers); // [1, 2, 3]

Это главный момент, который важно запомнить про метод.

Что возвращает sort()

sort() возвращает сам изменённый массив.

const numbers = [3, 1, 2];
const result = numbers.sort();

console.log(result);  // [1, 2, 3]
console.log(numbers); // [1, 2, 3]

Но это не новый массив, а тот же самый.

По умолчанию сортировка идёт как у строк

Если не передать функцию сравнения, элементы приводятся к строкам и сравниваются как текст.

const numbers = [1, 2, 10, 5];

numbers.sort();

console.log(numbers); // [1, 10, 2, 5]

Для новичков это один из самых неожиданных моментов в sort().

Причина в том, что "10" сравнивается со "2" как строка, а не как число.

Как сортировать числа правильно

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

const numbers = [1, 2, 10, 5];

numbers.sort((a, b) => a - b);

console.log(numbers); // [1, 2, 5, 10]

Это стандартный способ сортировки по возрастанию.

Сортировка по убыванию

Для обратного порядка обычно меняют вычитание местами:

const numbers = [1, 2, 10, 5];

numbers.sort((a, b) => b - a);

console.log(numbers); // [10, 5, 2, 1]

Как работает compareFn

Функция сравнения получает два элемента массива:

array.sort((a, b) => {
  // ...
});

Она должна вернуть:

  • число меньше 0, если a должен идти раньше b
  • число больше 0, если a должен идти позже b
  • 0, если их порядок можно не менять

Пример:

const numbers = [3, 1, 2];

numbers.sort((a, b) => a - b);

console.log(numbers); // [1, 2, 3]

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

Для простых строк sort() без compareFn часто уже работает нормально:

const fruits = ["banana", "apple", "orange"];

fruits.sort();

console.log(fruits); // ["apple", "banana", "orange"]

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

const words = ["ёж", "яблоко", "арбуз"];

words.sort((a, b) => a.localeCompare(b, "ru"));

console.log(words); // ["арбуз", "ёж", "яблоко"]

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

Очень часто sort() используют для объектов.

const users = [
  { name: "Ivan", age: 30 },
  { name: "Anna", age: 25 },
];

users.sort((a, b) => a.age - b.age);

console.log(users);
// [{ name: "Anna", age: 25 }, { name: "Ivan", age: 30 }]

Здесь сортировка идёт по полю age.

Как сохранить исходный массив

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

const numbers = [3, 1, 2];
const sorted = [...numbers].sort((a, b) => a - b);

console.log(numbers); // [3, 1, 2]
console.log(sorted);  // [1, 2, 3]

Ещё для этого можно использовать toSorted().

sort() и toSorted()

Эти методы похожи, но работают по-разному.

const numbers = [3, 1, 2];

const sorted = numbers.toSorted((a, b) => a - b);

console.log(numbers); // [3, 1, 2]
console.log(sorted);  // [1, 2, 3]

sort() меняет исходный массив.

toSorted() возвращает новый.

Пустые слоты

sort() сохраняет пустые слоты, но обычно переносит их в конец массива.

const arr = [3, , 1, 2];

arr.sort();

console.log(arr); // [1, 2, 3, empty]

Это ещё один нюанс, который иногда выглядит неожиданно.

Когда это полезно

sort() удобно использовать, когда:

  • нужно отсортировать массив строк
  • нужно отсортировать числа через compareFn
  • нужно упорядочить массив объектов по какому-то полю
  • изменение исходного массива допустимо

Частые ошибки

Сортировать числа без compareFn

const numbers = [1, 2, 10, 5];

numbers.sort();

console.log(numbers); // [1, 10, 2, 5]

Без функции сравнения числа сортируются не так, как обычно ожидают.

Думать, что sort() создаёт новый массив

const numbers = [3, 1, 2];

numbers.sort();

console.log(numbers); // [1, 2, 3]

Метод меняет исходный массив.

Возвращать из compareFn true или false

const numbers = [3, 1, 2];

numbers.sort((a, b) => a > b);

Так писать не стоит. compareFn должна возвращать отрицательное число, положительное число или 0.

Быстрая памятка

  • sort() сортирует массив и меняет его на месте
  • без compareFn элементы сравниваются как строки
  • для чисел обычно используют (a, b) => a - b
  • sort() возвращает тот же самый массив
  • если нужен новый массив, можно сначала сделать копию или использовать toSorted()

Коротко

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