Видалення елементів із масиву в JavaScript

Видалення даних із масиву – це майже як видалення завдань із Jira: спочатку здається просто, а потім ламаєш половину логіки. Якщо ти хоч раз думав, як видалити останній елемент із масиву JS, – ти за адресою. У цьому гайді розберемо все: від видалення елемента масиву JavaScript до лайфхаків, як очистити масив JS без втрати посилань. Хочеш ще більш детально? Тоді тобі на курси програмування FoxmindEd.

Основні методи видалення елементів із масиву

Видалення останнього елемента масиву

Найпростіший кейс. Коли тобі потрібно прибрати останній запис – наприклад, найсвіжіший лог або останню дію користувача – JS пропонує банальний, але робочий спосіб. Метод pop() видаляє останній елемент масиву JS і повертає його значення. Видалення відбувається швидко, без проблем.

const logs = ['start', 'process', 'done'];

logs.pop(); // видалить 'done'

Хочеш видалити останнє завдання з “to-do” – welcome, це твій метод. Але пам’ятай, що pop() мутує оригінальний масив, тож якщо у тебе там відбувається реактивність або ти передаєш дані в інші компоненти, не забудь про це.

Видалення першого елемента масиву

Якщо твій масив – це свого роду черга, де перший прийшов – перший пішов, тоді тобі потрібен shift(). Він робить прямо протилежне pop(): видаляє перший елемент і зсуває всі інші.

const queue = ['task1', 'task2', 'task3'];

queue.shift(); // видалить 'task1'

Може бути корисно в сценаріях, де йде послідовна обробка, наприклад, черга на деплой або пуші. Але врахуй: shift() працює трохи повільніше pop(), тому що потрібно перерахувати індекси. Тож на великих масивах акуратніше – можна випадково “нафейлити” продуктивність.

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

Іноді тобі потрібно вирізати не перший і не останній елемент – а щось прямо з середини, як баг у коді в п’ятницю ввечері. Ось тут рятує splice(). Він дозволяє вирізати шматок масиву за індексом, а заодно вставити щось нове (якщо це необхідно).

const bugs = ['bug1', 'bug2', 'bug3'];

bugs.splice(1, 1); // видалить 'bug2'

Синтаксис: splice(index, count). Працює дуже гнучко. Але теж мутує масив, тож не забудь: якщо об’єкт – між компонентами, то можуть бути сюрпризи.

Очищення масиву: як видалити всі елементи

І ось класика: тобі потрібно очистити масив JS, але не втрачати саме посилання на нього. Таке буває, якщо масив передано як залежність – наприклад, в Angular через @Input. Ми не можемо в цьому випадку використовувати квадратні дужки. Найкраще використовувати array.length.

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

Часто використовувані функції для роботи з масивами

Метод pop() – видалення останнього елемента

pop() – це немов git reset HEAD~1 у світі масивів: відкат останньої дії. Простий, надійний, безпечний (якщо не забуваєш, що він мутує масив). Його часто використовують для реалізації стека або історії дій.

Метод shift() – видалення першого елемента

Якщо pop() – це стек, то shift() – черга. Усе, що приходить першим, йде першим. Використовується в циклічних чергах, таймерах і навіть під час читання буфера подій.

Метод splice() – видалення за індексом

splice() – універсальний солдат. Можна видаляти, додавати, замінювати. Дає контроль, якого не вистачає у pop() і shift(). Головне – не переплутай зі slice(), тому що slice() не мутує масив, а splice() робить це з легкістю і без жалю.

Метод filter() – видалення елементів за умовою

А ось якщо тобі потрібно видалити з масиву JS не конкретний індекс, а все, що не підходить під умову, то filter() на допомогу. Це спосіб створити новий масив, відсіявши непотрібні елементи. І так, він не мутує оригінал.

const users = [{active: true}, {active: false}];

const activeUsers = users.filter(u => u.active);

Корисно, коли треба відсіяти невалідні записи, порожні поля або завершені завдання. Часто використовується у зв’язці з формами та API-відповідями.

Коли і навіщо використовувати різні методи видалення?

Видалення елементів для оптимізації

Ти ж не хочеш, щоб твій фронт гальмував при кожному кліці? Вибір методу видалення безпосередньо впливає на продуктивність. Наприклад, splice() і shift() можуть працювати повільно на довгих масивах через перерахунок індексів. Тож якщо чистиш масив щосекунди – подумай про filter() або зміну підходу.

Фільтрація масиву залежно від умов

Буває, дані приходять із бека, і ти не можеш їх контролювати. Тоді фільтрація – найкращий спосіб привести масив до ладу. Використовуй filter() – і вичисти все, що не відповідає логіці програми. Це безпечно і читабельно.

Вибір методу видалення: простота vs продуктивність

Якщо тобі важлива швидкість – тоді краще вибрати метод pop() або length = 0. Скажімо, якщо потрібна гнучкість – тоді використовуй splice() або filter(). Але пам’ятай: js array видалити елемент можна по-різному. Але тут важливо, щоб баланс був збережений, оскільки ти пам’ятаєш, що код має бути і читабельним, і оптимальним.

Практичні приклади та поради

Як правильно використовувати splice() для складних завдань

Припустимо, тобі потрібно видалити елементи, що йдуть підряд. Тоді в цьому випадку тебе виручить метод splice().

А ось коли в масиві лежать об’єкти, тоді спочатку шукаємо індекс:

const users = [{id: 1}, {id: 2}];

const index = users.findIndex(u => u.id === 2);

if (index !== -1) users.splice(index, 1);

Очищення масиву без зміни посилання (length = 0)

Як уже говорили вище: якщо тобі потрібно очистити масив JS, зберігши посилання (особливо у фреймворках на кшталт React або Vue), просто обнули довжину. Це безпечніше, ніж відтворення масиву.

Підпишіться на наш Ютуб-канал! Корисні відео для програмістів чекають на вас! YouTube

Оберіть свій курс програмування! Шлях до кар’єри програміста починається тут! Подивитись

Часті помилки під час видалення елементів

• Використовувати delete для видалення елементів масиву – не потрібно. Він залишає undefined замість видаленого елемента.
• Плутати splice() і slice() – стандартна пастка.
• Змінювати масив під час ітерації по ньому – легко зламати логіку. Краще використовуй filter() і map().

Сподіваюся, тепер ти не просто знаєш, як видалити елемент із масиву JS, а й розумієш, коли це робити найкраще. І так, якщо тобі доводилося писати delete array[i] – теж чудовий варіант, ми всі через це проходили. Але краще так більше не робити.