forEach ループを中断する方法 (詳細)

この記事の内容は、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(&#39;a&#39;)
}
//不会造成死循环
arr.forEach(item=>arr.push('a'))

2 を引き起こしません。既存の値が変更されると、その値はコールバックに渡されるのは、forEach がそれらを走査した瞬間です。

var arr=[1,2,3,4,5];
arr.forEach((item,index)=>{
    console.log(`time ${index}`)
    arr[index+1]=`${index}a`;
    console.log(item)
})

3. 削除されたアイテムはスキャンされません。反復中に(たとえば、shift()を使用して)すでに訪問した要素が削除された場合、後続の要素はスキップされます。

var arr=[1,2,3,4,5];
arr.forEach((item,index)=>{
    console.log(item)
    if(item===2){
        arr.length=index;
    }
})

条件を満たした場合、以下の値は切り捨てられます。次のループ中に該当する値が見つからない場合、ループは終了します。ただし、この操作は元のデータを破壊しますので、ちょっとしたトリックは、配列を 0 から切り捨ててから配列に再割り当てすることです (array=array.splice(0))。

この記事はすべてここにあります。その他の興味深いコンテンツについては、PHP 中国語 Web サイトの

JavaScript チュートリアル ビデオ 列に注目してください。

以上がforEach ループを中断する方法 (詳細)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。