Удаление элементов из массива в for loop без остановки JS

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

Чтобы избежать замешательства с индексами, применяйте обратное итерирование:

for (let i = array.length – 1; i >= 0; i--) {
  if (isUnwanted(array[i])) array.splice(i, 1);
}

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

array = array.filter(item => !isUnwanted(item));

Выбор за вами: использовать ли обратный цикл для «по месту» операций, или .filter() для создания нового массива.

Почему переворачивать циклы?

Применение обратного цикла позволяет сохранять корректные индексы при удалении элементов с помощью .splice(). При этом индексы ранее обработанных элементов остаются неизменными.

Настройка прямого цикла

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

for (let i = 0; i < array.length; i++) {
  if (isUnwanted(array[i])) {
    array.splice(i, 1);
    i--; // Возвращаем индекс назад
  }
}

Таким образом, вы не пропустите элементы, которые идут после удалённых.

Filter: ваш верный помощник-робот

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

const cleanArray = array.filter(item => !isUnwanted(item));

Метод создаёт новый массив, не меняя исходный. Это идеальный пример неизменяемости.

Почему выбрать именно эти методы?

• Если ваши данные велики и задачи производительности актуальны, выберите обратный цикл. Он сэкономит время и память.
• Для поклонников функционального программирования или когда надо сохранить исходные данные без изменений, хорошо подойдёт .filter().

Нюансы циклов: как справиться со сложностями

Условные тонкости

Удаление элементов может быть сложным, если применяется нетривиальная логика:

let count = 0;
array.forEach((item, index) => {
  if (complexLogic(item, index, count)) {
    array.splice(index – count, 1);
    count++; // Учитываем удалённые элементы
  }
});

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

ES6 и стрелочные функции

Стрелочные функции упрощают синтаксис и делают код более лаконичным:

array = array.filter(item => !isUnwanted(item));

Опасности циклов и способы их преодоления

Затраты времени

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

Пустые места после удаления

Применение оператора delete создаёт «дыры» в массиве, заполняя их undefined.

Тестирование различных сценариев

Test your code with arrays of different contents and sizes to prevent errors. Тестируйте код с массивами различного содержания и размера, чтобы исключить ошибки.

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

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

for (let i = items.length – 1; i >= 0; i--) {
    if (items[i].needsToBeRemoved()) {
        items.splice(i, 1);  // Искусный ход
    }
}

После удаления нежелательных элементов всё выглядит опрятно.

За пределами циклов: профессиональные подходы

Использование Push вместо Splice

Добавляйте нужные элементы в новый массив, вместо удаления ненужных:

let safeHouse = [];
for (let item of array) {
  if (!isUnwanted(item)) safeHouse.push(item);
}

Такой подход устраняет необходимость корректировки индексов.

Сочетание Spread и Filter

Создание нового массива без нежелательных элементов может быть выполнено в одну строку:

let goldenArray = [...array].filter(item => !isUnwanted(item));

Советы по управлению массивами

Выбирайте метод в соответствии с необходимостью изменяемости, скоростью и чистотой кода.

Приветствуйте современные подходы

Стрелочные функции и оператор расширения предоставляют силу для написания кратких и эффективных программ.

Используйте встроенные инструменты

Встроенные методы массивов в JavaScript облегчают работу и уменьшают вероятность ошибок.

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

1. Array.prototype.splice() – JavaScript | MDN — Углублённая информация о методе splice.
2. Array.prototype.filter() – JavaScript | MDN — Всё, что нужно знать о методе filter.
3. Как удалить определённый элемент из массива в JavaScript? – Stack Overflow — Обсуждение по теме удаления элементов из массива.
4. For Loop для массивов и NodeList в JavaScript | DigitalOcean — Обзор основ цикла for.
5. Оператор delete в JavaScript — Объяснение работы оператора delete.
6. Как удалить дубликаты из массива в ES6 | by Samantha Ming | DailyJS | Medium — Подсказки по удалению дубликатов из массива с использованием ES6.
7. Методы работы с массивами | JavaScript.info — Руководство по методам работы с массивами.