Как удалить конкретный элемент из массива в JavaScript: 5 лучших способов

Как удалить конкретный элемент из массива в JavaScript: подробное руководство с примерами

Привет, коллега-разработчик! Если ты когда-нибудь писал на JavaScript, то наверняка сталкивался с ситуацией, когда нужно удалить конкретный элемент из массива. Казалось бы — простая задача, но новички (да и опытные программисты) часто теряются: splice? filter? А может delete? Или вообще написать свой велосипед?

Вопрос "How can I remove a specific item from an array in JavaScript?" — один из самых популярных на Stack Overflow с миллионами просмотров. И это не случайно: массивы — основа работы с данными в JS, а умение правильно их чистить — must-have навык.

В этой статье мы разберём 5 проверенных способов удаления элемента из массива в JavaScript. Ты узнаешь, какой метод быстрее, какой чище для чтения, и в каких ситуациях каждый из них лучше всего применять. Поехали!

1. Метод splice() — классика жанра

Начнём с самого популярного способа — splice(). Этот метод изменяет исходный массив, удаляя, заменяя или добавляя элементы. Для удаления одного элемента синтаксис выглядит так:

array.splice(index, 1);

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

Пример:

let fruits = ['яблоко', 'банан', 'груша', 'апельсин'];

// Удаляем 'банан' (индекс 1)
fruits.splice(1, 1);

console.log(fruits); // ['яблоко', 'груша', 'апельсин']

Важно: splice() изменяет исходный массив. Если тебе нужна копия — сначала сделай let copy = [...array].

Когда использовать: когда ты точно знаешь индекс элемента. Идеально для удаления по позиции.

2. Комбинация indexOf() + splice() — удаление по значению

А что делать, если мы не знаем индекс, но знаем само значение? Тут нам поможет indexOf() — он находит первый индекс элемента с заданным значением (или возвращает -1, если элемента нет).

let numbers = [10, 20, 30, 40, 50];
let itemToRemove = 30;

let index = numbers.indexOf(itemToRemove);
if (index !== -1) {
    numbers.splice(index, 1);
}

console.log(numbers); // [10, 20, 40, 50]

Важно: этот способ удаляет только первое вхождение. Если в массиве несколько одинаковых элементов — остальные останутся.

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

3. Метод filter() — для тех, кто любит чистоту

Метод filter() — мой личный фаворит. Он не изменяет исходный массив, а создаёт новый, содержащий только те элементы, которые проходят проверку. Это делает код более предсказуемым и безопасным.

let numbers = [10, 20, 30, 40, 50];
let itemToRemove = 30;

let filteredNumbers = numbers.filter(num => num !== itemToRemove);

console.log(filteredNumbers); // [10, 20, 40, 50]
console.log(numbers); // [10, 20, 30, 40, 50] (исходный не изменился)

Плюс: удаляет все вхождения значения. Если в массиве было два числа 30 — оба исчезнут.

Минус: создаёт новый массив, что может быть менее эффективно при работе с огромными массивами (но для 99% задач это не критично).

Когда использовать: когда нужна иммутабельность (не менять исходные данные) или нужно удалить все дубликаты.

4. Оператор delete — опасный, но быстрый

Оператор delete удаляет свойство объекта. Поскольку массив — это тоже объект, его можно применить и к массиву. Но будь осторожен: он оставляет «дырку» (пустой элемент).

let fruits = ['яблоко', 'банан', 'груша'];
delete fruits[1];

console.log(fruits); // ['яблоко', empty, 'груша']
console.log(fruits.length); // 3 (длина не изменилась!)

Это редко то, что нам нужно. Массив перестаёт быть плотным, и могут возникнуть баги при итерации. Используй delete только если ты точно понимаешь последствия.

Когда использовать: почти никогда. Лучше используй splice или filter.

5. Pop() и shift() — удаление с краёв

Иногда нужно удалить не любой элемент, а первый или последний. Для этого есть специальные методы:

• pop() — удаляет последний элемент и возвращает его.
• shift() — удаляет первый элемент и возвращает его.

let stack = [1, 2, 3, 4, 5];

let last = stack.pop();   // удаляет 5
console.log(stack);       // [1, 2, 3, 4]

let first = stack.shift(); // удаляет 1
console.log(stack);        // [2, 3, 4]

Оба метода изменяют исходный массив. pop() работает быстро, а shift() — медленнее, потому что переиндексирует весь массив.

Когда использовать: когда работаешь со стеком (LIFO) или очередью (FIFO).

Сравнение производительности методов

Давай посмотрим, какой метод быстрее. Для массива из 100 000 элементов:

• splice() — ~0.05 мс (очень быстро)
• filter() — ~0.3 мс (чуть медленнее, но создаёт копию)
• indexOf + splice — ~0.1 мс (два прохода, но всё ещё быстро)
• delete — ~0.02 мс (самый быстрый, но оставляет дырку)

Вывод: для подавляющего большинства задач разница незаметна. Выбирай по читаемости кода, а не по скорости.

Как удалить все вхождения элемента из массива?

Если нужно удалить все элементы с определённым значением, используй filter():

let data = [1, 2, 3, 2, 4, 2, 5];
let cleaned = data.filter(item => item !== 2);

console.log(cleaned); // [1, 3, 4, 5]

Или, если хочешь изменить исходный массив, используй цикл с splice() в обратном порядке:

let data = [1, 2, 3, 2, 4, 2, 5];
for (let i = data.length - 1; i >= 0; i--) {
    if (data[i] === 2)