This is the 9th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Hello everyone, I am the prosperity of the other shore 🌸, a front-end πŸ‘¨πŸ»πŸ’» that firmly believes that hard work can change destiny. If I have the honor to write an article that can get your favor, I am very lucky ~

This series of articles was first published in nuggets

Writing in the front

In this article, we will learn about loops in JavaScript. What can we learn from this article? The diagram below:

What is a loop

A loop is the repeated execution of some statement that is controlled by specifying an expression. In simple terms, if an expression is converted to a Value of type Boolean and the result is true, the statement is executed repeatedly until the expression is converted to a value of type Boolean and the result is false. As in the following code:

for (var i = 0; i < 3; i++) {
    console.log(i);
}

/* Result 0 1 2 */
Copy the code

The syntax of the above code is explained below

There are several types of loop statements in JavaScript:

  • While statement

  • do… While statement

  • For statement

  • for… In statement

  • for… Of statement (new in ES6)

In this article, we will focus on the while statement, do… While and for statements. for… The in statement, which we’ll learn when we learn about arrays, for… The OF statement will be learned in new ECMAScript features.

And while the do… While statement

While statement

As long as the expression is true, the while statement will repeatedly execute the corresponding block until the expression is false. Its syntax looks like this:

while(Conditional expression) {// The block of code to repeat when the conditional expression is true
}
Copy the code

According to the above grammatical structure, the following flowchart can be drawn:

From the flowchart, we can get the following execution order:

  1. Executes the conditional expression, executing the code in the block if converted to a Boolean value of true.

  2. After executing the code in the statement block, it will return to the condition expression and re-execute.

  3. If true, the above steps are repeated; if false, the execution ends.

Now that we’ve read the syntax structure, let’s write some code. Requirement: there is a number less than 10. Loop to know the number. The implementation code is as follows:

// Demand: there is a number less than 10. Loop to find out what the number is

var num = 5

var i = 0;

while (i <= 10) {
    if (num === i) {
        console.log('Your number is:' + num);
    }
    i++
}
/* The final result is: your number is: 5 */
Copy the code

The above code execution flow is as follows:

  1. Initialize the two variables, num for the number we need to guess and I for the number of times we control execution, to 0.

  2. Evaluate the result of execution of the expression, the first time I is 0,0 is less than 10, the result is true, and our code block is executed.

  3. We include an if statement in the code block. If the condition of the if statement executes true, we are done guessing that the value is equal to I.

  4. Then execute I ++, which accumulates I and avoids an infinite loop (where the condition that controls the loop statement is true all the time and the loop does not end).

  5. Then repeat steps 2, 3, and 4 until the loop is complete.

do… While statement

do… A while statement is not the same type as a while statement. Its syntax structure is as follows:

do {
  / / block
} while(Conditional expression)Copy the code

According to the above grammatical structure, the following flowchart can be drawn:

From the flowchart, we can get the following execution order:

  1. Executes the code in a statement block

  2. If the conditional expression is true, the block is executed again. If the conditional expression is false, the execution ends.

The example code is as follows:

var num = 5

var i = 0;
do {
    if (num === i) {
        console.log('Your number is:' + num);
    }
    i++
}
while (i <= 10)
Copy the code

The result is the same as above.

It is worth noting that using do… While also needs to avoid infinite loops.

And while the do… The difference between the while statement

If you just follow our sample code above, you won’t see much of a difference, because the results are the same. Does that mean there is no difference? The answer is no, and here’s the difference:

  • do… The while statement executes the code in the block and then evaluates the conditional expression.

  • The while statement evaluates the condition expression first and does not execute the block if it is false.

Now let’s write some code to verify this. The example code looks like this:

while (false) {
    console.log('While was executed');
}

do {
    console.log('do... While is executed ');
}
while (false)

// Execution result
// do... While is executed
Copy the code

In the above code, both conditional expressions are false, do… The while block is executed once.

For statement

The for statement is also a loop statement in JavaScript and contains three expressions. Its grammatical structure is as follows:

for(Initialize the expression; Conditional expression; Loop operation expression) {/ / block
 } 
Copy the code

  • An initialization expression is typically used to initialize the counter variable that controls the loop

  • Loop manipulation expressions are commonly used to change the value of the variable that controls the loop

According to the above grammatical structure, the following flowchart can be drawn:

The execution process is as follows:

  1. Execute the initialization expression

  2. Execute the initialization condition judgment expression.

  3. When the result is true, the block is executed.

  4. After the block completes, a loop action expression is executed to change the value of the counter variable that controls the loop.

  5. Re-perform the operation of the conditional judgment expression.

  6. When the result is true, the block is executed.

  7. After the block completes, a loop action expression is executed to change the value of the counter variable that controls the loop.

  8. Re-perform the operation of the conditional judgment expression.

  9. And so on. The for loop ends when the condition evaluates to false.

The example code is as follows:

var num = 5
for (var i = 0; i <= 10; i++) {
    if (i === num) {
        console.log('Your number is:'+ num); }}Copy the code

Notice the semicolon (;) between the three expressions in the for statement. It can’t be omitted

In a for statement, all three expressions are allowed to be omitted, but the middle split symbol (;) There must be. The example code is as follows:

// Omit the initialization expression
var v1 = 0   // Need to initialize in advance
for (; v1 < 10; v1++) {
  console.log("My value is:, v1)
}

// Omit the conditional expression
for (var v2 = 0; ; v2++) {
  if (v2 < 10) {   // In order to avoid the situation of infinite loop, we need to judge by the if statement in the statement block
    console.log("My value is:, v2)
  }
}

// Omit the loop operation expression
for (var v3 = 0; v3 < 10;) {
  console.log("My value is:, v3)
  v3++
}

// The default value can be 2 or even 3 at the same time.
var v4 = 0
for (; ;) {
  if (v4 < 10) {
    console.log("My value is:, v4)
    v4++
  }
}
Copy the code

Break the keyword

The break keyword, also known as the break statement, is used to terminate the loop. The break keyword is used in a loop or switch statement. The example code is as follows:

Code that does not use the break keyword:

var num = 5
for (var i = 0; i <= 10; i++) {
    if (i === num) {
        console.log('Your number is:' + num);
    }
    console.log("Code executed." + i + "Time");
}
Copy the code

The execution result is as follows:

The code executes0The sub-code executes1The sub-code executes2The sub-code executes3The sub-code executes4Your numbers are:5The code executes5The sub-code executes6The sub-code executes7The sub-code executes8The sub-code executes9The sub-code executes10timeCopy the code

Once we know what the number is, it makes no sense to print it again to execute the rest of the code

Code using the break keyword:

var num = 5
for (var i = 0; i <= 10; i++) {
    if (i === num) {
        console.log('Your number is:' + num);
        // Break the loop with the break keyword
        break
    }
    console.log("Code executed." + i + "Time");
}
Copy the code

The execution result is as follows:

The code executes0The sub-code executes1The sub-code executes2The sub-code executes3The sub-code executes4Your numbers are:5
Copy the code

The above code execution process is as follows:

The continue keyword

The continue keyword, similar to break, is used to control the loop statement and is used to end the execution of the loop. The example code is as follows:

var num = 5
for (var i = 0; i <= 10; i++) {
    if (i === num) {
        console.log('Your number is:' + num);
        // Use the continue keyword to end the loop
        continue
    }
    console.log("Code executed." + i + "Time");
}
Copy the code

The execution result is as follows:

Zero times of code execution one time of code execution two times of code execution three times of code execution four times of code execution your number is five times of code execution six times of code execution seven times of code execution eight times of code execution nine times of code execution ten times of code executionCopy the code

When I ===5, the console.log statement outside the if statement is not executed

The execution flow of the above code is as follows:

The continue keyword differs from the break keyword in that break terminates the current loop, while continue terminates the current loop. Statements executed after the keyword are not executed, either to end the current or this time.

conclusion

Excellent articles

06- This time I learned conditionals in JavaScript

【 原 ζ–‡ 】 【 原 ζ–‡ 】 a detailed explanation of 35 operators in JavaScript

04- Understand basic data types in JavaScript

03- This time I figured out variables in JavaScript

02-JavaScript lexical structure