How to interrupt a forEach loop (details)

The content of this article is about how to interrupt the forEach loop (detailed introduction). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When using a for loop, you can use the break or return statement to end the for loop (return directly ends the function), but if you use the forEach loop, how do you get out of the loop?

Try to use break and return

First try to use the return statement----it has no effect

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

Given by MDN Official explanation

Why does this happen? Let’s take a look at the official documentation first.
The MDN document clearly states that the forEach loop cannot be exited.

Quoted from MDN
There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.
Note: There is no way to abort or break out of the forEach() loop except throwing an exception. If you need this, using the forEach() method is wrong.
If you need to terminate the loop early, you can use:
Simple loop
for...of loop
Array.prototype.every()
Array.prototype.some()
Array.prototype.find()
Array.prototype.findIndex()

Explore why break and return don’t work

Let’s first look at why return has no effect. break reports an error. The implementation of forEach can be expressed in code and can be written as the following structure

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

Using the return statement is equivalent to copying the return value to rs in each self-executing function, but it actually has no impact on the entire function. . The reason for using the break statement to report an error is that the break statement cannot appear in the function body in the JS interpreter.

How to get out of the forEach loop

MDN official recommended method

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

Other methods

1. Use for loop or for in loop instead

2. Use throw to throw an exception

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

3. Use judgment to run an empty loop

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

This way There are two problems. The first problem is that a tag variable is added globally. The second problem is that it seems to terminate the forEach loop, but in fact the number of loops has not changed. It just calls back when the conditions are not met. Nothing is executed. Let’s solve the first problem first, how to delete the newly added tag variable globally. In fact, forEach also has a second parameter, which represents the execution context of the callback, which is the value corresponding to this in the callback. Therefore, we can set the context to an empty object. This object naturally has no tag attribute, so when accessing this.tag, you will get undefined

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

4. Modify the index

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

Explanation:

Execution details of forEach

1. The scope of the traversal has been determined when the callback is executed for the first time, so pushing the content during the execution process will not affect the number of traversals. This is the same as for Loops are very different. In the following two cases, one will cause an infinite loop and the other will not

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. If the existing value is changed, the value passed to the callback is the moment when forEach traverses them. value.

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

3. Deleted items will not be traversed. If an already visited element is deleted while iterating (e.g. using shift()), subsequent elements will be skipped.

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

When the conditions are met, the following values ​​will be truncated. If the corresponding value cannot be seen during the next loop, the loop will end. However, this operation will destroy the original data, so we can use a A little trick is to truncate the array from 0 and then reassign it to the array, that is, array=array.splice(0).

This article is all over here. For more other exciting content, you can pay attention to the JavaScript Tutorial Video column on the PHP Chinese website!

The above is the detailed content of How to interrupt a forEach loop (details). For more information, please follow other related articles on the PHP Chinese website!