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(), но результатом всегда будет новый массив.