03-JS循环语句

循环结构

表示程序需要重复执行的一件事/程序

一、while循环

当…时候，去执行一件事情

while(可以进入循环的条件){
    满足了循环条件进来执行的代码
}
// 案例：利用while循环中的变量输出数字1~5
var i = 1;
while(i<=5){
    document.write(i);
    i++;
}

二、do…while循环语句

do…while循环是while循环的改写方式，循环流程类似。

不同的地方在于do while循环会先执行一次，不管条件是否成立。后面的流程和while一样

do{
    条件成立执行的代码
}while(条件语句)
    
// 案例1：利用do...while循环中的变量输出数字1~5
var i = 1;
do{
    document.write(i);
    i++;
}while(i<=5)
    
// 案例2：使用while和do...while实现100以内7的倍数
var i = 7
while(i<=100){
    if(i%7==0){
        console.log(i)
    }
    i++
}
----------
var j = 7
do{
    if(j%7==0){
        console.log(j)
    }
    j++
}while(j<=100)

三、for循环语句【重点】

1. for循环的基本使用

for(声明变量并赋初值;条件表达式;每重复一次后变量的变化规律){
    重复执行的代码块
}

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

2. 关于for循环的一些演变写法

// 演变1：把初始值放在循环体的外面（可以写在外面但是不能把分号带走）
var i=1
for(;i<=100;i++){
    console.log(i)
}

// 演变2：变量的变化放在循环的下面
for(var i=1;i<=100){
    console.log(i)
    i++ //while循环的写法
}

// 演变3：尝试用for循环写一个死循环？
for(;;){
    console.log('死循环')
}

3. for循环流程控制语句

1. 在循环中有两个关键字可以改变循环执行的流程
2. break 可终止循环，直接让整个循环结束运行
3. continue 可以跳出当前这次的循环，直接进入下一次的循环

// 1. break关键字的使用
for(var i=1;i<=5;i++){
    if(i==3){
        break;//当i=3的时候，直接结束整个循环的运行
    }
    document.write(i);//最后输出结果是12
}

// 2. continue关键字的使用
for(var i=1;i<=5;i++){
    if(i==3){
        continue;//当i=3的时候，直接进入下一次的循环
    }
    document.write(i);//最后结果是1245
}

4. for循环的嵌套使用

让一段重复执行代码重复执行

// 案例：5位同学分别绕着操场跑5圈
for(var i=1;i<=5;i++){
    for(var j=1;j<=5;j++){
        document.write("第"+i+"个人跑第"+j+"圈");
    }
}

for循环是用的最多的，以下是常见的for循环嵌套案例

1. 案例1：在浏览器上实现生成三行三列的表格

   document.write('<table>')
   	for(var i=1;i<=3;i++){
           document.write('<tr>')
           for(var j=1;j<=3;j++){
               document.write('<td></td>')
           }
           document.write('</tr>')
       }
   document.write('</table>')
   

2. 案例2：在浏览器上实现九九乘法表

   document.write('<table>')
   for (var i = 1; i <= 9; i++) {
       document.write('<tr>')
       for (var j = 1; j <= i; j++) {
           document.write('<td>' + j + 'x' + i + '=' + (i * j) + '</td>')
       }
       document.write('</tr>')
   }
   document.write('</table>')
   

拓展：关于浏览器的断点功能

1. 第一种方法：在浏览器中
   • 打开控制台找到sources(资源)
   • 左侧是page页面，中间的是代码的运行过程，右侧是断点的使用按钮
2. 第二种方法：在代码中
   • 在需要运行断点的地方书写一个关键字：debugger