Метод splice() в JavaScript: полное руководство с примерами

В JavaScript есть методы массивов, которые делают какую-то одну штуку, а есть splice(), который делает всё. Удалить элемент из середины? Легко. Вставить новый на вторую позицию? Без проблем. Заменить три элемента на один? Подержите моё пиво.

Но за эту мощь приходится платить: splice() — один из тех методов, которые меняют исходный массив. Поэтому сегодня подробно разберём синтаксис, подводные камни, отличие от slice() и лучшие сценарии использования.

Что такое метод splice() в JavaScript

Если коротко, splice() — это метод массивов, который умеет делать всё сразу: удалять, добавлять и заменять элементы прямо в исходном массиве. Он не создаёт копию массива (как map или filter), а меняет его на месте. 

Метод можно сравнить с хирургической операцией: вы разрезаете массив, вытаскиваете содержимое, вставляете то, что нужно, и зашиваете обратно. Пациент (массив) остаётся тем же, но его содержимое меняется навсегда.

Вызывая splice(), вы говорите движку JS: «Иди по этому адресу и перестрой данные прямо в памяти». Метод требует болшой осторожности: если вы случайно мутируете пропс в React или данные из Vuex, приложение может вести себя непредсказуемо.

Синтаксис метода splice()

Базовый синтаксис выглядит так:

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

Где:

Например:

const numbers = [10, 20, 30, 40, 50];
// Начиная с индекса 1, удалить 2 элемента и вставить туда 'A' и 'B'
numbers.splice(1, 2, 'A', 'B'); 
console.log(numbers); 
// Результат: [10, 'A', 'B', 40, 50]

Что произошло: мы встали на позицию 20 (индекс 1), выкинули её и следующую 30, а в образовавшуюся дыру закинули буквы. И главное: исходный массив изменился.

Параметры и возвращаемое значение

Тут важно не запутаться, потому что метод делает две вещи одновременно:

Многие новички думают, что splice() вернёт им новый, изменённый массив, пишут const newArr = arr.splice(...) и получают в newArr только остатки того, что удалили.

Посмотрим на примере:

const party = ['Антон', 'Борис', 'Виктор', 'Глеб'];
// Выгоняем Бориса и Виктора
const kickedOut = party.splice(1, 2);
console.log(party);     // ['Антон', 'Глеб'], те, кто остался
console.log(kickedOut); // ['Борис', 'Виктор'], те, кого выгнали (вернёт массив)

Если бы deleteCount был 0, метод вернул бы пустой массив [], потому что ничего не вырезали:

Как использовать splice() для работы с массивами

В реальных проектах splice() нужен постоянно, это база для CRUD-операций на клиенте. Корзины, списки задач, таблицы заказов — везде, где нужно точечно изменить данные, чтобы интерфейс сразу же перерисовался, а состояние стало актуальным.

Удаление элементов из массива

Самый частый кейс: у вас есть список и нужно удалить из него один элемент — по индексу, ID или условию. Например, есть такой список товаров в корзине:

const cart = [
  { id: 101, title: 'Ноутбук' },
  { id: 102, title: 'Мышка' }, 
  { id: 103, title: 'Клавиатура' }
];

Пользователь передумал брать «Мышку» и нажал крестик. Нам нужно найти этот товар и убрать его из списка:

// Находим индекс элемента
const index = cart.findIndex(item => item.id === 102);
// Если элемент найден (индекс не равен -1), удаляем его
if (index !== -1) {
  // Первый аргумент: откуда резать
  // Второй аргумент: сколько удалять (важно не забыть единицу)
  cart.splice(index, 1);
}
console.log(cart); 
// [{ id: 101... }, { id: 103... }] мышки больше нет

И снова обратите внимание на второй аргумент 1. Это количество удаляемых элементов. Если вы забудете его написать (cart.splice(index)), JavaScript услужливо удалит всё, начиная с этого индекса и до самого конца массива. Это частая ошибка, которая очищает половину списка.

Добавление новых элементов

Второй по популярности кейс — вставить элемент в середину списка. Например, в UI мы сортируем карточки методом drag-and-drop.

Большинство методов массива (push, unshift) умеют добавлять данные только по краям, а вот splice() может вставить элемент в любую точку списка, пододвинув соседей. Магия кроется во втором аргументе: если передать туда 0, метод поймёт: «Ага, удалять ничего не нужно, нужно только добавить».

Допустим, у нас есть список задач:

const tasks = [
  'Проверить логи',
  'Созвон с тимлидом',
  'Настроить CI/CD'
];

Между созвоном и логами нам нужно срочно вклинить две новые задачи:

// 1-й аргумент 1, куда встаём
// 2-й аргумент 0, ничего не удаляем
// Дальше перечисляем, что добавить
tasks.splice(1, 0, 'Срочный фикс бага', 'Выпить кофе');
console.log(tasks);

Это база для любого drag-and-drop-интерфейса (Trello, Jira, канбан-доски). Когда вы перетаскиваете карточку и бросаете её между двумя другими, под капотом срабатывает именно splice(): он раздвигает массив и кладёт элемент в нужную ячейку.

Замена элементов в массиве

Третья суперспособность splice() — это обновление данных. По сути, это комбинация двух предыдущих действий: мы удаляем старое и тут же не отходя от кассы вставляем новое.

Представим список пользователей:

const users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
  { id: 3, name: 'Марина' }
];

Пользователь с id = 2 обновил имя, и вот что мы делаем:

const index = users.findIndex(u => u.id === 2);
if (index !== -1) {
  // 1. Находим Олега по индексу
  // 2. Удаляем 1 элемент (старого Олега)
  // 3. Вставляем новый объект
  const oldUser = users.splice(index, 1, { id: 2, name: 'Олег Петрович' });
  // splice вернёт массив с удалённым старым Олегом: удобно для логов или кнопки «Отмена»
  console.log(oldUser[0]); // { id: 2, name: 'Олег' }
}
console.log(users);
// [{ id: 1... }, { id: 2, name: 'Олег Петрович' }, { id: 3... }]

Кстати, на собеседовании могут спросить: «А почему не сделать просто присваивание users[index] = новыйОбъект?» Казалось бы, так проще. Но у splice() есть два явных плюса.

Legacy-реактивность: если вы вдруг поддерживаете проект на Vue 2, то прямое присваивание по индексу (arr[i] = ...) там не работает, интерфейс не обновится. А вот splice() работает реактивно.

Гибкость: присваивание через равно (arr[i] = ...) — это всегда обмен 1 на 1. Вы не можете одной командой превратить одну ячейку массива в три — для этого пришлось бы вручную двигать все остальные элементы. А splice() может. Вы можете удалить один элемент, а на его место вставить пять. 

Например: была задача «Купить продукты». Мы её удаляем, а на её место вставляем детализацию: «Хлеб», «Молоко», «Яйца». Массив сам растягивается, чтобы вместить новые данные.

Разница между splice() и slice()

Названия этих методов различаются всего на одну букву, но логика работы у них разная. Если перепутать их в коде, можно случайно удалить половину данных там, где вы просто хотели на них посмотреть.

Чтобы не путаться, запомните простую ассоциацию:

Ключевые различия методов

Главное различие — отношение к исходным данным. 

slice() — безопасный метод, он создаёт новый массив и копирует туда элементы от индекса начала до индекса конца. Старый массив при этом вообще не знает, что с ним что-то делали. Именно поэтому slice часто используют для создания поверхностных копий.

splice() — это агрессивный метод, он лезет прямо в память исходного массива и перестраивает его структуру.

Различаются и аргументы, что тоже часто сбивает с толку:

Посмотрим пример-батл:

const original = ['А', 'Б', 'В', 'Г', 'Д'];
// Slice: сделай ксерокопию с 1-го по 3-й индекс
const copy = original.slice(1, 3);
console.log(copy);      // ['Б', 'В'] копия у нас на руках
console.log(original);  // ['А', 'Б', 'В', 'Г', 'Д'] оригинал цел

// Splice: вырежи из оригинала 2 штуки начиная с 1-го
const cut = original.splice(1, 2);
console.log(cut);       // ['Б', 'В'] обрезки у нас на руках
console.log(original);  // ['А', 'Г', 'Д'] оригинал пострадал

Когда использовать каждый метод

Всё зависит от вашей задачи. Задайте себе один вопрос: «Мне нужен старый массив или я могу его ломать?»

slice()

splice()

Практические примеры использования splice()

Теорию разобрали, теперь перейдём к боевым паттернам. Рассмотрим несколько готовых рецептов, которые можно копировать в свои проекты.

Удаление элементов по индексу

Иногда нужно не удалить «товар по ID», а просто обрезать хвост массива или удалить последние несколько элементов. Тут идеально заходит фишка с отрицательными индексами (считаем с конца).

Наша задача — оставить в логах только последние 5 записей, удалив всё старое.

const logs = ['Log1', 'Log2', 'Log3', 'Log4', 'Log5', 'Log6', 'Log7'];
// Если логов больше 5, удаляем лишнее с начала
if (logs.length > 5) {
  // Начиная с 0, удалить (всего - 5) штук
  logs.splice(0, logs.length - 5);
}
console.log(logs); 
// ['Log3', 'Log4', 'Log5', 'Log6', 'Log7']

Вставка элементов в массив

Представьте, что у вас есть два массива и второй нужно вклеить в середину первого. Если использовать push, вы получите вложенный массив. А splice в связке со спред-оператором сделает всё красиво.

Например, мы загрузили пачку комментариев и хотим вставить их после закреплённого поста:

const posts = ['Закреплённый пост', 'Футер'];
const newComments = ['Коммент 1', 'Коммент 2', 'Коммент 3'];
// Вставляем на индекс 1.
// Спред-оператор распаковывает массив newComments на отдельные элементы
posts.splice(1, 0, ...newComments);
console.log(posts);
// ['Закреплённый пост', 'Коммент 1', 'Коммент 2', 'Коммент 3', 'Футер']

Комплексные операции с массивом

Классическая задача для канбан-досок или сортировки плейлиста: переместить элемент с места А на место Б. Решается одной строчкой.

Мы хотим переместить трек с позиции 0 на позицию 2:

const playlist = ['Track A', 'Track B', 'Track C', 'Track D'];
// Откуда берём (Track A)
const fromIndex = 0; 
// Куда ставим
const toIndex = 2;   
const element = playlist.splice(fromIndex, 1)[0];
playlist.splice(toIndex, 0, element);
console.log(playlist);
// ['Track B', 'Track C', 'Track A', 'Track D']

Что здесь происходит:

Особенности работы splice()

Напоследок разберём пару нюансов, на которых часто спотыкаются начинающие, и рассмотрим новую альтернативу toSpliced().

Изменение исходного массива

Мы уже говорили, что splice() вызывает мутацию данных. Но новички часто попадают в ловушку, думая, что их спасёт объявление массива через const. В JavaScript ключевое слово const защищает от перезаписи переменной, но не содержимого объекта или массива.

const myData = [1, 2, 3];
// Некоторые думают, что это выдаст ошибку, но нет:
myData.splice(0, 1); 
console.log(myData); // [2, 3]

splice() меняет данные внутри той же ячейки памяти.

Это может быть опасно: если вы передадите этот массив в функцию как аргумент и функция сделает splice, массив сломается во всём приложении. Поэтому, если не уверены, нужен ли вам оригинал, всегда делайте копию ([...arr]) перед сплайсом.

Отрицательные индексы в splice()

JavaScript умеет считать не только слева направо (0, 1, 2...), но и справа налево. Это работает в первом аргументе start.

Это спасает от написания длинных конструкций вида arr.length - 1.

Например, мы хотим убрать два последних элемента:

const letters = ['A', 'B', 'C', 'D', 'E'];
// Вместо letters.splice(letters.length - 2, 2) пишем проще:
letters.splice(-2, 2);
console.log(letters); // ['A', 'B', 'C']

Отрицательным может быть только первый аргумент (откуда резать). Второй аргумент (сколько резать) всегда должен быть положительным числом. Если напишете splice(0, -2) — метод просто ничего не удалит, так как «минус два элемента» удалить невозможно.

Современная альтернатива: toSpliced()

Разработчики языка понимают, что мутация исходного массива — это частый источник багов. Поэтому в стандарте ES2023 появился метод toSpliced(). Работает он абсолютно так же, как splice() (у него те же аргументы), но с одним различием: он не трогает исходный массив, а возвращает новую изменённую копию.

Посмотрим на примере:

const months = ['Jan', 'Mar', 'Apr', 'May'];
// Вставляем 'Feb' на индекс 1
// toSpliced вернёт новый массив
const updatedMonths = months.toSpliced(1, 0, 'Feb');
console.log(updatedMonths); // ['Jan', 'Feb', 'Mar', 'Apr', 'May']
console.log(months);        // ['Jan', 'Mar', 'Apr', 'May'] — оригинал цел!

Это идеальный выбор для React, Redux и любых мест, где важна неизменяемость. Не нужно делать копию вручную — метод делает это за вас.

Единственный минус: проверяйте поддержку браузеров, в совсем старых версиях может понадобиться полифил.

Бонус для читателей

Если вам интересно погрузиться в мир ИТ и при этом немного сэкономить, держите наш промокод на курсы Практикума. Он даст вам скидку при оплате, поможет с льготной ипотекой и даст безлимит на маркетплейсах. Ладно, окей, это просто скидка, без остального, но хорошая.