JavaScript While 循环

JavaScript while 循环

循环是编程中的基本控制结构，允许你重复执行一段代码块，只要指定的条件保持为真（true）。

while 循环

while 循环会执行一段代码块，只要指定的条件判断结果为 true。

在每次迭代（iteration）执行代码块之前，都会先评估条件。

语法：

while (condition) { // 要执行的代码块 // 只要 ‘condition’ 为真，这个块就会一直运行 // 通常包含一个最终会使条件变为假（false）的语句（例如，递增计数器） }

示例：

在下面的示例中，只要变量 i 小于 5，循环内的代码就会重复执行：

let text = "";
let i = 0;

while (i < 5) {
  text += `The number is ${i}\n`;
  i++; // 递增 i，使其最终使条件变为假
}

console.log(text);
// 输出:
// The number is 0
// The number is 1
// The number is 2
// The number is 3
// The number is 4

注意：	如果你忘记包含一个最终会使循环条件变为 false 的语句（例如，在上面的示例中忘记 i++），循环将永远运行下去。这称为无限循环（infinite loop），可能导致你的浏览器或脚本崩溃。

do…while 循环

do...while 循环是 while 循环的一种变体。关键区别在于 do...while 循环会先执行其代码块一次，然后再检查条件。之后，只要条件为 true，它就会重复循环。

这确保了即使条件最初为假（false），代码块也会至少执行一次。

语法：

do { // 要执行的代码块 // 这个块至少执行一次 } while (condition);

示例：

下面的示例使用了 do...while 循环。循环体将总是至少执行一次。

let result = "";
let j = 0;

do {
  result += `Current value of j: ${j}\n`;
  j++;
} while (j < 3);

console.log(result);
// 输出:
// Current value of j: 0
// Current value of j: 1
// Current value of j: 2

// 条件最初为假的示例：
let k = 5;
let runOnceText = "";
do {
  runOnceText = "This runs even if k is not less than 5 initially.";
  k++;
} while (k < 5);
console.log(runOnceText); // 输出该消息，因为代码块至少运行一次。

记住在循环内部包含逻辑，使其最终使条件变为假，以避免无限循环。

比较 for 循环和 while 循环

while 循环通常可以实现与 for 循环相同的结果。当已知迭代次数或可以轻松预先确定时（例如，迭代已知长度的数组），通常更倾向于使用 for 循环。

考虑一个 for 循环：

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let carListFor = "Cars (using for loop):\n";
for (let i = 0; i < cars.length; i++) {
  carListFor += cars[i] + "\n";
}
console.log(carListFor);

使用 while 循环的等效代码：

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let carListWhile = "Cars (using while loop):\n";
let i = 0; // 在循环外部初始化
while (i < cars.length) { // 条件
  carListWhile += cars[i] + "\n";
  i++; // 在循环内部递增/更新
}
console.log(carListWhile);

原教程展示了一种 for 循环的变体，通过省略 for 语句本身的初始化和最终表达式部分，它看起来非常像 while 循环：

const carsArray = ["Audi", "Mercedes", "VW"];
let outputText = "";
let k_idx = 0;
// 这种 for 循环结构不太常见但有效；类似于 while 循环。
for (; carsArray[k_idx]; ) {
    outputText += carsArray[k_idx] + "\n";
    k_idx++;
}
console.log("Cars (using for loop variant):\n" + outputText);
// 这之所以有效，是因为当 k_idx 超出范围时，carsArray[k_idx] 最终将变为 undefined（假值）。

选择最适合特定任务、能让代码最清晰且最易于维护的循环类型。对于遍历数组元素，for...of 循环或像 forEach() 这样的数组方法通常是更现代、更简洁的替代方案。

拓展阅读：MDN: while, MDN: do…while