JavaScript流程控制-循环

JavaScript流程控制-循环

  • 1、循环的主要目的
  • 2、js中的循环
  • 3、for循环
    • 3.1、for循环语法结构
    • 3.2、for循环执行过程
    • 3.3、断点调试
    • 3.4、案例:一行打印五个小星星
    • 3.5、双重for循环
      • 3.5.1、双重for循环概述
      • 3.5.2、双重for循环执行过程
      • 3.5.3、打印五行列的小星星
      • 3.5.4、打印倒三角案例
      • 3.5.5、打印九九乘法表案例
    • 3.6、for循环小结
  • 4、while循环
  • 5、do while循环
  • 6、循环小结
  • 7、案例

1、循环的主要目的

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //循环的目的:可以重复执行某些代码
        for(var i = 1;i<=100;i++){
            console.log("我喜欢");  
        }
    </script>
    
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2、js中的循环

JavaScript流程控制-循环_第1张图片

3、for循环

在这里插入图片描述

3.1、for循环语法结构

JavaScript流程控制-循环_第2张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1、for 重复执行某些代码,同城跟计数有关系
        // 2、for 语法结构
        // for(初始化变量; 条件表达式;操作表达式){
        //     // 循环体
        // }
        // 3、初始化变量 就是用var 声明的一个普通变量 同城用于作为计数器使用
        // 4、条件表达式 就是用来决定每一次循环是否继续执行,就是终止的条件
        // 5、操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或递减)
        // 6、代码体验 重复打印100句 你好吗
        for(var i = 1;i <= 100; i++){
            console.log('你好吗');
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.2、for循环执行过程

JavaScript流程控制-循环_第3张图片

  • 1.首先执行里面的计数器变量var i = 1 .但是这句话在for里面只执行一次 index
  • 2.去i<=100来判断是否满足条件,如果满足条件就去执行循环体不满足条件退出循环
  • 3.最后去执行i++ i++是单 独写的代码递增第 一轮结束
  • 4.接着去执行i<=100如果满足条件就去执行循环体不满足条件退出循环 第二轮

3.3、断点调试

JavaScript流程控制-循环_第4张图片

3.4、案例:一行打印五个小星星

JavaScript流程控制-循环_第5张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = '';
        for(var i = 1;i<=5;i++){
            str = str+'★';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.5、双重for循环

3.5.1、双重for循环概述

JavaScript流程控制-循环_第6张图片

3.5.2、双重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>
    <script>
        // 1、双重for循环,语法结构
        // for(外层的初始化变量; 外层的条件表达式;外层的操作表达式){
        //      for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
        //          //执行语句
        //      }
        // }
        // 2、我们可以把里面的循环看做是外层的循环语句
        // 3、外层循环一次,里层的循环执行全部
        // 4、代码验证
        for(var i = 1;i <= 3;i++){
            console.log('这是外层循环第' + i + '次');
            for(var j = 1;j<= 3;j++){
                console.log('这是内层循环第' + j + '次');
                
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

3.5.3、打印五行列的小星星

JavaScript流程控制-循环_第7张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = '';
        for(var i = 1;i <= 5; i++){//外层循环负责打印五行
            for(var j = 1;j <= 5;j++){//里层循环负责一行打印五个星星
                str = str + '★';   
            }
            str = str +'\n'
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

JavaScript流程控制-循环_第8张图片

3.5.4、打印倒三角案例

JavaScript流程控制-循环_第9张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //打印倒三角案例
        var str = '';
        for(var i = 1;i <= 10;i++){//外层循环控制行数
            for(var j = i;j <=10;j++){//里面循环打印的个数不一样 j=i
                str = str+'★';
            }
            str = str +'\n';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

3.5.5、打印九九乘法表案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = '';
        for( var i = 1;i <= 9;i++){
            for(var j = 1;j <= i;j++){
                // 1 x 2 = 2
                str += j + 'x' + i + '=' + i * j +'\t';
            }
            str +='\n';//每一行打印完胡换行
        }
        console.log(str);
        
    </script>
</head>
<body>
    
</body>
</html>

JavaScript流程控制-循环_第10张图片

3.6、for循环小结

JavaScript流程控制-循环_第11张图片

4、while循环

JavaScript流程控制-循环_第12张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 弹出一个提示框,你爱我吗?如果输入我爱你,就提示结束,否则,一直询问。
        var message = prompt('你爱我吗?');
        while(message != '我爱你'){
            message = prompt('你爱我吗?');
        }
        alert('我也爱你呀')
    </script>
</head>
<body>
    
</body>
</html>

5、do while循环

JavaScript流程控制-循环_第13张图片

6、循环小结

JavaScript流程控制-循环_第14张图片

7、案例

JavaScript流程控制-循环_第15张图片

你可能感兴趣的:(JavaScript,javascript,前端)