Удаление конкретной строки из массива в JavaScript: методы

Быстрый ответ

Чтобы удалить определённую строку из массива в JavaScript, используйте метод filter():

const purgedArr = arr.filter(el => el !== 'targetString');

Теперь новый массив purgedArr не включает в себя заданную строку 'targetString', которая пристуствовала в исходном массиве arr.

Подробный разбор решения

Для того чтобы отстранить все вхождения заданной строки, мы используем filter():

const fruits = ['apple', 'banana', 'apple', 'mango'];
const result = fruits.filter(fruit => fruit !== 'apple');
// result: ['banana', 'mango']

Словно мы отсеиваем все яблоки из фруктовой корзины!

Если требуется убрать лишь первое вхождение строки, то используем splice(), но предварительно проверяем наличие элемента:

const index = arr.indexOf('target');
if (index !== -1) {
    arr.splice(index, 1);  // Вырезаем то, что не нужно!
}
// В массиве arr будет удалено первое вхождение 'target'

Для удаления всех экземпляров строки пробежимся по массиву с использованием splice() в обратном порядке:

for (let i = arr.length – 1; i >= 0; i--) {
    if (arr[i] === 'target') {
        arr.splice(i, 1);
    }
}
// Все 'target' из arr удалены! До свидания!

Заметьте, что indexOf() может вызвать проблемы в старых браузерах, в том числе в Internet Explorer, поэтому рассмотрите возможность использования полифилла.

Ловушки и подводные камни

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

for (let i = 0; i < arr.length; i++) {
    if(arr[i] === 'target') {
        arr.splice(i, 1);
    }
}
for (let i = arr.length – 1; i >= 0; i--) { // Вот корректный подход!
    if(arr[i] === 'target') { 
        arr.splice(i, 1);
    }
}

Также не забудьте убедиться, что 'target' действительно есть в массиве, чтобы в нём не образовывались "пустоты":

const idx = arr.indexOf('target');
if (idx > -1) {
  arr.splice(idx, 1); // Удаляем элемент 'target'
}

Производительность и передовые практики

Для обработки больших массивов более предпочтительным с точки зрения производительности будет filter():

const celebArr = largeArray.filter(item => item !== 'paparazzi'); // Звёздам требуется уединение!

Если массив содержит дубликаты строк, их можно удалить вот так:

const uniqueArr = [...new Set(arr)]; // Оставляем только уникальные значения!
const result = uniqueArr.filter(el => el !== 'target');

Визуализация

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

Массив-поезд 🚂: [📦, 📦'string'📦, 📦, 📦'string'📦, 📦]

Мы хотим удалить все вагоны с 'string':

array = array.filter(car => car !== 'string');  // Прощайте!

И мы уже в пути к Грузии, как в песне 🎵 Midnight Train to Georgia! 🎵

🚂 После: [📦, 📦, 📦]

Визуализация кода в реальном времени

Повторите каждый шаг при работе методов filter(), splice() и indexOf(), просмотрев демонстрацию кода в реальном времени:

• Онлайн-визуализаторы кода JavaScript дают вам возможность увидеть, как происходят изменения в массивах.
• Используйте инструменты разработчика в браузере для лучшего понимания и отладки операций с массивами.

Продвинутый анализ

Шаблон неизменяемых данных

Рекомендуется не изменять исходные массивы. Создайте новый массив, например, с помощью метода filter(), оставив оригинал неизменным.

Подробнее об этом расскажет наш спикер на видео

Используйте функциональное программирование

Последовательности вызовов напоминают рассуждения Шерлока Холмса и ведут к более стройному и понятному коду:

const result = array
    .filter(el => el !== 'B')    
    .map(el => el.toLowerCase()) 
    .sort();

Полезные материалы

1. Array.prototype.filter() – JavaScript | MDN — глубокий гайд по фильтрации элементов массива.
2. Array.prototype.indexOf() – JavaScript | MDN — помогает определить позицию элемента.
3. Array.prototype.splice() – JavaScript | MDN — для настройки массива под ваши задачи.
4. How can I remove a specific item from an array in JavaScript? – Stack Overflow — сообщество поделится решениями и примерами для работы с массивами.
5. JavaScript Array filter() Method — руководство по применению filter().
6. Array methods — всё о методах массивов в JavaScript.
7. Higher-Order Functions :: Eloquent JavaScript — поймёте суть функций высшего порядка в JavaScript.