介绍
在本实验中，你将学习如何在 JavaScript 中使用循环。循环是编程中的一个基本概念，它允许你重复执行一段代码。这对于遍历数据列表或执行特定次数的操作等任务非常有用。
你将探索 JavaScript 中三种主要的循环类型：
for循环: 重复执行一段代码已知次数。while循环: 只要指定条件为真，就重复执行一段代码。do-while循环: 与while循环类似，但它在检查条件之前至少执行一次代码块。
你还将学习如何使用 break 语句提前退出循环。
你所有的工作都将在 WebIDE 中完成。你将在 script.js 文件中编写 JavaScript 代码，该文件已在 index.html 中链接。你可以通过切换到实验环境中的 Web 8080 标签页来查看代码的输出。
创建带初始化器和条件的 for 循环
在本步骤中，你将创建你的第一个 for 循环。当你预先知道想要重复某个操作的次数时，for 循环是理想的选择。
for 循环的基本语法是：
for (initializer; condition; final-expression) { // 要执行的代码 }
- **Initializer (初始化器)**：
let i = 0是一个例子。它在最开始时运行一次，用于声明和初始化一个计数器变量。 - **Condition (条件)**：
i < 5是一个例子。这个表达式在每次循环迭代之前都会被检查。如果为真，循环继续；如果为假，循环停止。
让我们创建一个简单的循环来生成一个项目列表。从左侧的文件浏览器中打开 script.js 文件，并添加以下代码。
const output = document.getElementById("output");
let htmlContent = "<ul>";
// 这个 for 循环有一个初始化器 (let i = 0) 和一个条件 (i < 3)
for (let i = 0; i < 3; i++) {
htmlContent += `<li>Item ${i}</li>`;
}
htmlContent += "</ul>";
output.innerHTML = htmlContent;
在这段代码中：
let i = 0将循环计数器i初始化为 0。i < 3是一个条件，只要i小于 3，循环就会继续运行。i++是在每次迭代后递增计数器的 final-expression（我们将在下一步重点介绍它）。
添加代码后，保存文件。然后，点击 Web 8080 标签页查看输出。你应该会看到一个包含三个项目的无序列表。
在 for 循环中使用递增来计数
在本步骤中，你将重点关注 for 循环的第三部分：final-expression（最终表达式），它通常用于递增计数器。
final-expression（例如 i++）在每次循环迭代结束时运行。它会更新循环计数器，使其更接近条件变为假的点。i++ 是 i = i + 1 的常用简写。
让我们修改循环以从 1 计数到 5。将 script.js 中现有的代码替换为以下内容：
const output = document.getElementById("output");
let htmlContent = "<h2>Counting from 1 to 5:</h2>";
// final expression i++ 在每次循环后递增计数器
for (let i = 1; i <= 5; i++) {
htmlContent += `Count: ${i}<br>`;
}
output.innerHTML = htmlContent;
注意这些变化：
- 初始化器现在是
let i = 1，所以我们从 1 开始计数。 - 条件是
i <= 5，所以只要i小于或等于 5，循环就会运行。 i++表达式确保计数器在每次迭代时增加。
保存文件并刷新 Web 8080 标签页。你将看到输出更改为从 1 到 5 的计数列表。
实现 while 循环进行重复操作
在本步骤中，你将学习 while 循环。只要指定的条件为真，while 循环就会继续执行一段代码。
其语法比 for 循环更简单：
while (condition) { // 要执行的代码 }
使用 while 循环时，你必须在循环之前处理计数器变量的初始化，并在循环内部处理其递增。忘记递增计数器将导致无限循环，这可能会使你的浏览器崩溃。
让我们使用 while 循环重写之前的计数示例。将 script.js 中的代码替换为：
const output = document.getElementById("output");
let htmlContent = "<h2>Counting with a while loop:</h2>";
let i = 1; // 1. Initializer (初始化器)
while (i <= 5) {
// 2. Condition (条件)
htmlContent += `Count: ${i}<br>`;
i++; // 3. Increment (递增)
}
output.innerHTML = htmlContent;
这段代码实现了与上一步的 for 循环相同的结果，但结构不同。初始化器、条件和递增现在是独立的语句。
保存文件并检查 Web 8080 标签页。输出应该与上一步完全相同，展示了实现相同重复的另一种方法。
添加 do-while 循环以至少执行一次
在本步骤中，你将探索 do-while 循环。此循环是 while 循环的一个变体，但有一个关键区别：do-while 循环在检查条件之前，总是会至少执行一次其代码块。
语法是：
do { // 要执行的代码 } while (condition);
当你需要先执行一个操作，然后决定是否重复它时，这非常有用。让我们通过一个条件最初为假的示例来实际看看。
将 script.js 中的代码替换为：
const output = document.getElementById("output");
let htmlContent = "<h2>Testing a do-while loop:</h2>";
let i = 10; // 从一个使 while 条件为假的值开始
// 即使 i 不小于 5，此循环也会运行一次
do {
htmlContent += `The value of i is: ${i}<br>`;
i++;
} while (i < 5);
output.innerHTML = htmlContent;
在此示例中，由于 i 是 10，条件 i < 5 从一开始就是假的。但是，因为这是一个 do-while 循环，在检查条件之前，do 块内的代码会运行一次。
保存文件并查看 Web 8080 标签页。你将看到消息“The value of i is: 10”，证明循环正好运行了一次。
使用 break 语句跳出循环
在本步骤中，你将学习如何使用 break 语句提前退出循环。break 语句会立即终止当前循环，并将控制权转移到循环之后的语句。
当你需要在循环中搜索某个内容，并希望在找到后立即停止，而无需完成剩余的迭代时，这非常有用。
让我们使用一个本应运行 10 次的 for 循环，但当满足某个条件时会提前停止。将 script.js 中的代码替换为：
const output = document.getElementById("output");
let htmlContent = "<h2>Using the break statement:</h2>";
for (let i = 1; i <= 10; i++) {
if (i === 6) {
htmlContent += "Found 6! Breaking the loop.<br>";
break; // 立即退出循环
}
htmlContent += `Current number is ${i}<br>`;
}
htmlContent += "Loop finished.";
output.innerHTML = htmlContent;
在这段代码中，for 循环被设置为从 1 计数到 10。但是，if 语句会检查 i 是否等于 6。当它等于 6 时，break 语句被执行，循环终止。代码将不会打印数字 7 到 10。
保存文件并查看 Web 8080 标签页。你将看到计数停止在 5，后面跟着“Breaking the loop”消息。
总结
恭喜你完成了关于 JavaScript 循环的这个实验！你已经学会了如何通过重复代码块来控制程序的流程。
在这个实验中，你学习了：
for循环：非常适合在你预先知道迭代次数时使用，它包含一个初始化器、一个条件和一个最终表达式。while循环：只要条件为真就会重复执行，并且需要手动管理计数器。do-while循环：在检查条件之前，保证代码块至少执行一次。break语句：提供了一种根据条件提前退出任何循环的方法。
掌握循环是成为一名熟练的 JavaScript 开发者的关键一步。请随意进一步尝试此实验中的代码，以巩固你的理解。
