So unterbrechen Sie eine forEach-Schleife (Details)

Der Inhalt dieses Artikels befasst sich mit der Unterbrechung der forEach-Schleife (ausführliche Einführung). Ich hoffe, dass er für Sie hilfreich ist.

Wenn Sie eine for-Schleife verwenden, können Sie die break- oder return-Anweisung verwenden, um die for-Schleife zu beenden (return beendet die Funktion direkt). Wenn Sie jedoch eine forEach-Schleife verwenden, wie kommen Sie dann aus der Schleife heraus?

Versuchen Sie, Break und Return zu verwenden

Versuchen Sie zunächst, die Return-Anweisung zu verwenden ---- es funktioniert nicht

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

Wie von MDN gegeben Offizielle Erklärung

Warum passiert das? Werfen wir zunächst einen Blick auf die offizielle Dokumentation.
Im MDN-Dokument heißt es eindeutig, dass die forEach-Schleife nicht beendet werden kann.

Zitiert aus MDN
Es gibt keine andere Möglichkeit, eine forEach()-Schleife zu stoppen oder zu unterbrechen, als eine Ausnahme auszulösen. Wenn Sie ein solches Verhalten benötigen, ist die forEach()-Methode das falsche Werkzeug.
Hinweis: Es gibt keine Möglichkeit, die forEach()-Schleife abzubrechen oder zu verlassen, außer eine Ausnahme auszulösen. Wenn Sie dies benötigen, ist die Verwendung der Methode forEach() falsch.
Wenn Sie die Schleife vorzeitig beenden müssen, können Sie Folgendes verwenden:
Einfache Schleife
for...of-Schleife
Array.prototype.every()
Array.prototype.some()
Array.prototype.find()
Array.prototype.findIndex()

Entdecken Sie, warum Break und Return nicht funktionieren

Lassen Sie uns einen ersten Blick darauf werfen at why return hat keine Auswirkung. Die Implementierung von forEach kann im Code ausgedrückt werden und kann als folgende Struktur geschrieben werden:

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])
}

Die Verwendung der return-Anweisung entspricht dem Kopieren des Rückgabewerts nach rs in Jede selbstausführende Funktion hat jedoch keinen Einfluss auf die gesamte Funktion. Der Grund für die Verwendung der Break-Anweisung zum Melden eines Fehlers besteht darin, dass die Break-Anweisung nicht im Funktionskörper des JS-Interpreters erscheinen kann.

So umgehen Sie die forEach-Schleife

MDN offiziell empfohlene Methode

// 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
    }
})

Andere Methoden

1. Verwenden Sie eine for-Schleife oder eine for-in-Schleife anstelle von

2. Verwenden Sie throw, um eine Ausnahme auszulösen

try {
  [1, 2, 3, 4, 5].forEach(function(item) {
    if (item=== 2) throw item;
    console.log(item);
  });
} catch (e) {}

3. Verwenden Sie Urteilsvermögen, um eine leere Schleife auszuführen 🎜>

var tag;
[1, 2, 3, 4, 5].forEach(function(item){
    if(!tag){
        console.log(item);
        if(item===2){
            tag=true;
        }
    }

So gibt es zwei Probleme: Das erste Problem besteht darin, dass eine Tag-Variable global hinzugefügt wird. Das zweite Problem besteht darin, dass sie die forEach-Schleife zu beenden scheint, aber tatsächlich hat sich die Anzahl der Schleifen nicht geändert Ruft einfach zurück, wenn die Bedingungen nicht erfüllt sind. Lösen wir zunächst das erste Problem, wie die neu hinzugefügte Tag-Variable global gelöscht wird. Tatsächlich verfügt forEach über einen zweiten Parameter, der den Ausführungskontext des Rückrufs darstellt. Dies ist der entsprechende Wert im Rückruf. Daher können wir den Kontext auf ein leeres Objekt setzen. Dieses Objekt hat natürlich kein Tag-Attribut. Wenn Sie also auf this.tag zugreifen, erhalten Sie undefiniert

[1, 2, 3, 4, 5].forEach(function(item){
    if(!this.tag){
        console.log(item);
        if(item===2){
            this.tag=true;
        }
    }
},{})

4. Ändern Sie den Index

var array=[1, 2, 3, 4, 5]
array.forEach(item=>{
  if (item == 2) {
    array = array.splice(0);
  }
  console.log(item);
})

Erläuterung:

Ausführungsdetails von forEach

1 Der Durchlaufbereich wurde bei der ersten Ausführung des Rückrufs bestimmt, sodass das Verschieben des Inhalts während des Ausführungsprozesses keinen Einfluss auf die Anzahl hat Dies ist das Gleiche wie bei Schleifen. In den folgenden beiden Fällen wird einer eine Endlosschleife verursachen und der andere nicht. Wenn der vorhandene Wert geändert wird, wird der Wert übergeben zum Rückruf ist der Moment, in dem forEach sie durchläuft.

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'))

3. Gelöschte Elemente werden nicht durchlaufen. Wenn ein bereits besuchtes Element während der Iteration gelöscht wird (z. B. mit Shift()), werden nachfolgende Elemente übersprungen.

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

kürzt die folgenden Werte, wenn die Bedingungen erfüllt sind. Wenn der entsprechende Wert während der nächsten Schleife nicht angezeigt wird, wird die Schleife jedoch beendet, sodass wir dies tun können Ein kleiner Trick besteht darin, das Array von 0 abzuschneiden und es dann dem Array neu zuzuweisen, also array=array.splice(0).

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte

JavaScript-Tutorial-Video

auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonSo unterbrechen Sie eine forEach-Schleife (Details). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!