Метод toSpliced()

JavaScriptJunior~3 хв читання

toSpliced() це новий немутуючий аналог методу splice(), доданий до стандарту ECMAScript 2023 (ES14). Він виконує видалення, додавання або заміну елементів, але не змінює вихідний масив, а повертає нову копію зі змінами.

Теорія

TL;DR

toSpliced() робить те саме, що splice(): видаляє, вставляє і замінює елементи.
Оригінальний масив залишається незмінним, метод повертає новий масив.
Синтаксис ідентичний: array.toSpliced(start, deleteCount, ...items).
Повертає увесь новий масив, а не видалені елементи, як це робить splice().
Додано в ECMAScript 2023, разом із toSorted(), toReversed() і with().
Використовується там, де потрібна іммутабельність: React, Redux, чисті функції.

Швидкий приклад

javascript

const arr = [1, 2, 3, 4, 5];

// видалити 2 елементи, починаючи з індексу 1
const newArr = arr.toSpliced(1, 2);

console.log(newArr); // [1, 4, 5]
console.log(arr);    // [1, 2, 3, 4, 5], оригінал не змінено

Синтаксис і параметри

javascript

const newArray = array.toSpliced(start, deleteCount, ...items);

Параметр	Опис
`start`	Індекс, з якого починаються зміни
`deleteCount`	Скільки елементів видалити
`...items`	Елементи, які потрібно вставити на це місце (необов'язково)

Від'ємний start відлічується з кінця масиву, так само як у splice(). Якщо deleteCount не передати, буде видалено всі елементи від start до кінця.

Видалення елементів

javascript

const arr = [1, 2, 3, 4, 5];
const newArr = arr.toSpliced(1, 2); // видалити 2 елементи, починаючи з індексу 1

console.log(newArr); // [1, 4, 5]
console.log(arr);    // [1, 2, 3, 4, 5], оригінал не змінено

Що сталося:

видалили [2, 3];
отримали новий масив [1, 4, 5];
вихідний масив залишився недоторканим.

Додавання і заміна елементів

Додавання, коли deleteCount дорівнює нулю:

javascript

const arr = [1, 2, 3];
const newArr = arr.toSpliced(1, 0, 'a', 'b');

console.log(newArr); // [1, 'a', 'b', 2, 3]
console.log(arr);    // [1, 2, 3]

Починаючи з індексу 1, нічого не видаляємо (deleteCount = 0), вставляємо 'a' і 'b', і отримуємо новий масив, а оригінал не мутує.

Заміна, коли видаляємо і вставляємо одночасно:

javascript

const arr = [1, 2, 3, 4];
const newArr = arr.toSpliced(1, 2, 'x', 'y');

console.log(newArr); // [1, 'x', 'y', 4]
console.log(arr);    // [1, 2, 3, 4]

Тут видалили [2, 3] і вставили на їхнє місце 'x', 'y'.

Порівняння з splice()

javascript

const arr = [1, 2, 3, 4];

const mutated = arr.splice(1, 2, 'x', 'y');
console.log(arr);      // [1, 'x', 'y', 4], вихідний масив змінено
console.log(mutated);  // [2, 3], повертає видалені елементи

const newArr = [1, 2, 3, 4].toSpliced(1, 2, 'x', 'y');
console.log(newArr);   // [1, 'x', 'y', 4], новий масив

Головна різниця не тільки в мутації, а й у тому, що саме повертає метод:

	`splice()`	`toSpliced()`
Змінює вихідний масив	Так	Ні
Повертає	Видалені елементи	Новий масив цілком
Придатний для ланцюжків	Ні	Так
З'явився	ES3	ES2023

Оскільки toSpliced() повертає масив, його можна ставити в ланцюжок:

javascript

const result = [5, 1, 4, 2]
  .toSpliced(0, 1)   // [1, 4, 2]
  .toSorted();       // [1, 2, 4]

Споріднені немутуючі методи ES2023

Новий метод	Старий аналог	Що робить	Змінює масив
`toReversed()`	`reverse()`	Перевертає порядок	Ні
`toSorted()`	`sort()`	Сортує	Ні
`toSpliced()`	`splice()`	Видаляє, вставляє, замінює	Ні
`with()`	`arr[index] = value`	Змінює елемент за індексом	Ні

Усі чотири повертають поверхневу копію (shallow copy): вкладені об'єкти в новому масиві залишаються тими самими посиланнями, що й у старому.

Коли використовувати

Коли потрібно змінити масив без побічних ефектів: у React, Redux або будь-якому іммутабельному коді.
Коли важливо зберегти вихідні дані для порівняння або для undo.
Коли стан порівнюється за посиланням: новий масив гарантує, що компонент перерендериться.

Коротко про метод:

Питання	Відповідь
Що робить	Створює нову версію масиву з видаленими, доданими або заміненими елементами
Змінює вихідний масив	Ні
Повертає	Новий масив
Підтримує вставку і заміну	Так
Доданий у	ECMAScript 2023
Приклад	`[1, 2, 3].toSpliced(1, 1, 'X')` -> `[1, 'X', 3]`

Типові помилки

Очікувати, що метод поверне видалені елементи. splice() повертає видалене, toSpliced() повертає новий масив. Код на кшталт const removed = arr.toSpliced(1, 2) дасть не те, на що ви розраховуєте.
Викликати toSpliced() і не використати результат. arr.toSpliced(1, 2); не робить нічого корисного: оригінал не змінюється, а новий масив одразу втрачається.
Вважати копію глибокою. Це поверхнева копія, тому мутація вкладеного об'єкта все одно зачепить обидва масиви.
Забувати про підтримку середовища. Метод є в сучасних браузерах і в Node.js від версії 20; для старіших цілей потрібен поліфіл або збірка з відповідним таргетом.
Плутати toSpliced() зі slice(). slice(start, end) лише вирізає діапазон і нічого не вставляє, а toSpliced() приймає deleteCount і список нових елементів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.