跳到主要内容

JavaScript while 和 do...while 循环

提示
  1. while循环的结构：while循环首先评估条件，如果为真，则执行循环体，然后再次评估条件，直到条件为假。
  2. do...while循环的特点：do...while循环首先执行一次循环体，然后评估条件，如果为真，继续执行，这确保循环体至少执行一次。
  3. 循环的应用示例：示例展示了如何使用while和do...while循环来打印数字序列和计算正数之和。

在编程中，循环用于重复执行一段代码。例如，如果您想展示一条消息 100 次，那么您可以使用循环。这只是一个简单的例子；您可以通过循环实现更多功能。

在上一个教程中，您学习了 JavaScript for 循环。在这里，您将了解 while 和 do...while 循环。

JavaScript while 循环​

while 循环的语法是：

while (条件) {
  // 循环体
}

这里，

  1. while 循环评估括号 () 内的条件。
  2. 如果条件评估为 true，则执行 while 循环内的代码。
  3. 再次评估条件。
  4. 这个过程一直持续到条件为 false。
  5. 当条件评估为 false 时，循环停止。

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

while 循环的流程图​

JavaScript 中 while 循环的流程图

示例 1：显示数字 1 到 5​

// 程序显示数字 1 到 5
// 初始化变量
let i = 1,
  n = 5;

// while 循环从 i = 1 到 5
while (i <= n) {
  console.log(i);
  i += 1;
}

输出

1;
2;
3;
4;
5;

以下是此程序的工作原理。

迭代变量条件: i <= n动作
第 1 次i = 1, n = 5true打印 1。i 增加到 2。
第 2 次i = 2, n = 5true打印 2。i 增加到 3。
第 3 次i = 3, n = 5true打印 3。i 增加到 4。
第 4 次i = 4, n = 5true打印 4。i 增加到 5。
第 5 次i = 5, n = 5true打印 5。i 增加到 6。
第 6 次i = 6, n = 5false循环终止

示例 2：只求正数的和​

// 程序寻找正数的和
// 如果用户输入负数，循环结束
// 输入的负数不加入总和

let sum = 0;

// 从用户那里取得输入
let number = parseInt(prompt("输入一个数字："));

while (number >= 0) {
  // 加所有正数
  sum += number;

  // 如果数字是正数，再次输入
  number = parseInt(prompt("输入一个数字："));
}

// 显示总和
console.log(`总和为 ${sum}。`);

输出

输入一个数字：2
输入一个数字：5
输入一个数字：7
输入一个数字：0
输入一个数字：-3
总和为 14。

在上述程序中，提示用户输入一个数字。

这里使用 parseInt() 是因为 prompt() 以字符串形式从用户那里获取输入。当数字字符串相加时，它们会作为字符串处理。例如，'2' + '3' = '23'。所以 parseInt() 将数字字符串转换为数字。

while 循环持续进行，直到用户输入一个负数。在每次迭代中，用户输入的数字加到 sum 变量中。

当用户输入负数时，循环终止。最后，显示总和。

JavaScript do...while 循环​

do...while 循环的语法是：

do {
  // 循环体
} while (条件);

这里，

  1. 首先执行循环体，然后评估条件。
  2. 如果条件评估为 true，则 do 语句内的循环体再次执行。
  3. 再次评估条件。
  4. 如果条件评估为 true，则 do 语句内的循环体再次执行。
  5. 这个过程一直持续到条件评估为 false。然后循环停止。

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

do...while 循环的流程图​

JavaScript 中 do...while 循环的流程图

让我们看看 do...while 循环的运作方式。

示例 3：显示数字 1 到 5​

// 程序显示数字
let i = 1;
const n = 5;

// do...while 循环从 1 到 5
do {
  console.log(i);
  i++;
} while (i <= n);

输出

1;
2;
3;
4;
5;

以下是此程序的工作原理。

迭代变量条件: i <= n动作
 i = 1, n = 5未检查打印 1。i 增加到 2。
第 1 次i = 2, n = 5true打印 2。i 增加到 3。
第 2 次i = 3, n = 5true打印 3。i 增加到 4。
第 3 次i = 4, n = 5true打印 4。i 增加到 5。
第 4 次i = 5, n = 5true打印 5。i 增加到 6。
第 5 次i = 6, n = 5false循环终止

示例 4：求正数的和​

// 寻找正数的和
// 如果用户输入负数，循环终止
// 负数不加入总和

let sum = 0;
let number = 0;

do {
  sum += number;
  number = parseInt(prompt("输入一个数字："));
} while (number >= 0);

console.log(`总和为 ${sum}。`);

输出 1

输入一个数字：2
输入一个数字：4
输入一个数字：-500
总和为 6。

这里，do...while 循环持续进行，直到用户输入一个负数。当数字为负时，循环终止；负数不加入 sum 变量。

输出 2

输入一个数字：-80
总和为 0。

如果用户输入负数，do...while 循环的主体仅运行一次。

无限 while 循环​

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

// 无限 while 循环
while (true) {
  // 循环体
}

以下是无限 do...while 循环的例子。

// 无限 do...while 循环
const count = 1;
do {
  // 循环体
} while (count == 1);

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

for 循环与 while 循环​

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

// 此循环迭代 5 次
for (let i = 1; i <= 5; ++i) {
  // 循环体
}

而 while 和 do...while 循环通常用于迭代次数未知的情况。例如，

while (condition) {
  // 循环体
}
最后于 更新