JavaScript while 循环

while 循环的概念

while 循环是 JavaScript 中的一种循环语句，它用于在指定条件为 true 的情况下重复执行一段代码。while 循环特别适合未知循环次数的情况，只要条件满足就会一直执行。

while 循环的基本语法

while (condition) {
  // 循环体代码
}

语法说明：

• condition：条件表达式，每次循环前检查，如果为 true，则执行循环体；如果为 false，则退出循环
• 循环体：要重复执行的代码块

while 循环的示例

1. 基本用法

// 循环输出 0 到 4
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// 输出:
// 0
// 1
// 2
// 3
// 4

2. 递减循环

// 循环输出 4 到 0
let i = 4;
while (i >= 0) {
  console.log(i);
  i--;
}

// 输出:
// 4
// 3
// 2
// 1
// 0

3. 基于用户输入的循环

// 模拟用户输入，直到输入 'quit'
let input = "";
while (input !== "quit") {
  // 在实际应用中，这里会使用 prompt() 或其他方式获取用户输入
  input = "continue"; // 模拟输入
  console.log("Processing...");

  // 为了避免无限循环，这里手动设置 input 为 'quit'
  if (Math.random() > 0.7) {
    input = "quit";
  }
}

console.log("Loop exited");

4. 遍历数组

const fruits = ["apple", "banana", "orange", "grape"];
let i = 0;

while (i < fruits.length) {
  console.log(fruits[i]);
  i++;
}

// 输出:
// apple
// banana
// orange
// grape

5. 计算总和

const numbers = [1, 2, 3, 4, 5];
let i = 0;
let sum = 0;

while (i < numbers.length) {
  sum += numbers[i];
  i++;
}

console.log("Sum:", sum); // 输出: Sum: 15

do...while 循环

do...while 循环是 while 循环的一种变体，它会先执行一次循环体，然后再检查条件：

基本语法

do {
  // 循环体代码
} while (condition);

示例

// 循环输出 0 到 4
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

// 输出:
// 0
// 1
// 2
// 3
// 4

// 即使条件一开始就为 false，也会执行一次循环体
let j = 5;
do {
  console.log(j);
  j++;
} while (j < 5);

// 输出:
// 5

while 循环的最佳实践

1. 确保循环条件最终会变为 false

确保循环条件最终会变为 false，以避免无限循环：

// 好的做法
let i = 0;
while (i < 5) {
  console.log(i);
  i++; // 递增 i，确保条件最终会变为 false
}

// 不好的做法（无限循环）
let i = 0;
while (i < 5) {
  console.log(i);
  // 没有递增 i，条件永远为 true
}

2. 初始化循环变量

在循环开始前初始化循环变量：

// 好的做法
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// 不好的做法（未初始化循环变量）
while (i < 5) {
  console.log(i);
  i++;
}

3. 避免在循环体中修改循环变量的类型

避免在循环体中修改循环变量的类型，以免导致意外的循环行为：

// 不好的做法
let i = 0;
while (i < 5) {
  console.log(i);
  i = "string"; // 修改了循环变量的类型
}

// 正确
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

4. 合理使用 while 循环和 for 循环

• while 循环：适合未知循环次数的情况
• for 循环：适合已知循环次数的情况

// 好的做法：未知循环次数
let input;
while ((input = prompt("Enter a number (0 to exit):")) !== "0") {
  console.log("You entered:", input);
}

// 好的做法：已知循环次数
for (let i = 0; i < 5; i++) {
  console.log(i);
}

5. 使用 break 语句退出循环

在某些情况下，可以使用 break 语句提前退出循环：

let i = 0;
while (i < 10) {
  console.log(i);
  i++;

  if (i === 5) {
    break; // 提前退出循环
  }
}

// 输出:
// 0
// 1
// 2
// 3
// 4

while 循环的常见错误

1. 无限循环

最常见的错误是无限循环，即循环条件永远为 true：

// 错误：无限循环
let i = 0;
while (i < 5) {
  console.log(i);
  // 忘记递增 i
}

// 错误：无限循环
while (true) {
  console.log("Infinite loop");
  // 没有 break 语句
}

2. 条件表达式错误

// 错误：使用了赋值运算符 = 而不是比较运算符 <
let i = 0;
while ((i = 5)) {
  console.log(i);
  i++;
}

// 正确
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

3. 循环体缺少花括号

// 错误：循环体缺少花括号，只有第一条语句会被循环执行
let i = 0;
while (i < 5) console.log(i);
i++; // 这条语句只会执行一次，导致无限循环

// 正确
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

4. 未初始化循环变量

// 错误：未初始化循环变量，i 的值为 undefined
while (i < 5) {
  console.log(i);
  i++;
}

// 正确
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

while 循环与 for 循环的比较

1. 语法差异

// while 循环
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// for 循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}

2. 使用场景

• while 循环：

  • 未知循环次数的情况
  • 基于条件的循环
  • 更灵活的循环控制

• for 循环：

  • 已知循环次数的情况
  • 遍历数组或对象
  • 更简洁的语法

3. 性能比较

在大多数情况下，while 循环和 for 循环的性能差异很小，可以忽略不计。选择哪种循环主要取决于具体的使用场景和代码可读性。

小结

while 循环是 JavaScript 中的一种重要循环语句，它用于在指定条件为 true 的情况下重复执行一段代码。while 循环特别适合未知循环次数的情况，只要条件满足就会一直执行。do...while 循环是 while 循环的一种变体，它会先执行一次循环体，然后再检查条件。在使用 while 循环时，应该遵循最佳实践，确保循环条件最终会变为 false，以避免无限循环。