JS метод Array.splice()

Опис

Метод splice() змінює вміст масиву, видаляючи або замінюючи існуючі елементи та/або додаючи нові елементи на вказане місце. Якщо кількість елементів, які потрібно вставити, не співпадає з кількістю елементів, які видаляються, довжина масиву відповідно змінюється.

Нижче наведено приклад використання методу splice():

let fruits = ["apple", "banana", "mango", "orange"];
fruits.splice(2, 1, "kiwi");
console.log(fruits); // Output: ["apple", "banana", "kiwi", "orange"]

У цьому прикладі ми замінюємо mango на kiwi. При цьому mango видаляється з масиву, а на його місце додається kiwi. Таким чином, результатом виконання коду буде масив ["apple", "banana", "kiwi", "orange"].

Зверніть увагу, що якщо видалена частина масиву була розрідженою, то масив, що повертається за допомогою splice(), також буде розрідженим, із відповідними порожніми слотами.

Порада:	Якщо ви хочете просто видалити елементи без додавання нових, ви можете передати тільки перший і другий аргументи. Наприклад, `array.splice(2, 3)` видалить `3` елементи починаючи з індексу `2`.
Порада:	Метод `splice()` змінює вихідний масив і повертає масив, що містить видалені елементи. Це може бути корисно, якщо вам потрібно зберегти видалені елементи для подальшої обробки.
Нотатка:	Якщо видаляється лише один елемент, повертається масив з одним елементом. Якщо немає видалених елементів, повертається порожній масив.
Нотатка:	Метод `splice()` застосовується, коли потрібно змінити вміст масиву без створення нового масиву. Якщо ж ви бажаєте створити новий масив, видаливши або замінивши його сегмент, і при цьому не змінюючи оригінальний масив, використовуйте метод `toSpliced()`. Щоб отримати доступ до сегментів масиву без його змін, скористайтеся методом `slice()`.
Нотатка:	`splice()` є універсальним методом, який очікує, що значення `this` матиме властивість `length` та цілочисельні властивості з ключами.
Нотатка:	Незважаючи на те, що структура рядків схожа на структуру масивів, цей метод не підходить для них, оскільки рядки в JavaScript є незмінними.

Синтаксис

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item0)
splice(start, deleteCount, item0, item1)
splice(start, deleteCount, item0, item1, /* … ,*/ itemN)

Параметри

*start

Нульовий індекс (перетворений в ціле число), з якого починається зміна масиву.

Негативний індекс відлічується від кінця масиву - якщо start < 0, використовується start + array.length.
Якщо start < -array.length, використовується 0.
Якщо start >= array.length, жоден елемент не буде видалено, але метод поведе себе як функція додавання, додавши стільки елементів, скільки надано.
Якщо start не вказано (і метод splice() викликається без аргументів), нічого не видаляється. Це відрізняється від передачі undefined, яке перетворюється на 0.

deleteCount

Ціле число, що вказує кількість елементів, які слід видалити з масиву починаючи з позиції start.

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

Якщо deleteCount дорівнює 0 або є від'ємним, жоден елемент не видаляється.

item0, …, itemN

Елементи, які додаються до масиву, починаючи з позиції start. Якщо ви не вказуєте жодних елементів, метод splice() буде лише видаляти елементи з масиву.

Return

array: Масив, що містить видалені елементи.

Переглядачі

Переглядач
	1	1	1	4	12

Переглядач
	4.4	18	4	1

Переглядач
	0.10.0	1.0

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/gOQGEPd">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Видалення 1 елемента за індексом 3.

const myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
const removed = myFish.splice(3, 1);

// myFish стає ["angel", "clown", "drum", "sturgeon"]
// removed стає ["mandarin"]

Видалення 2 елементів, починаючи з індексу 2.

const myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"];
const removed = myFish.splice(2, 2);

// myFish стає ["parrot", "anemone", "sturgeon"]
// removed стає ["blue", "trumpet"]

Метод splice() зберігає розрідженість масиву.

const arr = [1, , 3, 4, , 6];
console.log(arr.splice(1, 2)); // [empty, 3]
console.log(arr); // [1, 4, empty, 6]

Виклик splice() на не-масивних об'єктах.

const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
};
console.log(Array.prototype.splice.call(arrayLike, 0, 1, 2, 3));
// [ 5 ]
console.log(arrayLike);
// { '0': 2, '1': 3, '3': 4, length: 4, unrelated: 'foo' }

Видалення 0 (нуль) елементів перед індексом 2 та вставлення "drum".

const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2, 0, "drum");

// myFish стає ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed стає [], жоден елемент не було видалено

JS довідник

JavaScript

Наповнення JS розділу