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.

---

プログラミング学習を体系的に進めたい人へ

独学で基礎を確認したあとに、質問できる環境や転職・副業向けの学習サポートも比べたい人は、プログラミングスクールの比較記事も参考にしてください。学習目的、料金、受講期間、サポート範囲を分けて見ると、自分に合う学び方を選びやすくなります。

• プログラミングスクール総合ランキング
• プログラミングスクール一覧
• プログラミング独学の進め方