Javascript 基础教程之循环语句
循环语句
for 循环
for(语句1;语句2;语句3)
执行语句;
}
语句 1 (代码块)开始前执行 starts. 语句 2 定义运行循环(代码块)的条件 语句 3 在循环(代码块)已被执行之后执行
下面我们来写一个实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环语句 for 循环</title> </head> <script type="text/javascript"> sum= 0; for(var i=1;i<=10;i++){ sum = sum + i; } document.write(sum); </script> <body> </body> </html>
如上代码,计算出1到10的和
我们在写一个实例:看下 i 值得变化
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环语句 for 循环</title> </head> <script type="text/javascript"> for(var i=1;i<=10;i++){ document.write("第"+i+"天<br>"); } </script> <body> </body> </html>
这样会i的值会从1一直加到10,小伙伴们可以试试
while 循环
while(条件){
执行代码块;
}
实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环语句 while 循环</title> </head> <script type="text/javascript"> var i=1; while(i<10){ document.write("php 中文网<br>"); i++; } </script> <body> </body> </html>
注:小伙伴们需要注意点,循环体内的i++ 是来更改条件的,如果没有这个i++来更改条件, 那么i=1; 是一直满足条件i<10 的,这样循环就会一直执行下去
我们称为死循环
下面我们使用while 循环再来写一个实例:计算1-10之和
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环语句 while 循环</title> </head> <script type="text/javascript"> var i = 1; var sum = 0; while(i<=10){ sum = sum + i; i++; } document.write(sum); </script> <body> </body> </html>
如上代码,这样输出也是1到10的和
注:while 循环,是先判断条件,如果条件满足,继续执行,条件不满足,跳出循环
如上图所示:i的初始值为1 这样是满足条件的,所以会执行循环体的内容 如果条件不满足,就会跳出循环体
比如i=11;执行下面语句,则不会执行i++;然后继续往下执行,输出结果sum;
do.....while 循环
do{
执行语句;
}while(条件);
下面我们来看一段实例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环语句 do....while 循环</title> </head> <script type="text/javascript"> var i = 11; do{ document.write(i+'次'); i++; }while(i<10); </script> <body> </body> </html>
如上代码,我们来分析一下, i的值首先是11,进入循环体,输出11次,然后执行 i++,这样此时 i 的值事12,然后判断,不满足条件,跳出循环;
注:do while 无论条件是否满足,至少会执行一次
下面我们接着用do while 做一个1到10 之和,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环语句 do....while 循环</title> </head> <script type="text/javascript"> var sum = 0; var i = 1; do{ sum = sum + i ; i++; }while(i<=10) document.write(sum); </script> <body> </body> </html>
continue 与 break
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
break 语句之前在switch里面我们已经用过 接下来,我们在例子里面讲解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>break</title> </head> <script type="text/javascript"> for(var i=1;i<=10;i++){ if(i==5){ //break; continue; } document.write(i+"<br>"); } </script> <body> </body> </html>
如上代码,大家可以吧continue 注释掉,写上break 看看俩者输出的区别
break 当 i 刚好等于5 的时候就直接跳出循环,所以只输出4次,
continue 当 i 等于5的时候跳出循环,继续执行,看输出结果,只有等于5的那次值没有输出出来