1 Fork me on GitHub

14. JS for循环语句的用法

1. 前言

前面我们简单介绍了 while 循环和 do while 循环,本节再来介绍另外一种循环——for 循环。

1.1  JS for 循环语法

JS for 循环适合在已知循环次数时使用,语法格式如下:

for(initialization; condition; increment) {
    // 要执行的代码
}

for 循环中包含三个可选的表达式 initialization、condition 和 increment,其中:

  • initialization:为一个表达式或者变量声明,我们通常将该步骤称为“初始化计数器变量”,在循环过程中只会执行一次;
  • condition:为一个条件表达式,与 while 循环中的条件表达式功能相同,通常用来与计数器的值进行比较,以确定是否进行循环,通过该表达式可以设置循环的次数;
  • increment:为一个表达式,用来在每次循环结束后更新(递增或递减)计数器的值。

示例代码如下:

for (var i = 1; i <= 10; i++) {
    document.write(i + " ");
}

运行结果:
1 2 3 4 5 6 7 8 9 10

上面的代码中,在循环开始之前会先执行var i = 1;,并将变量 i 作为计数器;然后判断i <= 10是否成立,如果成立则执行{ }中的代码,如果失败则退出 for 循环;在每次循环执行完成后,执行i++操作,即更新计数器的值。

【示例】使用 for 循环遍历数组中的内容:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
for(var i = 0; i < fruits.length; i++) {
    document.write(fruits[i] + " ");
}

运行结果:
Apple Banana Mango Orange Papaya

1.2  JS for 循环中的三个表达式

JS for 循环中括号中的三个表达式是可以省略的,但是用于分隔三个表达式的分号不能省略,如下例所示:

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    z++;
}

1.3  JS for 循环嵌套

无论是哪种循环,都可以嵌套使用(即在一个循环中再定义一个或多个循环),下面就以 for 循环为例,来演示一下循环的嵌套使用:

for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        document.write(j + " x " + i + " = " + (i * j) + " ");
    }
    document.write("<br>");
}

运行结果:

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

1.4  for 循环变体

为了更加方便地遍历对象、数组、字符串等内容,JS 还支持两种 for 循环变体,分别是 for in 循环和 for of 循环,请转到以下链接了解更多内容:

  • JS for in循环语句的用法
  • JS for of循环语句的用法
posted @ 2022-10-10 14:13  v_jjling  阅读(156)  评论(0编辑  收藏  举报
AmazingCounters.com