Пошук уроків, статей та іншого контенту
Розберете splice для вставки, заміни й видалення частин масиву та порівняєте його з slice.
splice і slice: головна різницяОбидва методи працюють із частинами масиву, але мають різне призначення:
splice() змінює початковий масив: може видаляти, вставляти та замінювати елементи.
slice() не змінює початковий масив, а повертає його копію або частину копії.
| Метод | Змінює початковий масив | Повертає | |---|---:|---| | splice() | Так | Масив видалених елементів | | slice() | Ні | Новий масив із вибраними елементами |
Наприклад:
const numbers = [10, 20, 30, 40];
const part = numbers.slice(1, 3);
console.log(part); // [20, 30]
console.log(numbers); // [10, 20, 30, 40]
const removed = numbers.splice(1, 2);
console.log(removed); // [20, 30]
console.log(numbers); // [10, 40]splice()Синтаксис:
array.splice(start, deleteCount, item1, item2, ...);Параметри:
start — індекс, із якого починається зміна масиву;
deleteCount — кількість елементів, які потрібно видалити;
item1, item2, ... — необов’язкові елементи для вставки.
Метод повертає новий масив із видаленими елементами.
const users = ["Анна", "Богдан", "Олена", "Дмитро"];
const removedUsers = users.splice(1, 2);
console.log(removedUsers); // ["Богдан", "Олена"]
console.log(users); // ["Анна", "Дмитро"]Починаючи з індексу 1, метод видалив два елементи.
Якщо потрібно видалити один елемент:
const colors = ["red", "green", "blue"];
const removedColor = colors.splice(1, 1);
console.log(removedColor); // ["green"]
console.log(colors); // ["red", "blue"]Щоб лише вставити елементи, передайте deleteCount, що дорівнює 0:
const numbers = [1, 2, 5];
numbers.splice(2, 0, 3, 4);
console.log(numbers); // [1, 2, 3, 4, 5]Метод починає роботу з індексу 2, не видаляє жодного елемента та вставляє 3 і 4.
Вставити елемент на початок масиву можна так:
const tasks = ["перевірити пошту", "написати звіт"];
tasks.splice(0, 0, "відкрити ноутбук");
console.log(tasks);
// ["відкрити ноутбук", "перевірити пошту", "написати звіт"]Для вставки в кінець можна використати індекс, що дорівнює довжині масиву:
const fruits = ["яблуко", "банан"];
fruits.splice(fruits.length, 0, "апельсин");
console.log(fruits); // ["яблуко", "банан", "апельсин"]Проте для додавання в кінець зазвичай зрозуміліше використовувати push().
Заміна — це поєднання видалення та вставки:
const statuses = ["новий", "у роботі", "скасований"];
statuses.splice(2, 1, "завершений");
console.log(statuses); // ["новий", "у роботі", "завершений"]Метод починає з індексу 2, видаляє один елемент і вставляє замість нього "завершений".
Кількість елементів, що видаляються і вставляються, може бути різною:
const values = [1, 2, 3, 4, 5];
values.splice(1, 3, 10, 20);
console.log(values); // [1, 10, 20, 5]Було видалено три елементи [2, 3, 4], а вставлено два [10, 20].
Можна замінити один елемент кількома:
const commands = ["start", "stop"];
commands.splice(1, 1, "pause", "resume");
console.log(commands); // ["start", "pause", "resume"]startПозитивний індекс відраховується від початку масиву:
const letters = ["a", "b", "c", "d"];
letters.splice(1, 1);
console.log(letters); // ["a", "c", "d"]Від’ємний індекс відраховується від кінця:
const letters = ["a", "b", "c", "d"];
letters.splice(-2, 1);
console.log(letters); // ["a", "b", "d"]Індекс -2 відповідає елементу "c".
Якщо від’ємний індекс виходить за межі масиву, він фактично обмежується початком:
const numbers = [1, 2, 3];
numbers.splice(-100, 1);
console.log(numbers); // [2, 3]Якщо start більший за довжину масиву, вставка відбудеться в кінці, але видалення не станеться:
const numbers = [1, 2, 3];
numbers.splice(100, 0, 4);
console.log(numbers); // [1, 2, 3, 4]deleteCountdeleteCount дорівнює нулюЕлементи не видаляються, але нові можуть вставлятися:
const items = ["a", "d"];
items.splice(1, 0, "b", "c");
console.log(items); // ["a", "b", "c", "d"]deleteCount більший за кількість елементівМетод видалить усі доступні елементи до кінця масиву:
const numbers = [1, 2, 3];
const removed = numbers.splice(1, 100);
console.log(removed); // [2, 3]
console.log(numbers); // [1]deleteCount не переданоЯкщо другий аргумент не передати, splice() видалить усі елементи від start до кінця:
const files = ["index.html", "styles.css", "app.js", "README.md"];
files.splice(2);
console.log(files); // ["index.html", "styles.css"]Це зручно для видалення хвоста масиву, але важливо не переплутати з викликом splice(index, 0).
const numbers = [1, 2, 3, 4];
numbers.splice(2, 0);
console.log(numbers); // [1, 2, 3, 4]У цьому випадку жоден елемент не видалено.
slice()Синтаксис:
array.slice(start, end);Метод повертає новий масив від start до end, але не включає елемент із індексом end.
const numbers = [10, 20, 30, 40, 50];
const part = numbers.slice(1, 4);
console.log(part); // [20, 30, 40]
console.log(numbers); // [10, 20, 30, 40, 50]Якщо не передати аргументів, slice() створить поверхневу копію всього масиву:
const original = ["HTML", "CSS", "JavaScript"];
const copy = original.slice();
copy.push("TypeScript");
console.log(original); // ["HTML", "CSS", "JavaScript"]
console.log(copy); // ["HTML", "CSS", "JavaScript", "TypeScript"]Схожий результат дають оператор розпилення та Array.from():
const first = [1, 2, 3];
const second = first.slice();
const third = [...first];
const fourth = Array.from(first);slice() також підтримує від’ємні індекси:
const numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice(-2)); // [40, 50]
console.log(numbers.slice(1, -1)); // [20, 30, 40]slice(-2) повертає два останні елементи.
Якщо не передати end, вибірка триватиме до кінця масиву:
const commands = ["build", "test", "deploy", "notify"];
const remainingCommands = commands.slice(2);
console.log(remainingCommands); // ["deploy", "notify"]І slice(), і оператор розпилення створюють поверхневу копію. Сам масив буде новим, але вкладені об’єкти залишаться спільними.
const original = [
{ title: "Завдання 1", done: false },
{ title: "Завдання 2", done: false }
];
const copy = original.slice();
copy[0].done = true;
console.log(original[0].done); // true
console.log(copy[0].done); // trueЗміна властивості об’єкта через copy відобразилася і в original, тому що обидва масиви містять посилання на той самий об’єкт.
Водночас додавання або видалення елемента змінює лише конкретний масив:
const original = [{ id: 1 }];
const copy = original.slice();
copy.push({ id: 2 });
console.log(original); // [{ id: 1 }]
console.log(copy); // [{ id: 1 }, { id: 2 }]Якщо потрібно незалежно копіювати вкладені об’єкти, їх потрібно копіювати окремо:
const original = [
{ id: 1, active: false },
{ id: 2, active: false }
];
const copy = original.map(item => ({ ...item }));
copy[0].active = true;
console.log(original[0].active); // false
console.log(copy[0].active); // trueРозглянемо редагування списку завдань:
const tasks = [
{ id: 1, title: "Спланувати роботу", done: true },
{ id: 2, title: "Написати код", done: false },
{ id: 3, title: "Перевірити результат", done: false }
];
// Заміна назви другого завдання
tasks.splice(1, 1, {
id: 2,
title: "Написати та перевірити код",
done: false
});
// Вставка нового завдання перед третім
tasks.splice(2, 0, {
id: 4,
title: "Описати зміни",
done: false
});
// Видалення першого завдання
const removedTasks = tasks.splice(0, 1);
console.log(removedTasks);
// [{ id: 1, title: "Спланувати роботу", done: true }]
console.log(tasks);
// [
// { id: 2, title: "Написати та перевірити код", done: false },
// { id: 4, title: "Описати зміни", done: false },
// { id: 3, title: "Перевірити результат", done: false }
// ]У цьому прикладі splice() доречний, якщо потрібно змінити сам список.
Якщо ж потрібно сформувати окремий список, не змінюючи початковий, використовуйте slice():
const tasks = ["планування", "розробка", "тестування", "реліз"];
const visibleTasks = tasks.slice(0, 3);
console.log(visibleTasks); // ["планування", "розробка", "тестування"]
console.log(tasks); // ["планування", "розробка", "тестування", "реліз"]Використовуйте splice(), коли потрібно:
видалити елементи з початкового масиву;
вставити елементи в певну позицію;
замінити одну або кілька частин масиву;
отримати масив елементів, які було видалено.
Використовуйте slice(), коли потрібно:
отримати частину масиву без зміни оригіналу;
скопіювати весь масив;
підготувати дані для подальших операцій;
працювати в стилі незмінних даних.
Для сучасного коду, особливо в інтерфейсах і системах керування станом, часто важливо не змінювати початкові масиви. У такому випадку slice() безпечніший, але для складніших операцій іноді знадобиться створити новий масив із частин старого:
const numbers = [1, 2, 5, 6];
const index = 2;
const updatedNumbers = [
...numbers.slice(0, index),
3,
4,
...numbers.slice(index)
];
console.log(updatedNumbers); // [1, 2, 3, 4, 5, 6]
console.log(numbers); // [1, 2, 5, 6]splice() створить новий масивconst numbers = [1, 2, 3];
const result = numbers.splice(1, 1);
console.log(result); // [2]
console.log(numbers); // [1, 3]result містить видалені елементи, а не оновлену копію масиву. Оновлений масив — це сам numbers.
splice() і slice()У splice() другий аргумент — це кількість елементів:
const numbers = [10, 20, 30, 40];
numbers.splice(1, 2); // видалити 2 елементиУ slice() другий аргумент — це кінцева межа, яка не включається:
const numbers = [10, 20, 30, 40];
numbers.slice(1, 2); // повернути елементи з індексами 1 до 2: [20]deleteCountТакий код видаляє всі елементи від індексу 1 до кінця:
const values = [1, 2, 3, 4];
values.splice(1);
console.log(values); // [1]Якщо потрібно лише вставити елемент, явно вказуйте 0:
values.splice(1, 0, 10);Оскільки splice() мутує масив, це може вплинути на інший код, який використовує те саме посилання:
const original = ["a", "b", "c"];
const reference = original;
original.splice(1, 1);
console.log(reference); // ["a", "c"]reference і original — це один і той самий масив.
Якщо потрібна окрема копія:
const original = ["a", "b", "c"];
const copy = original.slice();
original.splice(1, 1);
console.log(original); // ["a", "c"]
console.log(copy); // ["a", "b", "c"]deleteОператор delete не видаляє елемент так, як splice():
const numbers = [10, 20, 30];
delete numbers[1];
console.log(numbers); // [10, empty, 30]
console.log(numbers.length); // 3У масиві залишилася порожня позиція. Для повноцінного видалення зі зміщенням наступних індексів використовуйте splice():
const numbers = [10, 20, 30];
numbers.splice(1, 1);
console.log(numbers); // [10, 30]splice() змінює початковий масив.
За допомогою splice() можна видаляти, вставляти та замінювати елементи.
Синтаксис splice(start, deleteCount, ...items) визначає позицію, кількість видалених елементів і нові елементи.
splice() повертає масив видалених елементів.
slice() не змінює початковий масив.
slice(start, end) копіює елементи від start включно до end виключно.
Обидва методи підтримують від’ємні індекси.
slice() створює поверхневу копію: вкладені об’єкти не копіюються автоматично.
Перед використанням splice() переконайтеся, що зміна початкового масиву справді потрібна.