JavaScript基础---if语句、switch语句、while循环语句、for循环语句、break和continue关键字---10.1

流程控制语句

通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行。

语句的分类：

1. 条件判断语句
2. 条件分支语句
3. 循环语句

条件判断语句

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

if语句

语法一：if....

if（条件表达式） {
   语句....
}

<script type="text/javascript">
     // if语句在执行时,会先对条件表达式进行求值判断
     // 如果条件表达式的值为true,则执行语句,为false则不执行
     var a = 15;
     if(a > 10 && a <= 20) {  
         alert("a大于10且a小于等于20");
         alert("不加{}谁也管不了我~~~~~");
     }
</script>

语法二：if...else...

if（条件表达式） {
   语句....
}else {

   语句....

}

<script type="text/javascript">
     var age = 50;
     if(age >= 60) {
         alert("你要退休啦！！！！");
     }else{
         alert("你还没退休呢嘿嘿嘿嘿嘿嘿");
     }
</script>

语法三：if...else if...else...

if（条件表达式）{
    语句...
}else if（条件表达式）{
    语句...
}else if（条件表达式）{
    语句...
}else{

    语句...

}

<script type="text/javascript">
     var age = 50;
     if(age > 100) {
         alert("活着挺没意思的~");
     }else if(age > 80) {
         alert("你也老大不小了~");
     }else if(age > 60) {
         alert("你该退休了~~~");
     }else if(age > 18) {
         alert("你也成年了");
     }else {
         alert("你还是未成年哦");
     }
</script>

if练习题1

// 从键盘输入小明的期末成绩：
// 当成绩为100时，'奖励一辆BMW'
// 当成绩为[80-99]时，'奖励一台iphone15s'
// 当成绩为[60-80]时，‘奖励一本参考书 '
// 其他时，什么奖励也没有

<script type="text/javascript">
    //   var number = 55;

    //prompt()可以弹出一个提示框，该提示框中会带有一个文本框
    //该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字
    //prompt("请输入小明的成绩:");
    //用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
    var number = prompt("请输入小明的成绩:");
    // 判断值是否合法
    if (number > 100 || number < 0 || isNaN(number)) {
      alert("请输入1-100的数值");
    } else {
      if (number == 100) {
        alert("奖励一辆BMW");
      } else if (number >= 80) {
        alert("奖励一台iPhone15s");
      } else if (number >= 60 && number < 80) {
        alert("奖励一本参考书");
      } else {
        alert("啥也没有");
      }
    }
</script>

if练习题2

// 提出一定的条件: 高：180cm以上  富：1000万以上；   帅：500以上；
// 如果这三个条件同时满足，则：'我一定要嫁给他'
// 如果三个条件有为真的情况，则：'嫁吧，比上不足，比下有余。'
// 如果三个条件都不满足，则：'不嫁！'

<script type="text/javascript">
     var height = prompt("请输入身高(cm)");
     var money = prompt("请输入财富值(万)");
     var look = prompt("请输入帅气值(px)");
     if(isNaN(height) && isNaN(money) && isNaN(look)) {
         alert("请输入数值~");
     }else {
         if(height >= 180 && money >= 1000 && look >=500) {
             alert("我一定要嫁给他！！！"); 
         }else if(height >= 180 || money >= 1000 || look >=500) {
             alert("嫁吧，比上不足比下有余！");
         }else {
             alert("不嫁！！！！");
         }
     }
</script>

if练习题3

 // 编写程序，由键盘输入三个整数分别存入变量num1、num2、num3
 // 对他们进行排序，且从小到大输出。

 <script type="text/javascript">
        //获取用户输入的三个数
        // prompt()函数的返回值是String类型
        var num1 = +prompt("请输入第一个数:");
        var num2 = +prompt("请输入第二个数:");
        var num3 = +prompt("请输入第三个数:");
        alert(typeof +num1);
        //先找到三个数中最小的数
        if(num1 < num2 && num1 < num3) {
            //num1最小，比较num2和num3
            if(num2 < num3) {
                //num1 < num2 < num3
                alert(num1 + "," + num2 + "," + num3);
            }else {
                alert(num1 + "," + num3 + "," + num2);
            }
        }else if(num2 < num1 && num2 < num3) {
            //num2最小，比较num1和num3
            if(num1 < num3) {
                alert(num2 + "," + num1 + "," + num3);
            }else {
                alert(num2 + "," + num3 + "," + num1);
            }
        }else {
            //num3最小，比较num1和num2
            if(num1 < num2) {
                alert(num3 + "," + num1 + "," + num2);
            }else {
                alert(num3 + "," + num2 + "," + num1);
            }
        }
    </script>

---

---

条件分支语句

switch...Case...语句：在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较。如果比较结果为true，则从当前case处开始执行代码；如果比较结果为false，则继续向下比较。使用break可以来退出switch语句。

switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能。所以我们使用时，可以根据自己的习惯选择。

switch语句

语法：

switch（条件表达式）{

     case 表达式：
            语句...
            break； 

     case 表达式：
            语句...
            break；    

     default：

            语句...

            break；

}

<script type="text/javascript">
  // 根据num的值，输出对应的中文
  // switch.,.case..语句在执行时会依次将case后的表达式的值和switch后的值进行全等比较
  // 如比较结果为true,则从当前case处开始执行代码,当前case后的所有的代码都会执行
  // 如比较结果为false,则继续向下比较。如所有的比较结果都为false,则只执行default后的语句
     var num = 3;
     switch(num) {
         case 1 :
             console.log("壹");
             break;//break关键字确保只会执行当前case后的语句，不执行其他case
         case 2 :
             console.log("贰");
             break;            
         case 3 :
             console.log("叁");
             break;            
         case 4 :
             console.log("肆");
             break;
     // 如果所有的比较结果都为false,则只执行default后的语句
         default :
             console.log("非法数字");
             break;
     }
</script>

switch练习题1

对于成绩大于60分的，输出'合格'。低于60分的，输出'不合格'。

// 第一种方式
      switch(parseInt(num/10)) {
          case 10 :
              console.log("优秀");
              break;
          case 9 :
              console.log("良好");
              break;
          case 8 :
          case 7 :
          case 6 :
              console.log("合格");
              break;
          default :
              console.log("不合格");
              break;
       }

// 第二种方式
      switch(true) {
          case num >= 60 :
              console.log("合格");
              break;
          default :
              console.log("不合格");
              break;
        }

---

---

循环语句

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

while循环

while（条件表达式） {

    循环体

}

while语句在执行时，先对条件表达式进行求值判断。如果值为true，则执行循环体，执行完毕后继续对表达式进行判断，如仍为true，则继续执行循环体，以此类推。如值为false，则终止循环。

<script type="text/javascript">
      var i = 0;
      while(i <= 990) {
          // i++;
          document.write(i++ + "<br />");
      }
</script>

do...while循环

do {

       循环体

   }while（条件表达式）

do...while语句在执行时，会先执行循环体，执行完毕后再对while后的条件表达式进行判断，
如果为true，则继续执行循环体，执行完毕继续判断。以此类推，如结果为fa lse，则终止循环。

实际上这两个语句功能类似，不同的是while先判断后执行，而do...while会先执行后判断。do...while可以保证循环体至少执行一次。

<script type="text/javascript">
     var i = 11;
     do {
         document.write(i++ + "<br />");
     }while(i <= 10);
</script>

---

死循环

<script type="text/javascript">
     var i = 11;
     while(true) {
         // document.write("hello");// 不用试，内存满了强制关闭
         // alert(1);// 死循环可以在外部浏览器中测试，最好不要再内部测
     }
</script>

---

while练习题1

假如投资的年利率为5%，试求从1000块增长到5000块，要花费多少年

<script type="text/javascript">
     // 1000  1000*1.05
     // 1050  1050*1.05

     //定义一个变量，表示当前的钱数
     var money = 1000;
     // 定义一个计数器
     var count = 0;
     // 定义一下while循环
     while(money <= 5000) {
         money *= 1.05;
         count++;
     }
     console.log("当前为" + "第"+count+"年" + "共计"+ money);
</script>

while练习题2

<script type="text/javascript">
     // 将一个number放入一个循环中
     while(true) {
         var number = prompt("请输入小明的成绩(0-100):");
         if(number <= 100 && number >= 0) {
             break;
         }
         alert("请输入有效的值");
     }
     if (number > 100 || number < 0 || isNaN(number)) {
         alert("请输入1-100的数值");
     } else {
     if (number == 100) {
       alert("奖励一辆BMW");
       } else if (number >= 80) {
       alert("奖励一台iPhone15s");
       } else if (number >= 60 && number < 80) {
       alert("奖励一本参考书");
       } else {
       alert("啥也没有");
       }
     }
</script>

---

---

for循环

for（初始化变量；条件表达式；操作表达式） {

      循环体

}

<script type="text/javascript">
     // 创建一个执行10次的while循环
     for(var i = 0; i < 10; i++) {
         alert(i);
     }
</script>

     // for循环中的三个部分都可以省路，也可以写在外部
        var i = 0;
        for(;i<10;) {
            alert(i++);
        }

     // 死循环
        for(;;) {
            alert("hello");
        }

for循环练习题1

打印1-100之间所有7的倍数的个数及总和

<script type="text/javascript">        
     var sum = 0; // 定义一个变量来保存总和
     var count = 0; // 定义一个变量来记录数量
     // 打印1-100之间所有的数
     for(var i = 1; i <= 100;i++) {
         // 判断i是否为7的倍数
         if(i %7 == 0) {
             sum += i;
             count++;
         }
     }
     console.log("总和为："+sum);
     console.log("共计个数为："+count);
</script>

for循环练习题2

水仙花数
水仙花数是指一个3位数，它的每个位上的数字的3次幂之和等于它本身，
例如：1^3+5^3+3^3=153，请打印所有的水仙花数

<script type="text/javascript">
     // 打印所有的三位数
     var i = 111;
     for(i = 100; i <=999; 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);
         }
     }
</script>

for循环练习题3

在页面中接收一个用户输入的数字，并判断该数是否是质数。
质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。

<script type="text/javascript">
   var num = prompt("请输入一个大于1的整数:");
      // 判断值是否合法
      if (num <= 1) {
        alert("该值不合法！！！");
      } else {
     // 创建一个变量来保存当前数的状态
     var flag = true;

     //判断num是否为质数
     //获取1-num之间的数
     for (var i = 2; i < num; i++) {
       // console.log(i);
       // 判断num是否能被i整除
       if (num % i == 0) {
         // 如果num能被i整除，则说明num一定不是质数
         // 设置flag为false
         flag = false;
       }
     }
   }
   if (flag) {
     alert(num + "是质数！！！");
   }else {
     alert(num + "不是质数~~~~~");
   }
</script>

---

嵌套for循环

<script type="text/javascript">
   // 在循环的内部再创建一个循环，用来控制图形的宽度
   // 目前我们的外部的for循环执行1次，内部的就会执行10次
   for (var i = 0; i < 10; i++) {
     // for (var j = 0; j < 10; j++) {
     // for (var j = 0; j < i+1; j++) {
     for (var j = 0; j < 5-i; j++) {
       document.write("*&nbsp&nbsp");
     }
     document.write("<br />");
   }
</script>

嵌套for循环练习题1

打印九九乘法表

<script type="text/javascript">
    var str = '';
    for(var i=1; i<=9; i++) {
        for(var j=1; j<= i; j++) {
           str += j+'X'+i+'='+j*i+'  ';
        }
        str += '\n';
    }
    alert(str);
</script>

嵌套for循环练习题2

打印1-100中所有的质数

<script type="text/javascript">
     for(var i = 2; i <= 100; i++) {
         var flag = true;
         // 判断i是否为质数
         // 获取2-i之间所有的数
         for(var j = 2; j < i; j++) {
             // 判断i是否能被J整除
             if(i%j == 0) {
                 //进入判断则证明i不是质数
                 flag = false;
             }
         }
         if(flag) {
             console.log(i);
         }
     }
</script>

---

---

break和continue

• break关键字可以用来退出switch或循环语句。continue只能用于循环语句。
• 不能在if语句中使用break和continue。
• break关键字会立即终止离他最近的循环语句。

• continue关键字可以跳过当次循环，默认对离他最近的循环起作用。

<script type="text/javascript">
     // for(var i = 0; i < 5; i++) {
     //     console.log(i);
     //     if(i == 2) {
     //         break;
     //     } 
     // }

     // 可以为循环语句创建一个label,来标识当前的循环
     // label:循环语句
        outer:
        for(var i = 1; i <= 5; i++) {
            console.log("@外层循环" + i)
            for(var j = 0; j < 5; j++) {
                break outer;// 这样break将会结束指定的循环，而不是最近的循环
                console.log("内层循环" + j);
            }
        }

        for(var i = 0; i < 5; i++) {
            if(i == 2) {
                // break;
                continue;//continue关键字可以跳过当次循环
            }
            console.log(i);
        }
</script>

时间计时器

测试如下的程序的性能:在程序执行前，开启计时器console.time("计时器的名字")；需要一个字符串作为参数,字符串将会作为计时器的标识

        console.time("test");

        for(var i = 2; i <= 10000; i++) {

            var flag = true;

            for(var j = 2; j <=  Math.sqrt(i); j++) {

                if(i%j == 0) {

                    flag = false;

                    break;

                }

            }

            if(flag) {

                console.log(i);

            }

        }

终止计时器console.timeEnd()；用来停止计时器，需要计时器的名字作为参数

        console.timeEnd("test");

可以通过Math.sqrt()对一个数进行开方
var result = Math.sqrt(4)；
console.log("result = "+result)；