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.
プログラミングスクールおすすめラ…


卒業生によるテックアカデミーとテックキャンプの違いを比較 | プログラミングスクールおすすめラボ
テックアカデミーとテックキャンプを3カ月ずつ受講した私(元受講生)がプログラミングスクール両者の違い、メリットデメリットを比較し皆さんの選択を助けます。 人生をよ…
プログラミングスクールおすすめラ…


卒業生によるテックアカデミーと侍エンジニア塾の比較 | プログラミングスクールおすすめラボ
ここではテックアカデミーと侍エンジニア塾とそれぞれ3カ月受講したわたくしが、学習スタイルの違いを比較したり、メリット・デメリットを比較いきます。 料金は決して安い…
プログラミングスクールおすすめラ…


卒業生によるテックキャンプと侍エンジニア塾の比較 | プログラミングスクールおすすめラボ
ここでは実際に入会して3ヶ月受講した私がテックキャンプと侍エンジニア塾という2つのプログラミングスクールを比較していきます。数か月という時間をかけ学び、安くはない…