This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

preface

This series will be divided into several articles on js related “unpopular knowledge”, here “unpopular knowledge” is the knowledge that most developers do not pay attention to, or is unexpected knowledge. These knowledge points may not be very helpful in the real interview, development, or even any use at all, but I hope to make everyone happy, and to expand the scope of knowledge.

Most of the knowledge in this series is based on the wangdoc.com documentation written by Yifeng Ruan. I strongly recommend that web front-end developers read this documentation, which is both a good helper for getting started and a useful tool for expanding their knowledge.

Any references to this series will be indicated at the end of the article.

The sample articles are all verified by me. If there are any mistakes, please correct them in the comments section.

Jump out of the loop

We all know that javascript “break out of a loop” uses the keyword break or continue, with a single break to break out of the current loop and a single continue to break out of the loop once (” single “is emphasized here for a reason, so see below).

Suppose we now have two circular bodies, as follows:

for (var i=0; i<2; i++) {
  for (var j=0; j<2; j++) {
    console.log(i, j)
  }
}
Copy the code

If j===1, it is not allowed to output the values of I and j and jump out of all the bodies.

You might write something like this, add a variable to indicate whether or not you need to jump out of the loop, and then do that in the top loop again.

var flag = false
for (var i=0; i<2; i++) {
  for (var j=0; j<2; j++) {
    if (j === 1) {
        flag = true
        break
    }
    console.log(i, j)
  }
  if (flag) {
      break}}Copy the code

Normal output from the console is

0 0
Copy the code

That’s fine, but if there’s not just one nested loop body, but a hundred nested loop bodies and the one with the parameter j is the last one, would you have to write a hundred judgments? That’s a lot of trouble.

Of course, in fact, if the code is in the body of the function, you can use return, but that’s not the case here.

Break + label

Es5 has an easier way to break out of the body of the specified loop, which is to use the es5 label, as follows:

top:for (var i = 0; i < 2; i++) {
  for (var j = 0; j < 2; j++) {
    if (j === 1) {
      break top
    }
    console.log(i, j)
  }
}
Copy the code

The above code has two changes in the original code:

1. One change is to add the code top: before the first for. The top before the colon is the es5 tag. The tag name can be customized (top, myTop, etc.), but cannot be a JS keyword. What this means is to label the first environment outside the circulator as top label.

2. Another change is that when j === 1, the keyword break is not used alone, but in conjunction with the tag top. Break top means to jump directly out of the middle body of the loop into the environment where the tag top is located. In other words, the program jumps directly out of the first and second body of the loop.

This way, no matter how many loop bodies are embedded in it, it can be solved with a simple break top.

We can also place the tag top on the line above for

top:
for (var i = 0; i < 2; i++) {
  ...
}
Copy the code

You can also add a code block, which might make it a little easier to understand.

top: {
  for (var i = 0; i < 2; i++) { ... }}Copy the code

Continue + label

Continue can also be used with a tag, such as:

top2:
for (var i = 0; i < 2; i++) {
  console.log('i:', i)
  for (var j = 0; j < 2; j++) {
      if (j == 0) {
        continue top2
      }
      console.log('i, j:', i, j)
  }
}
Copy the code

Console output:

i: 0
i: 1
Copy the code

When the code executes continue top2, the body of the inner loop jumps out (not once) into the outer loop, so the code for console.log(‘ I, j:’, I, j) is not executed at all, Does continue top2 act much like break alone? This could easily be replaced with break, so the use of the continue + tag is of little use.

Misinterpretation of labels

In the “webway” document, the “tag” is described as follows:

The JavaScript language allows statements to be preceded by labels, which act as locators, to jump anywhere in the program…

When I saw this sentence, I had an illusion that “you can jump to any position in the program through the tag”, so crazy……

And then, I tried to write it like this.

top:console.log(123)
for (var i = 0; i < 2; i++) {
  for (var j = 0; j < 2; j++) {
    if (j == 1) {
      break top
    }
    console.log(i, j)
  }
}
Copy the code

Logically, this should loop forever. When j===1, jump to top, which is marked on console.log(123), so 123 is printed again, and the following loop…… continues again

But this code runs with a direct error.

This means that the tag may only allow the tag to be on the nearest body of the loop, that the tag will cause an error in other code, and that it is not the “tag can jump anywhere in the program” I imagined.

And then I wrote it a different way.

top: {
  console.log(123)
  for (var i = 0; i < 2; i++) {
    for (var j = 0; j < 2; j++) {
      if (j == 1) {
        break top
      }
      console.log(i, j)
    }
  }
}
Copy the code

No errors will be reported this time, but infinite loops are not expected, which is as expected because the top is marked on the code block.

Correct understanding of labels

As shown in the previous chapter, we can’t jump anywhere in the program by using a “tag”. We can only jump out of a loop or code block by using a “tag”, and then continue to execute the code below.

The correct use of the label is as follows:

Tags:for (...) {
    ...
    breakThe label... }Copy the code

or

Tags:for (...) {
    ...
    breakThe label... }Copy the code

or

Tags: {...breakThe label... }Copy the code

reference

1. Basic JavaScript syntax – JavaScript tutorial – web (wangdoc.com)