English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript Basic Tutorial

JavaScript Object

JavaScript Function

JS HTML DOM

JS Browser BOM

AJAX Basic Tutorial

JavaScript Reference Manual

JavaScript While Loops

The code block can be executed as long as the specified condition is true.

While loop

The while loop will execute the specified statement as long as the value of the specified condition is true.

The syntax of the while loop is as follows:

while (condition) { // Execute the code as long as the condition is true}
var n = 0;
while (n < 5) {
   document.write("<br>This number is " + n);
   n++;
}
Test See‹/›

Note:If you want to use aConditionvariable, please initialize it before the loop and increment it within the loop. If you forget to increase the variable, the loop will never end. This will cause your browser to crash.

Infinite loop

AInfinite loopin the name, it is a loop that will keep running forever. If you accidentally cause an infinite loop, it may cause the browser or computer to crash. It is important to be aware of infinite loops so that you can avoid them.

When the condition of the while statement is set totrueA common infinite loop occurs when

  while (true) {
    // Always execute the code
  }

An infinite loop will run forever, but the break keyword can be used to terminate the program.

Do...While loop

This do...while loop is a variant of the while loop. It will execute the code block once before checking if the condition is true, and then it will repeat the loop as long as the condition is true.

The syntax of this do...while loop is as follows:

do {
// The statement to be executed
}
while (condition);
do {
   document.write("<br>Number is " + n);
   n++;
}
while (n < 5);
Test See‹/›

Do not forget to increase the variable used in the condition, otherwise the loop will never end.

Note:Even if the condition is false, this loop always executes at least once because the code block is executed before the condition test:

var n = 5;
do {
   document.write("<br>Number is " + n);
   n++;
}
while (n < 3);  // false
Test See‹/›

The difference between while and do...while loops

The while loop differs from the do...while loop in an important way: the while loop tests the condition to be calculated at the beginning of each iteration, so if the calculation result of the condition expression is false, the loop will never be executed.

On the other hand, the do ... while loop will always execute once, even if the calculation result of the condition expression is false, because unlike the while loop, the condition is calculated at the end of the loop iteration rather than at the beginning.

Comparison of For and While Loops

If you have read the previous chapter about for loops, you will find that the while loop is very similar to the for loop, but it omits the initialization and final expression.

In this example, the for loop is used to iterate over the fruits array to get the names of the fruits:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = '';
for (var i = 0; i < fruits.length; i++) {
txt += fruits[i] + '<br>';
}
Test See‹/›

In this example, the while loop is used to iterate over the fruits array to get the names of the fruits:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = '';
var i = 0;
while (i < fruits.length) {
 txt += fruits[i] + '<br>';
 i++;
}
Test See‹/›