JavaScript每日一学 —— 第三天

目录

流程控制三大结构之——循环结构

(1)while循环

(2)死循环

(3)do while循环

(4)for循环

(5)break和continue

(6)循环对比

(7)循环应用小例子

---

流程控制三大结构之——循环结构

循环的概念：

循环就是重复的做一件事

循环结构是程序中一种很重要的结构，其特点是在给定条件成立时，反复执行某程序段，直到条件不成立为止。

循环三要素：

从哪里开始(循环起点)

到哪里结束(循环的结束条件)

 步长（步进） （使循环技术增加或减少，趋近于结束条件）

(1)while循环

var i = 0 
while(条件){
    业务代码
    i++
}

// while是系统关键字，你直接理解为是循环即可
// var i = 0 表示的是变量初始化，就是循环从哪里开始
// while后面的括号里面放的是条件，循环的终止条件。循环到哪里结束
// 只有满足条件的时候业务代码才会输出
// i++ 表示变量自增，变量更新

例如

// 求5的阶乘？5! = 1*2*3*4*5 = 120
var result = 1
var i = 1
while(i<=5){
    result *= i
    i++
}
console.log(result)

循环的执行顺序

            + 第一次执行

              => 先执行变量初始化 var i = 1，var rsult = 1,在整个循环的执行过程中只执行一次

              => 执行判断条件，如果满足条件就进入循环体，不满足就跳出 i<=5

              => 执行业务代码 result *= i

              => 执行变量更新 i++

            + 第二次执行

              => 先执行判断条件，如果满足条件就进入循环体，不满足就跳出 i<=5

              => 执行业务代码 result *= i

              => 执行变量更新 i++

            + 第三次执行

              => ...

(2)死循环

执行条件一直处于成立的状态，业务代码会一直进行输出，把这种情况称之为死循环

形成死循环的条件

              => 判断条件一直为真

              => 变量没有更新

注意点

              => 讲解死循环的目的是为了让大家避免写死循环程序，而不是让你去写

              => 死循环会让程序一直执行，导致内存都占满，电脑会出现卡死的现象

// 最简单的死循环
while(true){
    console.log('蔡徐坤要执行了！你准备好了吗？')
}

(3)do while循环

先斩后奏类型的循环结构，第一次执行循环的时候无论条件是否满足都会先执行一次

do while是从while循环结构上面衍生出来的

语法:

              do{

              }while()

说明:

              do是系统关键字，表示要进入循环做什么

              while后面的括号里面放的是条件

循环执行顺序:

             变量初始化，只执行一次

             先进入循环体，执行业务代码，再执行变量更新，再去执行判断条件。

             第二次，重复第一次的过程

//适用于当后端数据没有及时更新时给用户一些提示信息
//如果使用的是while循环的话，后端由于某种特殊的原因没有返回数据，那么count就是一个null，
//进入不了循环体里面。用户也不知道是怎么回事
var count = null
var i = 1
do{
    if(count == null){
        alert('亲，由于网络加载较慢，请耐心等待！可以点击去其他精彩')
        // 如果遇到break就终止整个循环的执行了
        break
    }
    console.log(i+'hello')
    i++
}while(i<=count)

(4)for循环

for循环和while循环比较的话，它的结构上更为清晰。是把变量初始化、判断条件、变量更新是放在一起的

语法：

        for(var i=1; i<=5; i++){

                  业务代码

        }

说明：

        for也是系统关键字

        for循环的执行顺序和while循环执行顺序是一样的

var sum = 0
for(var i=1; i<=100; i++){
     sum += i
}

 for循环的执行顺序：

            第一次执行

            先执行变量初始化 var i = 1，sum = 0在整个循环的执行过程中只执行一次

            执行判断条件，如果满足条件就进入循环体，不满足就跳出 i<=100

            执行业务代码 sum+=i

            执行变量更新 i++

            第二次执行

            先执行判断条件，如果满足条件就进入循环体，不满足就跳出 i<=100

            执行业务代码 sum+=i

            执行变量更新 i++

            第三次执行....

示例：

打印🐂字塔

                 🐂

               🐂🐂

              🐂🐂🐂

             🐂🐂🐂🐂

            🐂🐂🐂🐂🐂

//空格数量 = 总行数 - 每一行的牛数
for(var i=1; i<=5; i++){
    // 根据空格的规律输出对应的空格数
    for(var k=1; k<=5-i; k++){
        document.write('&nbsp;')
    }
    for(var j=1; j<=i; j++){
        document.write('🐂')
    }
    document.write('<br/>')
}

(5)break和continue

break： 用于无条件结束各种循环和switch，一般情况下，需要在break语句之前加一个条件判断。换句话说：就是条件成立了，就退出循环，只能跳出单层循环，不能一次跳出多重循环

continue ：终止本次循环的执行，下次循环会继续执行，一般情况下，需要在continue语句之前加一个条件判断。

//continue例子
for(var i=1; i<=10; i++){
    if(i==5){
        continue
    }
    console.log(i)
}
//1 2 3 4 6 7 8 9 10


//break例子
for(var i=1; i<=10; i++){
    if(i==5){
        break
    }
    console.log(i)
}
//1 2 3 4

(6)循环对比

1、for循环和while循环语法规则略有不同，两种方法可以替换使用，但是在部分问题上各有优势

2、for循环一般用于循环次数确定的情况下

3、while一般用于循环次数不确定的情况下

注意点：当循环的次数确定时，使用for循环和while循环差别不大，但是当循环次数不确定时，while方法使用起来更加方便，更加好理解。

//用户可以猜5次  ,若用户猜的小于50，提示：猜小了；否则提示猜大了；猜中了，提示：中奖了(不能继续猜谜)
var i=1;
while(i<=5){
    var num=prompt('请输入谜底');
    if(num<50){
        alert('猜小了!');
    }else if(num>50){
        alert('猜大了!');
    }else{
        alert('猜中了!');
        break;
    }
    i++;
}

//不限定用户猜测次数，若用户猜的小于50，提示：猜小了；否则提示猜大了；猜中了，提示：中奖了(不能继续猜谜)
while(true){
    var num=prompt('请输入谜底');
    if(num<50){
        alert('猜小了!');
    }else if(num>50){
        alert('猜大了!');
    }else{
        alert('猜中了!');
        break;
}

(7)循环应用小例子

 输出九九乘法表

for(var i=1; i<=9; i++){
    for(var j=1; j<=i; j++){
        document.write(j+'&times;'+i+'='+i*j+'&emsp;')
    }
    document.write('<br>')
}

ps:想要其他的效果，可以输出表格或者span这种，然后自己去设置样式就好了