03-JS循环语句

循环结构

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

一、while循环

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

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

二、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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

三、for循环语句【重点】

1. for循环的基本使用

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

for(var i=1;i<=10;i++){
    document.write("hello");
}
1
2
3
4
5
6
7

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('死循环')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. for循环的嵌套使用

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

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

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

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

   document.write('')for(var i=1;i<=3;i++){
           document.write('')for(var j=1;j<=3;j++){
               document.write('')}
           document.write('')}
   document.write('')
   1
   2
   3
   4
   5
   6
   7
   8
   9

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

   document.write('')for(var i =1; i <=9; i++){
       document.write('')for(var j =1; j <= i; j++){
           document.write('')}
       document.write('')}
   document.write('
   
       
   
          
   ' + j + 'x' + i + '=' + (i * j) + '
       
   ')
   1
   2
   3
   4
   5
   6
   7
   8
   9

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

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