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

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

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

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

Контент

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

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

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

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

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

Метод `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()`,
> який повертає **нову копію масиву** з потрібними змінами,
> залишаючи оригінал без змін.

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

Для рев’юера

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

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