Как правильно юзать splice для итерируемых типов в js

Подскажите пожалуйста, как работают индексы во 1-ом forEach методе, приведенном ниже, так как результат отличается от 2-го. Как он удаляет элементы стоящие рядом (хотя должен перепрыгнуть) и оставляет подходящие условию элементы после 4-ки ? И как вообще юзать splice, если нужно из исходного массива удалить определенные данные

let i1 = [1, 2, 2, 3, 2, 2, 4, 2, 5, 9, 2, 11];
i1.forEach(el=>{
    if(el==2){
        i1.splice(i1.indexOf(el), 1) }})
   Итого i1 = [1, 3, 4, 2, 5, 9, 2, 11]

let i2 = [1, 2, 2, 3, 2, 2, 4, 2, 5, 9, 2, 11];
i2.forEach((el, index)=> {
    if (el==2) {
         i2.splice(index, 1) }})
    Итого i2 = [1, 2, 3, 2, 4, 5, 9, 11]