ToSorted в JavaScript: сортировка массива без изменения исходного

toSorted() возвращает новый отсортированный массив. Метод sort() переставляет элементы в исходном массиве и возвращает ссылку на него. Если один набор данных используется в нескольких представлениях, toSorted помогает получить другой порядок, сохранив первоначальную последовательность.

На Mentoring.digital разберём учебные данные без библиотек. Начнём с чисел, затем перейдём к объектам: новый массив ещё не означает независимые копии всех вложенных значений.

Почему числа нужно сравнивать явно

const values = [40, 3, 12];
const asText = values.toSorted();
const ascending = values.toSorted((a, b) => a - b);

console.log(asText);     // [12, 3, 40]
console.log(ascending);  // [3, 12, 40]
console.log(values);     // [40, 3, 12]
console.log(ascending === values); // false

Без функции сравнения элементы сортируются как строки. Поэтому 12 оказывается раньше 3. Компаратор (a, b) => a - b задаёт числовой порядок для обычных конечных чисел. Для убывания используйте b - a. Если во входе возможны NaN, строки и отсутствующие значения, сначала определите правила их проверки и размещения.

Компаратор возвращает отрицательное число, ноль или положительное число. Возвращать только a > b неправильно: такое выражение не описывает оба направления сравнения. Функция должна быть согласованной и не менять сравниваемые элементы.

Как сортировать объекты по полям

const tasks = [
  { id: 3, priority: 2 },
  { id: 2, priority: 1 },
  { id: 1, priority: 1 }
];
const ordered = tasks.toSorted((a, b) =>
  a.priority - b.priority || a.id - b.id
);
console.log(ordered.map(task => task.id)); // [1, 2, 3]
console.log(tasks.map(task => task.id));   // [3, 2, 1]

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

Для названий на человеческом языке рассмотрите Intl.Collator с нужной локалью и его метод compare. Сначала уточните, значимы ли регистр, числа внутри строки и языковые особенности. Числовой компаратор не подходит для произвольного текста.

Новый массив не является глубокой копией

const source = [{ id: 1, label: "Draft" }];
const copy = source.toSorted((a, b) => a.id - b.id);
copy[0].label = "Ready";
console.log(source[0].label); // Ready

Оба массива содержат ссылку на один объект. toSorted защищает исходный порядок, но не вложенные свойства. Если после сортировки нужно изменить объект независимо, отдельно создайте его копию с подходящей глубиной. Простое {...item} тоже копирует только верхний уровень.

Совместимость и небольшая проверка

toSorted относится к ECMAScript 2023. Проверьте поддержку в целевом браузере или версии Node.js. Для плотного обычного массива распространённый вариант без этого метода: [...items].sort(compare). Он сначала создаёт копию, а потом меняет её порядок.

Проверьте пустой массив, один элемент, повторяющиеся ключи и исходную последовательность после вызова. Отдельно измените вложенный объект в копии, чтобы увидеть границу поверхностного копирования. Это два разных свойства, и одно не подтверждает другое.

Такие задачи удобно отрабатывать на курсах JavaScript. Подобрать правила сортировки для интерфейса поможет разбор с наставником по JavaScript.