Array.splice() в JavaScript — видалити й вставити елементи масиву

Опис

Метод 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.

автор: Bond правити

Порада

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

автор: Bond правити

Нотатка

Якщо видаляється лише один елемент, повертається масив з одним елементом. Якщо немає видалених елементів, повертається порожній масив.

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

splice() є універсальним методом, який очікує, що значення this матиме властивість length та цілочисельні властивості з ключами.

автор: Bond правити

Нотатка

Незважаючи на те, що структура рядків схожа на структуру масивів, цей метод не підходить для них, оскільки рядки в JavaScript є незмінними.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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.

автор: Bond

правити

deleteCount

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

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

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

автор: Bond

правити

item0, …, itemN

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

автор: Bond

правити

Повернення

array

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

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

console.log(myFish); // → ["parrot", "anemone", "sturgeon"]
console.log(removed); // → ["blue", "trumpet"]

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

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

console.log(myFish); // → ["angel", "clown", "drum", "mandarin", "sturgeon"]
console.log(removed); // → [], жоден елемент не було видалено

<header>
  <h2 class="title">Використання методу splice() з масивом</h2>
  <p class="description">Демонстрація використання методу splice() для модифікації масиву.</p>
</header>
<main>
  <div class="result">
    <h3 class="result-title">Початковий масив:</h3>
    <pre id="initialArray"></pre>
    <h3 class="result-title">Результат додавання елементів:</h3>
    <pre id="addResult"></pre>
    <h3 class="result-title">Результат заміни елементів:</h3>
    <pre id="replaceResult"></pre>
    <h3 class="result-title">Результат видалення елементів:</h3>
    <pre id="deleteResult"></pre>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.result-title {
  font-weight: bold;
  color: #333;
}

const months = ['Jan', 'March', 'April', 'June'];

// Виводимо початковий масив
document.getElementById('initialArray').innerText = JSON.stringify(months, null, 2);

months.splice(1, 0, 'Feb');
// Вставляємо на 1 індекс
document.getElementById('addResult').innerText = JSON.stringify(months, null, 2);

months.splice(4, 1, 'May');
// Замінюємо 1 елемент на 4 індексі
document.getElementById('replaceResult').innerText = JSON.stringify(months, null, 2);

months.splice(0, 2);
// Видаляємо два елементи, починаючи з 0 індексу
document.getElementById('deleteResult').innerText = JSON.stringify(months, null, 2);
//# sourceURL=pen.js

const fruits = ['яблуко', 'банан', 'манго', 'слива'];

// splice ПОВЕРТАЄ вилучене, а змінений масив лишається в змінній
const removed = fruits.splice(1, 2);
console.log('вилучено:', removed);   // ['банан', 'манго']
console.log('лишилось:', fruits);    // ['яблуко', 'слива']

// без другого аргументу — ріже до кінця
const a = [1, 2, 3, 4, 5];
a.splice(2);
console.log('splice(2):', a);        // [1, 2]

// а з undefined — не видаляє нічого
const b = [1, 2, 3, 4, 5];
b.splice(2, undefined);
console.log('splice(2, undefined):', b);  // [1, 2, 3, 4, 5]

// вставка без видалення
const c = ['a', 'd'];
c.splice(1, 0, 'b', 'c');
console.log('вставка:', c);          // ['a', 'b', 'c', 'd']

// slice оригінал не чіпає
const d = [1, 2, 3, 4, 5];
console.log('slice(1, 3):', d.slice(1, 3), 'оригінал:', d);

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

console.log(myFish); // → ["angel", "clown", "drum", "sturgeon"]
console.log(removed); // → ["mandarin"]

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' }