在JS开发中,for循环由于它执行条件以及结构方便我们进行监测,是我们经常使用的使用的一种循环。
1.for循环的结构
for循环的基本结构如下:
for(单次执行条件;判断条件;最后执行的循环体条件){
循环体;
}
单次执行条件:顾名思义只执行一次的条件,只在循环开始时执行,之后不再执行;
判断条件:循环体执行结束后,判断是否继续执行的条件,每次循环体结束,都要进行判断,也就是只有条件为true时,才继续执行。
循环体:从for循环的结构中,可以看到,循环体有两部分组成,先执行{}中的“循环体”,在执行“最后执行的循环体条件”
例如:在js中,使用for循环打印0-9这10个数字。
for(var i=0;i<10;i++){
console.log(i);
}
2.for循环的执行顺序
在结构中,也说到了for循环的执行顺序,在这里总结一下。
(1)执行“单次执行条件”
(2)执行{循环体}
(3)执行“最后执行的循环体条件”
(4)“判断条件”进行判断,如果满足条件继续执行,不满足条件循环结束。
(5)继续执行,则重复(2)(3)(4)
3.双重循环嵌套执行原理
双重循环的执行原理,我们通过一个案例进行说明。
说明:用for循环,打印九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
width: 600px;
height: 400px;
margin: 50px auto;
border-collapse: collapse;
}
td{
text-align: center;
border: 1px solid #000000;
}
</style>
</head>
<body>
<script>
var str = "<table>";
for(var i = 1;i<10;i++) {
str+="<tr>"
for(var j =1;j<=i;j++) str+="<td>"+i+"*"+j+"="+i*j+"</td>";
str+="</tr>";
}
document.body.innerHTML+=str+"</table>";
</script>
</body>
</html>
执行结果如下图:
在上述代码中,可以看到用了两个for循环进行嵌套,外层的for循环中i,可以看做是行数,内层for循环中j,可以看做是列数,九九乘法表的特点是第几行,就具有几列,因此让i=j。
执行顺序为:
(1)外层循环首先执行一次
外层循环的循环体为阴影部分
其中包含着内层for循环,在执行内for循环时,执行顺序按照本文“for执行顺序”的步骤进行执行,
(2)整个外层循环的循环体执行完成后,执行“最后执行的循环体条件”,也就是i++;
(3)判断外层循环的“判断条件”
(4)顺序通上文的“for执行顺序”。