JavaScript Forループの中で要素を消すには？配列の後ろから消す

Forループの中で配列の要素を消そうとするとおかしくなる。

以下のjavascriptは、array1で定義した配列のうち、iphoneで始まる要素を削除しています。

const array1 = ['android-1', 'iphone-1', 'iphone-2', 'android-2', 'iphone-3'];
for (var i=0; i<array1.length; i++) {
   if( array1[i].startsWith('iphone') ) array1.splice(i,1);
}
document.getElementById("result1").textContent = array1;

なのでandroid-1と、android-2だけが配列に残って欲しいところですが結果は

結果

android-1,iphone-2,android-2

とiphone-2も残ってしまっています。

図示すると以下のようにforループの2週目でiphoneから始まる要素を削除しますが、要素が消えるのでiphone2だったところが前に詰まるイメージでしょうか。

で、変数iがインクリメントされてi=2になると、iphone2の要素はとばされてandroid2が検査されてしまっているのです。

これを回避するために以下のようにしました。

const array2 = ['android-1', 'iphone-1', 'iphone-2', 'android-2', 'iphone-3'];
for (var i=array2.length-1; i>=0; i--) {
   if( array2[i].startsWith('iphone') ) array2.splice(i,1);
}
document.getElementById("result2").textContent = array2;

これでarray2の後ろからforループをまわしてるので問題なく動きますね。

CodePenでも動きを確認できます。

See the Pen
array-delete-in-for-loop by pghappy (@pghappy)
on CodePen.

See the Pen
array-delete-in-for-loop by pghappy (@pghappy)
on CodePen.