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

hannadev

JavaScript получает новые иммутабельные методы массивов - toReversed, toSorted, toSpliced и with. Они решают проблему мутации исходного массива, создавая копии без изменений оригинала. Это упрощает код в React, Vue и других фреймворках, где иммутабельность критична для перерисовок.

Зачем это нужно? Старые методы вроде reverse, sort и splice меняют массив на месте, что приводит к багам в больших проектах. Новые аналоги возвращают свежий массив, оставляя оригинал нетронутым. Теперь можно писать чище и надежнее, без спредов и slice для обходных путей.

Что такое иммутабельные методы и почему они важны

Иммутабельные методы не трогают исходный массив, а всегда возвращают новый. Это базовая идея: мутабельные методы вроде push, pop, sort изменяют данные на месте, что удобно для производительности, но опасно в многопоточных сценариях или при работе с состоянием. В JavaScript мутация приводит к неожиданным side-effect’ам - функция меняет данные за пределами своей видимости, и код ломается.

Представьте массив в состоянии React-компонента. Если sort его поменяет, компонент перерисуется некорректно или вызовет бесконечный цикл. Новые методы решают это, создавая копию. Они появились в ECMAScript 2023-2025 и поддерживаются в современных браузерах. По данным Can I Use, охват - 95%+ устройств на март 2026.

Вот ключевые отличия:

Мутабельные: reverse(), sort(), splice() - меняют оригинал.
Иммутабельные новые: toReversed(), toSorted(), toSpliced(), with() - возвращают новый массив.
Нюанс: with() меняет только один элемент по индексу, не трогая остальное.

Метод	Мутабельный аналог	Что возвращает
toReversed()	reverse()	Новый массив в обратном порядке
toSorted()	sort()	Отсортированная копия
toSpliced()	splice()	Массив без удаленных/вставленных элементов
with()	Нет прямого	Копия с измененным элементом по индексу

toReversed() - переверни без вреда

Метод toReversed() возвращает копию массива в обратном порядке, не меняя оригинал. Старый reverse() мутирует массив, что проблематично в цепочках методов или при сохранении исходных данных. С toReversed() код становится предсказуемым: arr.toReversed() всегда оставляет arr как есть.

Пример: у нас массив чисел [1, 2, 3, 4]. Вызываем toReversed() - получаем [4, 3, 2, 1], оригинал не трогаем. Это полезно для UI-списков, где нужно показать обратный порядок без потери данных. В комбинации с map или filter цепочка остается чистой.

const arr = [1, 2, 3]; const rev = arr.toReversed(); - rev: [3,2,1], arr: [1,2,3].
Полезно в React state: setState(arr.toReversed()) - без мутации.
Поддержка: Chrome 110+, Firefox 115+, Safari 16.4+.
Сравни с […arr].reverse() - новый метод короче и быстрее.

toSorted() и toSpliced() - сортировка и правки без риска

toSorted() сортирует копию массива по заданному компаратору, оригинал остается прежним. Старый sort() меняет массив, что ломает логику в функциях. toSorted(compareFn) принимает функцию сравнения, как и sort.

toSpliced(start, deleteCount, …items) удаляет/вставляет элементы, возвращая новый массив. Не путайте с splice() - здесь нет мутации. Идеально для редактирования списков в формах или TODO-приложениях.

Примеры:

const nums = [3, 1, 4];
const sorted = nums.toSorted((a, b) => a - b); // [1,3,4], nums не изменился.

const fruits = ['banana', 'apple'];
const spliced = fruits.toSpliced(1, 0, 'orange'); // ['banana', 'orange', 'apple']

Преимущество: Чистые цепочки - arr.toSorted().map().filter().
Нюанс: toSorted() стабильна - равные элементы сохраняют порядок.
Для строк: toSorted((a,b)=>a.localeCompare(b)).

Сценарий	Старый способ	Новый способ
Сортировка	[…arr].sort()	arr.toSorted()
Удаление	arr.slice(0,start) + arr.slice(end)	arr.toSpliced(start, count)

with() - точечная замена элемента

Метод with(index, value) создает копию массива, заменяя элемент по индексу на новый. Нет мутации, оригинал цел. Это как spread с заменой: […arr.slice(0,index), value, …arr.slice(index+1)], но короче.

Полезно для обновления состояния: в Redux или Zustand one-liner меняет один item. Поддерживает глубокие замены в пределах лимита.

const scores = [10, 20, 30];
const updated = scores.with(1, 25); // [10, 25, 30]

Работает с примитивs и объектами - заменяет ссылку.
Ограничение: Только один индекс за раз.
Идеально для массивов фиксированной длины.

Когда использовать иммутабельные методы на практике

Эти методы упрощают иммутабельный код в проектах. В старых браузерах используйте полифиллы из core-js. Они быстрее спредов на больших массивах - производительность на уровне C++.

Останавливайтесь на простых случаях: для сложных мутаций комбинируйте с Immer или Immer.js. Стоит протестировать в devtools - console.table сравнит оригинал и копию. Дальше ждем flatMap() и другие новинки ES2026.