Удаление объектов из массива - два разных подхода, два разных результата при анализе длины каждого массива

У меня есть два одинаковых массива: itemsOutput & itemsOutput2

Я хочу удалить эти объекты в массивах с помощью attributes.type = "DIMENSION". Для этого я нашел два разных метода:

Метод 1

jQuery.each(itemsOutput, function(i, val) {
    if(val.attributes.type == "DIMENSION") // delete index
      {
        delete itemsOutput[i];
      }
});
console.log(itemsOutput.length);

Метод 2

metrics = itemsOutput2.filter(function (el) {
            return el.attributes.type === "METRIC";
          });
console.log(metrics.length);

Хотя оба новых массива, похоже, имеют одинаковое количество объектов (и в обоих случаях все объекты с атрибутами .type = "DIMENSION" исчезли), консоль показывает два совершенно разных значения для длины каждого массива.

Метод 1 удаляет объекты, но длина такая же, как исходный массив (хотя, исследуя массив в консоли, я наблюдаю, что объекты сохраняют свои исходные индексы)

Метод 2 не только удаляет объекты, но также последовательно вызывает индексы. И для меня код кажется более понятным, поэтому я останусь с этим методом.

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

Ответ 1