スプラインがforループで動作しないのはなぜですか？

Question

var arr = ['apples','oranges','pears','grapes']; 

for (var i=0; i<arr.length; i++) { 
    if (arr[i] == 'pears') { 
    arr.splice(i,0,'limes'); 
    } 
} 

これをjsfiddleで実行しようとすると、ページがフリーズします。 i（arr.splice(2,0,'limes')）の代わりに特定のインデックスを使用するか、アイテム（arr.splice(2,1)）を削除しようとすると、jsfiddleもフリーズします。 forループなしでこれを行い、代わりに特定のインデックスを選択すると、うまくいきます。ここで何が間違っていますか？ forループ内でスプライス作業（アイテムを削除せずに追加する）を行う方法はありますか？

FreeCodeCampのエディタをこのコードで使用すると、フリーズすることはありませんが、スプライスが使用されていないかのように元の配列に戻ります。ただし、変数を代入すると（forループのvar rem = arr.splice(i,1)）、実際に配列自体を変更することなく（配列はまったく同じです）、削除された項目が返されます。

Answer 1

arr.splice(i,0,'limes'); 

「ライム」要素「梨」要素前に注入します、 が効果的にそれを1つずつシフトします配列の末尾に向かって、 のようになります。次の反復で、コードはもう一度 'pear'になります。 とその前にもう1つの 'limes'を挿入します。

このような出力になりますブロック、場合は、簡単に自分の後に

console.log(arr); 

を追加することで、これを可視化することができます。

["apples", "oranges", "limes", "pears", "grapes"] 
    ["apples", "oranges", "limes", "limes", "pears", "grapes"] 
    ["apples", "oranges", "limes", "limes", "limes", "pears", "grapes"] 
    ["apples", "oranges", "limes", "limes", "limes", "limes", "pears","grapes"] 
    ... 

Answer 2

あなたには無限ループがあります。あなたはそれを取り除く代わりに、梨の前に新しい要素を追加しています。次の反復はあなたに再び梨を与えるでしょう。それがあなたの意図ならば、breakステートメントを追加するだけです。要素の梨を交換する場合は、次の機能を使用することができます。あなたがたが何も削除されていないことがわかりますMDN

array.splice（開始、deleteCount [、ITEM1 [、ITEM2 [、...]]]）

から

インデックスiの前に新しい要素を追加します（つまり、梨の前に）。

var arr = ['apples','oranges','pears','grapes']; 
 

 
for (var i=0; i<arr.length; i++) { 
 
    if (arr[i] == 'pears') { 
 
    arr.splice(i,1,'limes'); 
 
    
 
    } 
 
} 
 

 
console.log(arr);

Answer 3

これはforループがどのように動作するかです：

for (var i=0; i < arr.length; i++); 

i=0;は0でiを初期化します。次に、すべての繰り返しの初めに、この条件を確認します。i < arr.lengthtrueが次の繰り返しを実行している場合は、ループを終了します。各繰り返しの最後にi++が増え、iが増えます。

arr.splice(i,0,'limes')は配列を変更し、iに要素を追加するため、値pearsを次のインデックスにプッシュします。したがって、if (arr[i] == 'pears')は常にtrueとなり、この状態i < arr.lengthはfalseになることはありません：エンドレスfor ...