JavaScript基础&实战（3）js中的流程控制语句、条件分支语句、for循环、while循环

本文链接：https://blog.csdn.net/weixin_43304253/article/details/124471760

本文详细介绍了JavaScript中的流程控制语句，包括条件分支（if...else）、switch语句、循环（while、do...while、for）。通过实例代码和测试结果，展示了如何在JavaScript中实现条件判断及不同类型的循环操作，对于理解和应用JavaScript控制流程有很好的指导作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、流程控制语句

1.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*

           流程控制语句：
                     JS中的程序是从上到下一行一行执行的

                    语法1:
                       if(条件表达式){
                           语句
                       }
                       成功执行括号的内容，一条语句可以省略括号

                    语法2：
                       if(条件表达式){
                           语句
                       }else{
                           语句
                       }


                    语法3：
                         if(条件表达式){
                             语句
                         }else if(条件表达式){
                             语句
                         }else if(条件表达式){
                             语句
                         }else{
                             语句
                         }

    */
                  
            var a = 1, b = 2;
            if(a < b){
                      console.log("成立");
            }

            if(a > b){
                console.log("1111");
            }else{
                console.log("22222");
            }

            

    </script>
</head>

<body>



</body>

</html>

1.2 测试结果

在这里插入图片描述

2、弹窗提示输入内容

2.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>弹窗</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*

              prompt 可以弹出一个提示框，该提示框中会带有一个文本框
                      用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，
                      该字符串作为弹窗的提示内容。

                      用户输入的内容将会作为函数的返回值 返回，可以定义一个变量接收该内容

    */

                          var age = prompt("请输入你的年龄：")
                          console.log(age);
    </script>
</head>

<body>



</body>

</html>

2.2 测试结果

在这里插入图片描述

3、条件分支语句

3.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>条件分支语句</title>
    <style type="text/css"> </style>

    <script type="text/javascript">
    /*
           
                 条件分支语句也叫switch语句
                         语法
                            switch(条件表达式){
                                case : 表达式:
                                        语句...
                                        break;
                                case : 表达式:
                                        语句...
                                    break;
                                case : 表达式:
                                        语句...
                                    break;
                                default:
                                    语句...
                                    break;
                            }

    */

                          var num = prompt("请输入整数数字")
                          //从弹窗输入的是字符串，需要强制类型转换为num，switch中的判断是 === 比较类型和内容
                          num = Number(num)
                          switch(num){
                              case 1:
                                  console.log("1");
                                  break;
                                    
                              case 2:
                                  console.log("2");
                                  break;
  
                              default:                                
                                  console.log("默认值");
                                  break;
                          }

    </script>
</head>

<body>



</body>

</html>

3.2 测试结果

在这里插入图片描述

4、while和 do…while循环

4.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>while循环语句</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*

                        循环语句：
                            通过循环语句可以反复的执行一段代码多次

                            语法：
                                while(表达式){
                                    语句...
                                }

                           执行流程： 表达式成立，执行语句

                            do...while() 循环
                               
                               语法：
                                   do{
                                       语句
                                   }while(表达式)

                            执行流程： 先执行一遍循环体，然后条件判断

    */
                            var n = 1 ;
                            //条件表达式写死为true的循环，死循环。可以使用break终止循环
                    /*
                           while(true){
                               alert(n++);
                               break;
                           }

                    */

                    while(n < 6){
                        document.write(n++ +"<br>")

                    }
    </script>
</head>

<body>



</body>

</html>

4.2 测试结果

5、for循环

5.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>for循环</title>
    <style type="text/css"> </style>

    <script type="text/javascript">
    /*


                          for语句，也是一个循环语句，也称为for循环

                             语法 ：
                                  for(初始化表达式;条件表达式; 更新表达式){
                                      语句...
                                  }
                               

    */
                            
                            for(var i =0 ; i < 10; i++){
                                document.write(i+"<br>")

                            }


    </script>
</head>

<body>



</body>

</html>