2.JS-流程控制语句

流程控制语句

  • JS中的程序时从上到下一行一行执行的

  • 通过流程控制语句可以控制程序执行流程

    • 使程序可以根据一定的条件来选择执行

  • 语句的分类:

    1. 条件判断语句

    2. 条件分支语句

    3. 循环语句

条件判断语句:

  • 使用条件判断语句可以在执行某个语句之前进行判断, 如果条件成立才会执行语句,条件不成立则语句不执行。

  if语句 

  • 语法一:

    • if (条件表达式) 语句

      • if语句在执行时,会先对条件表达式进行求值判断, 如果条件表达式的值为true,则执行if后的语句, 如果条件表达式的值为false,则不会执行if后的语句。

    • if 语句 只能控制紧随其后的那个语句,

      • 如果希望if语句可以控制多条语句, 可以将这些语句统一放到代码块中

    • if  语句 后的代码块不是必须的,但是在开发中尽量写上代码块,即使if后只有一条语句

  • 语法二:

    • if(条件表达式){ }

      else(条件表达式){ }

  • 语句三:

    • if(条件 表达式){ }

      else if (条件表达式){ }

      else (条件表达式){ }

  • if...else if ... else

    • 该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句


输入输出语句

prompt(输入)

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

该字符串将会作为提示框的提示文字)

prompt()函数的返回值是String类型的(不管输入的数据是什么类型)


条件分支语句 (switch)

  • 条件分支语句也叫 switch 语句

  • 语法:

    • switch(条件表达式){
          case 表达式:
              语句...
              break;
          case 表达式:
              语句...
              break;
          case 表达式:
              语句...
              break;
          default:   //类似if语句中的else
              语句...
              break;
      }

    • 如果好几个表达式成立结果是同一个语句也可以写成:

    •    // 练习1
              var score = 62;
      ​
              //1-1 好几个表达式成立造成的结果时同一个语句时也可以写成以下形式
              /*
              switch(score){
                  case 62:
                  case 61:
                  case 60:
                      console.log("合格");
                      break;
              }
              */
              //1-2 满足以上形式的另一种编写方式是,直接 将case后表达式与switch后面表达式进行比较,但该方式只适用于js程序
              switch(true){
                  case score >= 60:
                      console.log("合格");
                      break;
                  default:
                      console.log("不合格");
                      break;
              }

      表达式为结果有小数点的除法表达式时,对结果进行取整

       //练习2
              // var score = 85;
      ​
              // switch(score/10){
             
              switch(parseInt(score/10)){    //对表达式结果取整,并且判断
                  case 10:
                  case 9:
                  case 8:
                      console.log("合格");
                      break;
                  default:
                      console.log("不合格");
              }
              


循环语句:

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

while循环

  1. 语法:

    • while(条件表达式){ //以下内容为循环体

      语句...

      //退出循环

      break;

      `}

  2. while语句在执行时,

    • 先对条件表达式进行判断,

      1. 如果值为true,则执行循环体,

        • 循环体执行完毕以后,继续对表达式进行判断

        • 如果为true,则继续执行循环体,以此类推

      2. 如果值为false,则终止循环

  • while循环练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            假如投资的年利率为5%,试求从1000块增长到5000块,需要花费多少年
        */
        var n = 0;
        var i = 1000;
        while(i<5000){
            i=i*1.05;
            n++;
        }
        alert("一共需要"+n+"年")
​
    </script>
</head>
<body>
    
</body>
</html>

do...while循环

  1. 语法:

    • do{

      语句...

      }while(条件表达式)

  2. 执行流程:

    • do...while 语句在执行时,会先执行循环体,执行完之后才对条件表达式进行判断,

      1. 如果结果为true,则继续执行循环体,执行完毕继续判断,以此类推

      2. 如果结果为false,则终止循环

  • 实际上while循环和do...while循环功能类似,不同的是,while是先判断后执行,而do...while是先执行后判断

  • do...while可以保证循环体至少执行一次,而while不能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
         *  例:向页面中输出连续的数字
         */
        //1-1 直接输出

         document.write(1+"<br />");
         document.write(2+"<br />");
         document.write(3+"<br />");
         document.write(4+"<br />");
         
​
        //1-2  按公式直接输出
        
        var n = 1;
        document.write(n++ +"<br />");
        document.write(n++ +"<br />");
        document.write(n++ +"<br />");
        document.write(n++ +"<br />");
        

        //1-3  循环输出
​
        /*
            1-3-1 创建一个死循环(慎用),设置一个终止条件
        */
​
        var n = 1;
        while(true){
            alert(n++);
​
            //判断n是否等于6
            if(n == 6){
                //退出循环
                break;
            }
        }
​
        /* 
            1-3-2 
        */
​
        var i = 1;
        while(i <= 6){
            document.write(i +"<br />");   
            i++;
            document.write(i++ +"<br />"); 
            //退出循环
            break;
        }
    </script>
​
</head>
<body>
    
</body>
</html>

for循环

  • 在 for循环中,为我们提供了专门的位置用来放三个表达式:

    1. 初始化表达式

    2. 条件表达式

    3. 更新表达式

  1. 语法:

    • for(初始化表达式;条件表达式;更新表达式){ //for循环中的三个部分都可以省略,也可以写在外部

      //如果在for循环中不写任何表达式,只写两个; ,此时循环是一个死循环会一直执行下去,慎用

      语句...

      }

  2. 执行流程:

    1. 执行初始化表达式,初始化变量

    2. 执行条件表达式,并且判断是否执行循环 (true执行,false不执行)

    3. 执行更新表达式,执行完毕后继续执行第2步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            while循环形式
        */
        // var i = 0;
        // //创建一个循环,定义条件表达式
        // while(i < 10){
        //     //设置更新表达式
        //     alert(i++)
        // } 
​
​
        /*
            for循环形式
        */
        for(var i = 0 ; i < 10 ; i++ ){
            alert(i);
        }
​
        /*
            for 循环中的三个部分都可以省略也可以写在外部,如下
        */
       var i = 0;
       
       for(;i<10;){
           alert(i++);
       }
    </script>
</head>
<body>
    
</body>
</html>
  • for循环练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            第一题:打印1-100之间所有的奇数之和
​
            步骤:
            1.初始化一个数字表达式
            2.定义条件表达式,1-100之间的所有奇数
            3.定义更新表达式
        */
​
        /*
            方法一:
        */
​
        // var count=0;
        // var sum = 0;
        // for(var i = 1;count<100;i++){
        //     sum += count;
        //     count=2*i-1;
        // }
        // alert(sum);
​
​
        /*
            方法二:(更简单)
        */
​
        // var sum = 0;
        // for(var i= 1; i<=100 ; i++){
        //     if(i%2 != 0){
        //         sum +=i;
        //     }
        // }
        // alert(sum);
​
​
        /*
            第二题:打印1-100之间所有7的倍数的个数及总和
        */
        
        // var num = 0 ,sum_2 = 0;
        // for(var i = 1 ; i <= 100 ; i++){
        //     if(i%7 == 0){
        //         num += 1 ;     //计数
        //         sum_2 += i ;   //求和
        //     }
        // }
        // console.log("总和为:"+sum_2);  //控制台上显示
        // console.log("总数量为:"+num);
​
​
        /*
            第三题:水仙花数  
            水仙花数是指一个3位数,它的每个位上的3次幂之和等于它本身。
            (例如:1^3+5^3+3^3=153),请打印所有的水仙花数
        */
​
        //打印所有的三位数
        // for(var i=100;i<1000;i++){
        //     //获取i的百位 十位 个位的数字
        //     //获取百位上的数字 
        //     var bai =  parseInt(i/100);
​
        //     //获取十位上的数字
        //     var shi = parseInt((i-bai*100)/10);
​
        //     //获取个位上的数字
        //     var ge = i%10;
            
        //     //判断i是否是水仙花数 
        //     if(bai*bai*bai+shi*shi*shi+ge*ge*ge ==i){
        //         console.log(i)
        //     }
        // }
​
​
        /*
            第四题:在页面中接收一个用户输入的数字,并且判断该数是否是质数。
                质数:只能被1和它自身整除的数,1不是质数也不是合数,质数必须是大于1的自然数
        */
​
        //接收数据
        var num = prompt("请输入一个大于1的整数:");
        
        //判断这个值是否合法
        if(num<=1){
            alert("该值不合法!!");
        }else{
​
            //创建一个变量用来保存当前的数的状态
            //默认当前num是质数
            var flag = true;
​
​
            //判断num是否是质数
            //获取2-num之间的数
            for(var i =2; i<num;i++){
                // console.log(i);
                //判断num是否能被i整除
                if(num % i ==0){
                    //如果num能被i整除,则说明num一定不是质数
                    //设置flag为false
                    flag=false;
                    // break;
                }
            }
            if(flag){
                //如果num是质数则输出
                alert(num+"是质数!!!");
            }else{
                alert("这个不是质数!!")
            }
​
        }
​
​
    </script>
</head>
<body>
    
</body>
</html>

for循环嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            通过程序,在页面中输出如下的图形:
            *
            **
            ***
            ****
            *****
​
            *****
            *****
            *****
            *****
            *****
        */
​
        //向body中输出一个内容
        // document.write("*****<br />");
        
        //通过一个for循环 来输出图形
        //控制高度
        // for(var i=0  ;i<5;i++){
        //     /*
        //         在循环的内部再创建一个循环用来控制图形的宽度
        //     */
        //    //控制宽度
        //     for(var j=0;j<5;j++){
        //         document.write("*&nbsp;");
        //     }
​
        //     //输出一个换行
​
        //     document.write("<br />")
        // }
​
        for(var i=0  ;i<5;i++){
            //正
            for(var j=0;j<i+1;j++){
                document.write("*&nbsp;");
            }
            document.write("<br />")
        }
        for(var i=0  ;i<5;i++){
            //反
            for(var j= 0;j<4-i;j++){
                document.write("*&nbsp;");
            }
            document.write("<br />")
        }
​
    </script>
</head>
<body>
    
</body>
</html>

  • for循环嵌套练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            练习1.打印99乘法表
        */
        // for(var i=1;i<=9;i++){
        //     for(j=1;j<=i;j++){
        //         document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;");
        //     }
        //     document.write("<br />");
        // }
 
        /*
            练习2:打印出1-100之间所有的质数
        */
​
        //打印2-100之间所有的数
        for(var i=2 ; i<=100 ; i++){ 
            
            //创建一个布尔值,用来保存结果,默认i是质数
            var flag = true;
​
            //判断i是否是质数
            //获取到1-i之间的所有数
            for(var j=2 ;j<i ;j++){
                //判断i是否能被j整除
                if(i%j==0){
                    //如果进入判断则证明i不是质数
                    flag = false;
                }
            }
            if(flag){
                //如果是质数,则打印i的值
                console.log(i);
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

break和continue

  break  

  • break关键字可以用来退出switch或循环语句

    • 不能再if语句中使用break和continue

    • break关键字,会直接终止离他最近的那个循环语句

  • 结束指定的循环

    • 可以为循环语句创建一个label,来标识当前的循环

    • label:循环语句

    • 使用break语句时,可以在break后跟着一个lebel,这样break将会结束指定的循环,而不是最近的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            outer:
            for(var i = 0; i<5 ;i++){
                console.log("@外层循环:"+i);
                for(var j = 0;j<5;j++){
                    break outer;
                    console.log("内层循环:"+j);
                }
    ​
            }
        </script>
    </head>
    <body>
        
    </body>
    </html>

  continue  

  • continue关键字可以用来跳过当此循环

    • 同样continue也是默认只会对离它最近的循环 起作用

  • 跳过指定循环和break一样

测试如下程序的性能

  • 在执行程序前,开启计时器

  • console.time("计时器的名字")可以用来开启一个计时器

    • 它需要一个字符串作为参数,这个字符串将会作为计时器的标识

  • console.timeEnd("计时器的名字"),用来停止一个计时器,需要一个计时器的名字作为参数

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            //测试如下程序的性能 
            //在程序执行前,开启计时器
            //console.time("计时器的名字")可以用来开启一个计时器 
            //它需要一个字符串作为参数,这个字符串将会啊作为计时器的标识 
            console.time("test");
             for(var i=2 ; i<=100 ; i++){ 
                var flag = true;
                for(var j=2 ;j<i ;j++){
                    //判断i是否能被j整除
                    if(i%j==0){
                        //如果进入判断则证明i不是质数
                        flag = false;
                        break;
                    }
                }
                if(flag){
                    //如果是质数,则打印i的值
                    console.log(i);
                }
            }
            
            //终止计时器
            //console.timeEnd()用来停止一个计时器,需要一个计时器的名字作为参数
            console.timeEnd("test");
    ​
        </script>
    </head>
    <body>
        
    </body>
    </html>


Math.sqrt( );

  • Math.sqrt();可以通过这个函数对一个数进行开方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.time("test");
         for(var i=2 ; i<=100 ; i++){ 
            var flag = true;
            for(var j=2 ;j<=Math.sqrt(i)  ;j++){
                //判断i是否能被j整除
                if(i%j==0){
                    //如果进入判断则证明i不是质数
                    flag = false;
                    break;
                }
            }
            if(flag){
                //如果是质数,则打印i的值
                console.log(i);
            }
        }
        //终止计时器
        //console.timeEnd()用来停止一个计时器,需要一个计时器的名字作为参数
        console.timeEnd("test");
​
    </script>
</head>
<body>s
    
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值