8. 流程控制：循环语句（重复做）

循环语句是 JavaScript 中用于重复执行代码块的语句。本章节将带你学习 JavaScript 的循环语句，包括 for 循环、while 循环、do...while 循环，以及 break 和 continue 语句。

8.1 for 循环：固定次数循环（最常用）

for 循环是最常用的循环语句，用于在指定条件下重复执行代码块。

基本语法

for (初始化; 条件; 更新) {
    // 循环体代码
}

• 初始化：在循环开始前执行一次，通常用于声明计数器变量
• 条件：每次循环开始前检查，为真时执行循环体，为假时结束循环
• 更新：每次循环结束后执行，通常用于更新计数器变量

示例

// 打印 1 到 5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

// 计算 1 到 100 的和
let sum = 0;
for (let i = 1; i <= 100; i++) {
    sum += i;
}
console.log('1 到 100 的和:', sum);

// 遍历数组
const fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

注意事项

• 计数器变量通常使用 let 声明，以避免作用域问题
• 条件表达式必须能够在某个时刻变为假，否则会导致无限循环
• 可以在循环体内使用 break 语句提前结束循环
• 可以在循环体内使用 continue 语句跳过当前循环，进入下一次循环

8.2 while 循环：条件满足就循环

while 循环用于在条件为真时重复执行代码块。

基本语法

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

示例

// 打印 1 到 5
let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

// 计算 1 到 100 的和
let sum = 0;
let j = 1;
while (j <= 100) {
    sum += j;
    j++;
}
console.log('1 到 100 的和:', sum);

// 猜数字游戏
let secretNumber = Math.floor(Math.random() * 100) + 1;
let guess = 0;
while (guess !== secretNumber) {
    guess = parseInt(prompt('猜一个 1 到 100 之间的数字:'));
    if (guess > secretNumber) {
        alert('太大了');
    } else if (guess < secretNumber) {
        alert('太小了');
    } else {
        alert('恭喜你猜对了！');
    }
}

注意事项

• 必须在循环体内更新条件变量，否则会导致无限循环
• 条件表达式必须能够在某个时刻变为假，否则会导致无限循环
• 适合用于不确定循环次数的情况

8.3 do...while 循环：先执行再判断

do...while 循环与 while 循环类似，但它会先执行一次循环体，然后再检查条件。

基本语法

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

示例

// 打印 1 到 5
let i = 1;
do {
    console.log(i);
    i++;
} while (i <= 5);

// 计算 1 到 100 的和
let sum = 0;
let j = 1;
do {
    sum += j;
    j++;
} while (j <= 100);
console.log('1 到 100 的和:', sum);

// 至少执行一次的情况
let userInput;
do {
    userInput = prompt('请输入一个非空值:');
} while (userInput === '');
console.log('你输入的是:', userInput);

注意事项

• 循环体至少执行一次，无论条件是否为真
• 必须在循环体内更新条件变量，否则会导致无限循环
• 适合用于需要至少执行一次的情况

8.4 break 和 continue：终止与跳过

break 语句

break 语句用于提前结束循环，跳出循环体。

// 找到第一个大于 5 的数字
const numbers = [1, 3, 5, 7, 9];
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 5) {
        console.log('找到第一个大于 5 的数字:', numbers[i]);
        break;  // 找到后结束循环
    }
}

// 无限循环中使用 break
let i = 0;
while (true) {
    console.log(i);
    i++;
    if (i > 5) {
        break;  // 当 i > 5 时结束循环
    }
}

continue 语句

continue 语句用于跳过当前循环的剩余代码，进入下一次循环。

// 打印 1 到 10 中的奇数
for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        continue;  // 跳过偶数
    }
    console.log(i);
}

// 遍历数组，跳过空值
const fruits = ['apple', null, 'banana', undefined, 'cherry'];
for (let i = 0; i < fruits.length; i++) {
    if (!fruits[i]) {
        continue;  // 跳过空值
    }
    console.log(fruits[i]);
}

8.5 实战：打印九九乘法表 / 1-100 求和

实战1：打印九九乘法表

// 打印九九乘法表
for (let i = 1; i <= 9; i++) {
    let row = '';
    for (let j = 1; j <= i; j++) {
        row += `${j} × ${i} = ${i * j}\t`;
    }
    console.log(row);
}

输出结果：

1 × 1 = 1   
1 × 2 = 2   2 × 2 = 4   
1 × 3 = 3   2 × 3 = 6   3 × 3 = 9   
1 × 4 = 4   2 × 4 = 8   3 × 4 = 12  4 × 4 = 16  
1 × 5 = 5   2 × 5 = 10  3 × 5 = 15  4 × 5 = 20  5 × 5 = 25  
1 × 6 = 6   2 × 6 = 12  3 × 6 = 18  4 × 6 = 24  5 × 6 = 30  6 × 6 = 36  
1 × 7 = 7   2 × 7 = 14  3 × 7 = 21  4 × 7 = 28  5 × 7 = 35  6 × 7 = 42  7 × 7 = 49  
1 × 8 = 8   2 × 8 = 16  3 × 8 = 24  4 × 8 = 32  5 × 8 = 40  6 × 8 = 48  7 × 8 = 56  8 × 8 = 64  
1 × 9 = 9   2 × 9 = 18  3 × 9 = 27  4 × 9 = 36  5 × 9 = 45  6 × 9 = 54  7 × 9 = 63  8 × 9 = 72  9 × 9 = 81

实战2：1-100 求和

// 方法 1：使用 for 循环
let sum1 = 0;
for (let i = 1; i <= 100; i++) {
    sum1 += i;
}
console.log('1-100 的和 (for 循环):', sum1);

// 方法 2：使用 while 循环
let sum2 = 0;
let j = 1;
while (j <= 100) {
    sum2 += j;
    j++;
}
console.log('1-100 的和 (while 循环):', sum2);

// 方法 3：使用数学公式（高斯求和）
let sum3 = (1 + 100) * 100 / 2;
console.log('1-100 的和 (数学公式):', sum3);

小结

通过本章节的学习，你已经掌握了：

• for 循环：固定次数循环，最常用
• while 循环：条件满足就循环
• do...while 循环：先执行再判断
• break 语句：提前结束循环
• continue 语句：跳过当前循环，进入下一次循环
• 如何使用循环语句解决实际问题

在后续的章节中，我们将学习 JavaScript 的函数等核心语法。