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.