Метод splice()

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

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

Теорія

TL;DR

splice() вміє три операції одразу: видалення, вставку і заміну.
Працює на місці: вихідний масив змінюється.
Повертає масив видалених елементів (порожній, якщо нічого не видаляли).
deleteCount = 0 перетворює виклик на чисту вставку.
Приймає від'ємні індекси: -2 це «другий елемент з кінця».
Не кидає помилку, якщо deleteCount більший за залишок масиву.

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

javascript

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

// видалити 2 елементи з індексу 1 і вставити нові
const removed = arr.splice(1, 2, 'a', 'b', 'c');

console.log(arr);     // [1, 'a', 'b', 'c', 4, 5]
console.log(removed); // [2, 3]

Синтаксис

javascript

array.splice(start, deleteCount, item1, item2, ...);

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

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

javascript

const arr = ['a', 'b', 'c', 'd'];
const removed = arr.splice(1, 2);

console.log(arr);     // ['a', 'd']
console.log(removed); // ['b', 'c']

З позиції 1 видалити 2 елементи.
Повертає масив видалених елементів.
Вихідний масив змінюється.

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

javascript

const arr = ['a', 'd'];
arr.splice(1, 0, 'b', 'c');

console.log(arr); // ['a', 'b', 'c', 'd']

deleteCount = 0 означає, що нічого не видаляємо.
Додаємо 'b' і 'c' на позицію 1.
Усе, що було після, зсувається вправо.

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

javascript

const arr = ['a', 'b', 'c'];
arr.splice(1, 1, 'x', 'y');

console.log(arr); // ['a', 'x', 'y', 'c']

Починаючи з індексу 1, видалити 1 елемент ('b')
і вставити замість нього 'x', 'y'.
Це можна вважати видаленням і вставкою одночасно.

Кількість вставлених елементів не мусить збігатися з кількістю видалених, тому довжина масиву може і зрости, і зменшитися.

4. Використання від'ємних індексів

javascript

const arr = [1, 2, 3, 4];
arr.splice(-2, 1); // видалити один елемент, рахуючи з кінця

console.log(arr); // [1, 2, 4]

-2 означає «другий елемент з кінця».

5. Якщо видалити більше, ніж є

javascript

const arr = [1, 2];
arr.splice(1, 10);
console.log(arr); // [1]

Метод не видає помилку, він просто видалить усе, що є, починаючи з позиції 1. Якщо deleteCount узагалі не передати, буде видалено все від start до кінця масиву.

Коротко

Що робить	Приклад	Результат
Видаляє	`arr.splice(1, 2)`	Видаляє 2 елементи з індексу 1
Додає	`arr.splice(2, 0, 'x')`	Вставляє `'x'` на позицію 2
Замінює	`arr.splice(1, 1, 'x')`	Міняє 1 елемент на `'x'`
Повертає	масив видалених елементів	масив видалених значень
Мутує вихідний масив	так	Так

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

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

Плутати splice() зі slice(). slice() не мутує масив і повертає копію зрізу, splice() мутує і повертає видалене.
Думати, що повертається змінений масив. Повертається саме масив видалених елементів; змінений масив це та сама змінна, на якій викликали метод.
Забувати другий аргумент. arr.splice(2) видалить увесь хвіст від індексу 2, а не «нічого».
Викликати splice() під час перебору того самого масиву. Індекси зсуваються прямо в процесі, і цикл пропускає елементи; ітеруйте з кінця або збирайте новий масив через filter().
Мутувати стан React або Redux через splice(). Посилання на масив не змінюється, тому перерендер не станеться; використовуйте toSpliced(), filter() або spread.

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

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

Premium

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