JavaScript while 和 do...while 循环

    在本教程中，您将借助示例了解 while 循环和 do…while 循环。
    在编程中，循环用于重复一段代码。例如，如果您想显示一条消息 100 次，那么您可以使用循环。这只是一个简单的例子；你可以用循环实现更多。
    在上一教程中，您了解了JavaScript for 循环。在这里，您将了解while和do…while循环。

JavaScript while 循环

    while 循环的语法是：

while (condition) {
    // body of loop
}

    这里，

1. while 循环计算括号（）内的条件 condition。
2. 如果条件 condition 的计算结果为 true，则执行 while 循环中的代码。
3. 再次评估该条件 condition。
4. 此过程将继续，直到条件 condition 为 false。
5. 当条件 condition 的计算结果为 false 时，循环停止。

    要了解有关条件 condition 的更多信息，请访问JavaScript 比较和逻辑运算符。

while 循环流程图

JavaScript while 循环流程图

示例 1：显示从 1 到 5 的数字

// program to display numbers from 1 to 5
// initialize the variable
let i = 1, n = 5;

// while loop from i = 1 to 5
while (i <= n) {
    console.log(i);
    i += 1;
}

    输出

1
2
3
4
5

    这是该程序的工作原理。

迭代次数	变量	条件：i <= n	行为
1st	i = 1 n = 5	true	打印 1，i 增加到2。
2nd	i = 2 n = 5	true	打印 2，i 增加到3。
3rd	i = 3 n = 5	true	打印 3，i 增加到4。
4th	i = 4 n = 5	true	打印 4，i 增加到5。
5th	i = 5 n = 5	true	打印 5，i 增加到6。
6th	i = 6 n = 5	false	循环终止

示例 2：仅正数之和

// program to find the sum of positive numbers
// if the user enters a negative numbers, the loop ends
// the negative number entered is not added to sum

let sum = 0;

// take input from the user
let number = parseInt(prompt('Enter a number: '));

while(number >= 0) {

    // add all positive numbers
    sum += number;

    // take input again if the number is positive
    number = parseInt(prompt('Enter a number: '));
}

// display the sum
console.log(`The sum is ${sum}.`);

    输出

Enter a number: 2
Enter a number: 5
Enter a number: 7
Enter a number: 0
Enter a number: -3
The sum is 14.

    在上述程序中，会提示用户输入一个数字。
    这里使用 parseInt（）是因为 prompt（）将用户的输入作为字符串。当添加数字字符串时，它的行为就像一个字符串。例如，‘2’+‘3’=‘23’。因此 parseInt（）将数字字符串转换为数字。
    while 循环将继续，直到用户输入负数。在每次迭代过程中，用户输入的数字被添加到 sum 变量中。
    当用户输入负数时，循环终止。最后，显示总数。

JavaScript do…while 循环

    do…while循环的语法是：

do {
    // body of loop
} while(condition)

    在这里，

1. 首先执行循环体。然后对条件 condition 进行评估。
2. 如果条件 condition 的计算结果为 true，则会再次执行 do 语句中的循环体。
3. 再次评估该条件 condition。
4. 如果条件 condition 的计算结果为 true，则会再次执行 do 语句中的循环体。
5. 此过程将继续，直到条件 condition 评估为 false。然后循环停止。

    注意：do…while 循环类似于 while 循环。唯一的区别是在 do…while 循环中，循环体至少执行一次。

do…while 循环流程图

JavaScript do...while 循环流程图

    让我们看看 do…while 循环的工作原理。

示例 3：显示从 1 到 5 的数字

// program to display numbers
let i = 1;
const n = 5;

// do...while loop from 1 to 5
do {
    console.log(i);
    i++;
} while(i <= n);

    输出

1
2
3
4
5

    这是该程序的工作原理。

迭代次数	变量	条件：i <= n	行为
	i = 1 n = 5	未检查	打印 1，i 增加到2。
1st	i = 2 n = 5	true	打印 2，i 增加到3。
2nd	i = 3 n = 5	true	打印 3，i 增加到4。
3rd	i = 4 n = 5	true	打印 4，i 增加到5。
4th	i = 5 n = 5	true	打印 5，i 增加到6。
5th	i = 6 n = 5	false	循环终止

示例 4：正数之和

// to find the sum of positive numbers
// if the user enters negative number, the loop terminates
// negative number is not added to sum

let sum = 0;
let number = 0;

do {
    sum += number;
    number = parseInt(prompt('Enter a number: '));
} while(number >= 0)

console.log(`The sum is ${sum}.`);

    输出1

Enter a number: 2
Enter a number: 4
Enter a number: -500
The sum is 6.

    在这里，do…while 循环继续，直到用户输入负数。当数字为负数时，循环终止；负数不会添加到 sum 变量中。
    输出 2

Enter a number: -80
The sum is 0.

    如果用户输入一个负数，do…while 循环体只运行一次。

无限 while 循环

    如果循环的条件始终为 true，则循环将运行无限次（直到内存已满）。例如，

// infinite while loop
while(true){
    // body of loop
}

    这是一个无限 do…while 循环的例子。

// infinite do...while loop
const count = 1;
do {
   // body of loop
} while(count == 1)

    在上述程序中，条件 condition 始终为 true。因此，循环体将运行无限次。

for VS while 循环

    当迭代次数已知时，通常使用 for 循环。例如，

// this loop is iterated 5 times
for (let i = 1; i <=5; ++i) {
   // body of loop
}

    当迭代次数未知时，通常使用 while 和 do…while 循环。例如，

while (condition) {
    // body of loop
}

上一教程 ：JS for Loop                                         下一教程 ：JS break

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/while-loop