How do you get out of the loop?

The cause of

In the context of visual data, the front-end page-driving is basically based on each function making more or less some judgment on the data, and this is where the loop breaks out.

scenario

Since the data of background feedback and front-end feedback are all data in list format, I used forEach first, which can better facilitate item production when forEach is used. Of course, forEach is also used habitarily. But the judgment made when iterating through forEach is that the whole function is not supported to pop, whereas the for loop does.

For loop, try return

1. I took it for granted that he would return.

for (let i = 0; i < 3; i++) {
  console.log(110);
  if (i === 1) {
   return}}Copy the code

When I hit return on the console, it will print 110 twice. When I hit return on the console, it will print 110 twice. I don’t know why. Illegal return statement

The return statement is used to specify the value returned by the function. A return statement can only appear inside a function, and appearing anywhere else in the code is a syntax error! Places can cause grammatical errors!

There is such a limitation, why did I not notice it before? After a close look at the previous code, it seems that my for is written inside the function, so there is no error.

A return statement terminates the execution of the function and returns a specified value to the caller.

A safer bet is ECMAScript® 2015 Language Specification Return. The specification also says that a return statement stops a function and returns the value to the caller.

2. How do you get out of the for loop since the return is not for? Those of you with a little background will think of break and Continute.

   Here I give the for in the ECMA specification first.

   A break statement terminates the current loop, switch statement, or label statement, and transfers program control to the statement immediately following the terminated statement. Break means more than just breaking out of the loop

   for (let j = 0; j < 3; j++) {
       console.log(112);
       if (j === 1) {
           break; }}Copy the code

3. continue

   Look at the code for the continue function, which is essentially a break; The continue.

       for (let j = 0; j < 3; j++) {
         if (j === 1) {
           continue;
         }
         console.log(j);
       }
   Copy the code

Why not jump out of forEach?

1. Test each wave with break and continue to see if the problem holds.

arr.forEach(function(item){
  if (item === 2) {
    break;
  }
  console.log(item);
})
arr.forEach(function(item){
  console.log(110)
  if (item === 2) {
    continue;
  }
  console.log(item);
})
Copy the code

Console all reported syntax error!! In particular, the continue prompt is not included in an iteration statement!!

Check out the MDNforEach, which explicitly states:

There is no way to abort or break out of the forEach loop except by throwing an exception. If you need this, using forEach() is wrong and you can use a simple loop instead. If you are testing whether an element in an Array meets a condition and you need to return a Boolean value, use array. every or array.some. The new methods find() or findIndex() can also be used for early termination of truth tests, if available.

In the meantime, check out forEach in the specification. Doesn’t seem to say why. So what to do?

Recall that the continue error message needs to be included in an iteration statement. Isn’t forEach an iteration statement? Isn’t that what it does? With these questions in mind, I took a quick look in the canonical directory and noticed that this Iteration statement is just the Iteration statement required by continue.

I clicked the button and had a look. Sure enough, there was no forEach, map, filter, etc.

I have tried to see the v8 source code implementation for forEach, but have not found it…

However, we can provide a _map that mimics the map method, which is essentially the same, but with different emphasis and some different implementation. ForEach (function(){}); forEach(function(){}); forEach(function(){}); forEach(function(){});

So, when I write a return inside a callback function, even if I do, I’m just jumping out of the callback function, not out of the forEach that called it!

demo

function a(i) {
  console.log(i);
  if(i === 1) {
    return}}function b(arr) {
  for(var i = 0; i < arr.length; i++) {
    a(i)
  }
}
var arr = [1.2.3.4.5]
b(arr)
Copy the code

Conclusion under

It is also good to dig out so much knowledge from this small problem, which is conducive to tamping js foundation. This can be better utilized in future similar business scenarios.