この記事の内容は、forEach ループの中断方法 (詳細な導入) に関するものであり、一定の参考価値があります。必要な友人は参照してください。
for ループを使用する場合、break または return ステートメントを使用して for ループを終了できます (return は関数を直接終了します)。しかし、forEach ループを使用する場合、ループから抜け出すにはどうすればよいでしょうか?
break と return を使用してみてください
最初に return ステートメントを使用してみてください----効果はありません
[1,2,3,4,5].forEach(item=>{ if(item===2){ return } console.log(item); })
Given by MDN 公式説明
なぜこのようなことが起こるのでしょうか?まずは公式ドキュメントを見てみましょう。
MDN ドキュメントには、forEach ループを終了できないことが明確に記載されています。
MDN から引用
例外をスローする以外に forEach() ループを停止または中断する方法はありません。そのような動作が必要な場合、forEach() メソッドは間違ったツールです。
注意: 例外をスローする以外に、forEach() ループを中止したり、ループから抜け出す方法はありません。これが必要な場合、forEach() メソッドを使用するのは間違っています。
ループを早期に終了する必要がある場合は、次を使用できます。
単純なループ
for...ofloop
Array.prototype.every()
Array.prototype.some()
Array.prototype.find()
Array.prototype.findIndex()
break と return が機能しない理由を探る
まず見てみましょうなぜ return は効果がありません。break はエラーを報告します。forEach の実装はコードで表現でき、次の構造として記述できます。
const arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { const rs = (function(item) { console.log(item); if (item > 2) return false; })(arr[i]) }
return ステートメントを使用することは、戻り値を rs にコピーすることと同じです。それぞれの自己実行関数ですが、実際には関数全体には影響しません。 Break ステートメントを使用してエラーを報告する理由は、JS インタープリターの関数本体に Break ステートメントを含めることができないためです。
forEach ループから抜け出す方法
MDN 公式推奨の方法
// every在碰到return false的时候,中止循环。some在碰到return ture的时候,中止循环。 var a = [1, 2, 3, 4, 5] a.every(item=>{ console.log(item); //输出:1,2 if (item === 2) { return false } else { return true } }) var a = [1, 2, 3, 4, 5] a.some(item=> { console.log(item); //输出:1,2 if (item === 2) { return true } else { return false } })
その他の方法
1. 代わりに for ループまたは for in ループを使用します
2. throw を使用して例外をスローします
try { [1, 2, 3, 4, 5].forEach(function(item) { if (item=== 2) throw item; console.log(item); }); } catch (e) {}
3. 判断を使用して空のループを実行します
var tag; [1, 2, 3, 4, 5].forEach(function(item){ if(!tag){ console.log(item); if(item===2){ tag=true; } }
This way 問題は 2 つあります。1 つ目は、タグ変数がグローバルに追加されることです。2 つ目は、forEach ループが終了しているように見えますが、実際にはループの数は変わっていないことです。単に呼び出しているだけです。条件が満たされない場合は、何も実行されません。まず最初の問題、新しく追加されたタグ変数をグローバルに削除する方法を解決しましょう。実際、forEach にはコールバックの実行コンテキストを表す 2 番目のパラメーターもあります。これは、コールバック内のこれに対応する値です。したがって、コンテキストを空のオブジェクトに設定することができます。このオブジェクトには当然タグ属性がないため、this.tag にアクセスすると、未定義
[1, 2, 3, 4, 5].forEach(function(item){ if(!this.tag){ console.log(item); if(item===2){ this.tag=true; } } },{})
4 が返されます。インデックスを変更します
var array=[1, 2, 3, 4, 5] array.forEach(item=>{ if (item == 2) { array = array.splice(0); } console.log(item); })
説明:
forEach の実行詳細
1. トラバーサルのスコープはコールバックが初めて実行されるときに決定されるため、実行プロセス中にコンテンツをプッシュしても、走査回数。これは for ループと同じです。ループは大きく異なります。次の 2 つのケースでは、1 つは無限ループを引き起こし、もう 1 つは #
var arr=[1,2,3,4,5] //会造成死循环的代码 for(var i=0;i<arr.length;i++){ arr.push('a') } //不会造成死循环 arr.forEach(item=>arr.push('a'))
var arr=[1,2,3,4,5]; arr.forEach((item,index)=>{ console.log(`time ${index}`) arr[index+1]=`${index}a`; console.log(item) })
var arr=[1,2,3,4,5]; arr.forEach((item,index)=>{ console.log(item) if(item===2){ arr.length=index; } })
JavaScript チュートリアル ビデオ 列に注目してください。
以上がforEach ループを中断する方法 (詳細)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。