Learn JavaScript

toSorted() - метод для сортировки массива без изменения исходного массива в JavaScript

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

Это современная альтернатива sort(), когда нужно получить отсортированный результат, но не менять исходные данные.

Синтаксис

array.toSorted()
array.toSorted(compareFn)

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

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

Метод создаёт отсортированную копию массива.

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

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

Это главное, что важно запомнить: toSorted() не меняет исходный массив.

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

toSorted() всегда возвращает новый массив.

const letters = ["c", "a", "b"];
const result = letters.toSorted();

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

Даже если порядок в массиве уже правильный, результат всё равно будет новым массивом.

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

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

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

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

Это тот же самый нюанс, что и у sort().

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

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

const numbers = [1, 2, 10, 5];
const result = numbers.toSorted((a, b) => a - b);

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

Для сортировки по убыванию обычно пишут так:

const numbers = [1, 2, 10, 5];
const result = numbers.toSorted((a, b) => b - a);

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

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

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

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

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

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

Пример:

const numbers = [3, 1, 2];

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

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

toSorted() удобно использовать и с объектами.

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

const sortedUsers = users.toSorted((a, b) => a.age - b.age);

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

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

Это удобно там, где важно сохранить исходный порядок в старом массиве.

toSorted() и sort()

Это самая важная пара для сравнения.

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]

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

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

toSorted() и […arr].sort()

До появления toSorted() часто писали так:

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

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

Такой вариант всё ещё работает, но toSorted() обычно читается проще и точнее показывает намерение.

Строки и localeCompare()

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

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

const result = words.toSorted((a, b) => a.localeCompare(b, "ru"));

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

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

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

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

Пример:

const prices = [300, 100, 200];
const sortedPrices = prices.toSorted((a, b) => a - b);

console.log(prices);       // [300, 100, 200]
console.log(sortedPrices); // [100, 200, 300]

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

Думать, что toSorted() меняет исходный массив

const numbers = [3, 1, 2];

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

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

Если результат не сохранить, исходный массив останется прежним.

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

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

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

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

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

const numbers = [3, 1, 2];

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

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

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

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

Коротко

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