Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Метод toSpliced()». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`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` і список нових елементів.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати836 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.