在JavaScript中,除了while语句以及do…while语句,我们还可以使用for语句来实现循环。

语法:

for(初始化表达式; 条件表达式; 循环后操作) { …… }

说明:

初始化表达式,一般用于定义“用于计数的变量”的初始值;条件表达式,表示退出循环的条件,类似while中的条件如n<100;循环后操作,指的是执行循环体(也就是大括号中的程序)后的操作,类似于while中的n++之类的。

对于初学者来说,仅仅看上面的语法是无法理解的,先来看一个例子。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> for(var i=0;i<5;i++ ) { document.write(i+"<br/>"); } </script> </head> <body> </body> </html>

浏览器预览效果如下图所示

分析过程如下图所示。

分析:

在for循环中,首先定义一个用于计数的变量i,其中i的初始值为0。然后定义一个判断条件i<5,只要i小于5就会执行for循环中的程序。最后定义一个循环后的表达式i++,也就是说,每次循环之后都会进行一次i++。

第1次执行for循环。

初始化:var i = 0; 判断:i<5(i的值为0,返回true) 输出:0 更新:i++(执行后i=1

第2次执行for循环。

判断:i<5(i的值为1,返回true) 输出:1 更新:i++(执行后i=2) ……

第3次执行for循环。

判断:i<5(i的值为4,返回true) 输出:4 更新:i++(执行后i=5

第4次执行for循环。

判断:i<5(i的值为5,返回false)。 由于i<5返回false,因此条件不满足,退出for循环。

当然,这个例子我们也可以使用while或者do…while来实现。因为程序是活的,不是死的,想要实现某一个功能,方式是多种多样的。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> for (var i = 2; i < 5; i++) { var str = "<p style='font-size:" + i * 5 + "px'>总有刁民想害朕</p>"; document.write(str); } </script> </head> <body> </body> </html>

浏览器预览效果如图所示。

分析:

小伙伴要特别注意了,这里的for循环,变量i的初始值是2而不是1。在循环体中,我们使用“拼接字符串”(也就是用加号拼接)的方式来构造一个“HTML字符串”。大家好好琢磨一下这个例子,非常有用喔。

很多没有编程基础的初学者在for循环都会卡一下,对这种语法感到很难理解。其实大家都这样过来的,并不是你一个。所以不要老埋怨自己笨,因为谁都做过小白。语法记不住没关系,等你要用了,回来这里对着这几个例子“抄”过去,然后写多两次,自然就会了。