JS循环学习：for循环语句的使用「示例详解」

1. 初识for循环语句

JS中的for循环语句是一种重复执行代码块的结构，它可以用于在指定次数内重复执行一段代码，或按照指定条件重复执行一段代码。它的一般形式如下：

for ([initialize]; [condition]; [final-expression]) {
  // code to be executed
}

其中：

initialize：可选。开始循环前执行的初始化代码。

condition：可选。在每次迭代之前进行判断的代码。当条件为false时循环将停止。

final-expression：可选。在每次迭代之后执行的代码。

code to be executed: 循环体，要重复执行的代码块。

下面是一个简单的for循环例子：

for (var i = 0; i < 5; i++) {
  console.log(i);
}

上述代码是一个从0到4的计数循环，每次循环i的值都会自增1，直到i的值不小于5，循环结束。运行结果如下：

0
1
2
3
4

2. for循环语句的示例

2.1 计算1到10的和

下面我们来看一个用for循环计算1到10的和的例子：

var sum = 0;
for (var i = 1; i <= 10; i++) {
  sum += i;
}
console.log(sum); // 55

上述代码中，我们用sum变量存放计算的结果。循环开始前，我们将sum初始化为0。在每次循环中，i的值会自增1，然后将i加到sum中。当i的值大于10时，循环结束，最后输出sum的值。运行结果是55，符合我们的预期。

2.2 找出数组中的最大元素

接下来我们来看一个用for循环找出数组中最大元素的例子：

var arr = [5, 12, 34, 9, 7];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
  if (arr[i] > max) {
    max = arr[i];
  }
}
console.log(max); // 34

在上述例子中，我们用一个数组存放一组数字，然后用max变量存放当前已经找到的最大值。循环开始前，我们将max初始化为数组的第一个元素。在每次循环中，我们比较当前元素arr[i]是否大于max，如果是，则用arr[i]来更新max。循环结束后，max的值即为数组中的最大值。运行结果是34，符合我们的预期。

2.3 生成菱形图案

最后，我们来看一个用for循环生成菱形图案的例子：

var n = 5;
for (var i = 0; i < n; i++) {
  var str = '';
  for (var j = 0; j < n - i - 1; j++) {
    str += ' ';
  }
  for (var k = 0; k < 2 * i + 1; k++) {
    str += '*';
  }
  console.log(str);
}
for (var i = n - 2; i >= 0; i--) {
  var str = '';
  for (var j = 0; j < n - i - 1; j++) {
    str += ' ';
  }
  for (var k = 0; k < 2 * i + 1; k++) {
    str += '*';
  }
  console.log(str);
}

上述代码中，我们用两个嵌套的for循环来生成菱形图案。首先是一个从上到下的三角形，然后是一个从下到上的三角形。在每一行生成之前，我们要先输出若干个空格，使得图案能够居中显示。这里我们用到了一个基本的数学关系：在第i行输出的星号数量为2*i+1。

运行结果如下：

    *
   ***
  *****
 *******
*********
 *******
  *****
   ***
    *

3. 结语

以上就是JS for循环语句的用法示例。通过对这些例子的研究，我们可以更好地理解for循环的运行逻辑，并且掌握for循环的一些高级用法。