31 - 控制语句 - for 循环 - 基本 for 循环的结构与应用

控制语句 - for 循环 - 基本 for 循环的结构与应用

在 JavaScript 的世界里，控制语句就像是一位聪明的指挥官，能够指挥程序按照我们的意愿执行任务。而 for 循环则是控制语句中一位得力的“干将”，它可以帮助我们高效地重复执行特定的代码块。今天，就让我们一起来揭开基本 for 循环的神秘面纱，了解它的结构与应用。

基本 for 循环的结构

基本 for 循环的语法结构如下：

for (初始化表达式; 条件表达式; 迭代表达式) {
    // 循环体，需要重复执行的代码
}

这个结构看起来有点复杂，让我们来详细拆解一下：
| 部分 | 描述 |
| —— | —— |
| 初始化表达式 | 通常用于初始化一个计数器变量，这个变量会在循环过程中起到关键作用。它只会在循环开始时执行一次。 |
| 条件表达式 | 这是一个布尔表达式，每次循环开始前都会对其进行求值。如果结果为 true，则执行循环体；如果为 false，则跳出循环。 |
| 迭代表达式 | 用于更新计数器变量的值，通常是对计数器进行递增或递减操作。每次循环体执行完毕后，都会执行这个表达式。 |
| 循环体 | 这是需要重复执行的代码块，当条件表达式为 true 时，就会执行这里的代码。 |

基本 for 循环的应用

打印数字

让我们从一个简单的例子开始，使用 for 循环打印从 1 到 5 的数字：

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

在这个例子中，let i = 1 是初始化表达式，将计数器 i 初始化为 1；i <= 5 是条件表达式，只要 i 小于等于 5，就会继续执行循环体；i++ 是迭代表达式，每次循环结束后将 i 的值加 1；console.log(i) 是循环体，用于打印当前 i 的值。运行这段代码，你会在控制台看到依次输出 1、2、3、4、5。

计算数组元素的总和

假设我们有一个包含一些数字的数组，我们可以使用 for 循环来计算这些数字的总和：

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}
console.log(sum);

在这个例子中，let i = 0 初始化计数器 i 为 0；i < numbers.length 确保循环只在 i 小于数组长度时执行；i++ 每次循环后将 i 加 1；sum += numbers[i] 将数组中当前元素的值累加到 sum 中。最终，我们得到了数组元素的总和。

绘制星星图案

for 循环还可以用来创造一些有趣的图案。比如，我们可以使用 for 循环在控制台绘制一个由星星组成的三角形：

for (let i = 1; i <= 5; i++) {
    let stars = '';
    for (let j = 0; j < i; j++) {
        stars += '*';
    }
    console.log(stars);
}

这里我们使用了嵌套的 for 循环。外层循环控制行数，内层循环控制每行星星的数量。每次内层循环结束后，将生成的星星字符串打印出来，最终形成一个三角形的图案。

通过以上这些例子，我们可以看到基本 for 循环在 JavaScript 中的强大作用。无论是简单的数字处理，还是复杂的图案绘制，for 循环都能帮助我们轻松实现。掌握了基本 for 循环的结构与应用，你就可以在 JavaScript 的编程世界中更加游刃有余地指挥程序执行各种任务啦！