Иммутабельные методы массивов: with, toSorted, toReversed, toSpliced

Классические методы sort, reverse и splice меняют массив на месте. В мире React, Vue и других подходов с иммутабельным состоянием это источник коварных багов: вы случайно мутируете исходные данные, и UI не обновляется или ломается непредсказуемо. Четыре метода — with, toSorted, toReversed и toSpliced — делают то же самое, но возвращают новый массив, не трогая оригинал.

toSorted и toReversed — иммутабельные двойники sort и reverse. toSpliced — версия splice, возвращающая копию с изменениями. А with(index, value) заменяет один элемент по индексу — раньше для этого приходилось писать map с проверкой индекса или копировать через спред и присваивать.

const nums = [3, 1, 2];

const sorted = nums.toSorted();     // [1, 2, 3]
const reversed = nums.toReversed(); // [2, 1, 3]
const replaced = nums.with(0, 99);  // [99, 1, 2]
const spliced = nums.toSpliced(1, 1, 'x'); // [3, 'x', 2]

console.log(nums); // [3, 1, 2] — исходный массив не тронут

Ну и вообще, раньше «заменить элемент по индексу без мутации» выглядело многословно:

state.map((item, i) => i === idx ? newItem : item)

Теперь это выглядит так

state.with(idx, newItem)

Согласитесь, так гораздо короче и понятнее. То же с сортировкой списка для отображения: items.toSorted(byDate) не испортит исходный массив, а значит, не вызовет неожиданных ре-рендеров или гонок данных.

Все четыре метода поддерживаются в Chrome 110+, Firefox 115+, Safari 16+ и в Node.js 20+. К 2026 году это полностью безопасно использовать без полифилов в любом современном проекте. Для совсем старых окружений эти методы легко полифилятся, поскольку выражаются через копирование и существующие операции.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.