Що робить toSpliced()?

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

Метод toSpliced() - це новий немутувальний аналог старого методу splice() (доданий у стандарті ECMAScript 2023 / ES14).

Він виконує видалення, додавання або заміну елементів, але не змінює вихідний масив, а повертає нову копію зі змінами.

Синтаксис:

javascript

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

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

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

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]
Вихідний залишився недоторканим

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

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"
Повертається новий масив, оригінал не мутує.

3. Заміна елементів

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"

4. Порівняння зі `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] - новий масив

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

Коли тобі потрібно змінити масив без побічних ефектів (наприклад, у React, Redux чи будь-якому іммутабельному коді).
Коли важливо зберегти вихідні дані.

Пов'язані немутувальні методи (ES2023+)

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

Коротко:

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

Підсумок: toSpliced() - це немутувальний аналог splice(), який повертає нову копію масиву з потрібними змінами, залишаючи оригінал без змін.

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

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

Premium

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