美文网首页
js中的流程控制

js中的流程控制

作者: 无崖老师 | 来源:发表于2020-03-30 19:09 被阅读0次

流程控制(理解)

为什么要学习流程控制

实际项目中, 不可能都是简单的顺序结构(从上往下执行), 会出现不同的条件, 就要根据条件不同做出相应的处理

程序的三种基本结构

顺序结构

  • 从上到下执行的代码就是顺序结构
  • 程序默认就是从上到下,一行一行的顺序执行的
console.log("哈哈1");
console.log("哈哈2");
console.log("哈哈3");
图片.png

分支结构(重点)

  • 分支结构, 也叫选择结构 , 根据不同的情况,执行对应的代码
    图片.png

循环结构

  • 循环结构:重复做一件事情


    图片.png

prompt()方法(掌握)

语法:window.prompt(“弹出的输入框提示信息”,”弹出的输入框默认信息”);

描述:打开网页弹出一个输入框

// 弹出输入框
var str = window.prompt("请输入一个数字","1");
//打印用户输入的值
 document.write(str);

脚下留心:

1、prompt()是window对象的方法
2、prompt()有两个参数,参数之间用“,”逗号隔开
3、prompt()方法会返回用户输入的信息
4、参数也可不写

逻辑分支(重点)

找个小姐姐是否愿意做你女朋友,是就约会,不是就自己走!!

if语句(选择分支)

语法:

if(条件){
     执行语句
 }
    
1、if是系统关键字得小写
2、小括号必须是英文下面,小括号结果只有两个状态:true或false,如果为真则执行花括号“{}”里面的js代码

例1:判断年龄是否大于18岁

var age = 10;
if (age >= 18) {  // bool为true和false
    console.log('可以访问该网站')
}
if....else...

语法

    if(条件){

        执行语句1,为真时执行

    }else{

        执行语句2,为假时执行
    }
    
1、if 和 else 都是系统关键字
2、当条件为真,则执行第一个花括号内的代码
3、当条件为假,则执行第二个花括号内的代码

例1:输入一个年龄,大于18可以吃鸡,,小于18就回去玩泥巴(注:通过prompt() 方法)

<script>
// 定义一个num变量接受用户输入的数据
var num = prompt("请输入一个数字");
// console.log(num);

// 判断数字是奇数还是偶数
if(num>18){
    // 当条件为真,则执行该code
    document.write('可以吃鸡了');
}else {
    // 当条件为假,则执行该code
    document.write('不可以吃鸡');    
}
</script>

例2:判断奇数还是偶数

准备: 奇数除以2不能除尽 偶数可以除尽

  var a = 3;
  console.log(a%2);
  var b= 4;
  console.log(b%2);

案例

    var num = prompt('输入一个数字')
    if(num%2==0){  // 偶数的判断
        console.log('这是偶数')
    }else{
        console.log('这是奇数')
    }

<font color="red">分号:表示一个语句结束</font>

<font color="red">{}:也表示语句结束,所以我们不要在{}后写 ;</font>

if ....else if...else
        if(条件1){
            执行语句1
        }else if(条件2){
            执行语句2
        }else if(条件3){
            执行语句3
        }else{
            执行语句4
        }*/
       
1、if、else if、else 都是系统关键字
2、当条件1为真,则执行第一个花括号内的代码
3、当条件2为真,则执行第二个花括号内的代码
4、当所有条件都不为真,则执行else 花括内的代码

例:根据输入的成绩判断出级别

输入一个成绩判断该成绩属于哪个分类

思路

90分及以上,优秀; >= 90

80分及以上,良好 >=80

70分及以上,一般 >= 70

60分及以上,及格 >= 60

60分以下,不及格 >= 0

代码实现

    <script>
      // 多分支结构
    // 场景:三种以上情况的使用
    //  if(条件1){
    //    满足条件1,执行语句1
    // }else if(条件2){
    //     满足条件2,执行语句2
    // }else if(条件3){
    //     满足条件3,执行语句3
    // }else{
    //     不满足以上的条件,则执行这里
    // }
    
    // 根据输入的成绩判断级别
    var score = prompt('输入成绩');
    // 1 判断输入的是否为数字
   // console.log(isNaN(score))  // 非数字则为true
   if(isNaN(score)){
       document.write('输入的成绩有误')
   }else if(score>100){  // 判断成绩是否大于100
       document.write('你是来搞事情的')
   }else if(score>=90){ // 判断成绩是否大于等于90
        document.write('你是优秀的孩子,奖励越南新娘一个')
   }else if(score>=80){
        document.write('成绩良好了,泰国人妖')
   }else if(score>70){
         document.write('成绩一般,给你乔碧萝')
   }else if(score>60){
       document.write('及格万岁,给你辣条');
   }else{
       document.write('不及格啦,给你一群羊');
   }
    </script>

回顾一下:

isNaN(x) 函数用于检查其参数是否是非数字值。
如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false

工作使用,集合逻辑运算符

判断年龄大于等于 14 ,或者是个女孩,,就可以报舞蹈班了

         var age = 10;
         var sex = '女';

         if (age >= 14 || sex == '女') {

            console.log('可以报舞蹈班');
            
         } else {
           console.log('不可以报舞蹈班');
           
         }

判断年龄大于等于14,并且 是个男孩就可以玩吃鸡了

       var age = 10;
          var sex = '男';

          if ( age >= 14 && sex == '男') {

              console.log('可以吃鸡');
              
          }else {
            console.log('不可以吃鸡');
            
          }

练习

1.判断一个整数属于哪个范围:大于0;小于0;等于0

    var num = prompt(); 
    
    if(num>0){
        document.write('输入的数大于0');
    }else if(num<0){
        document.write('输入的数小于0');
    }else{
        document.write('输入的数等于0');
    }

2.判断一个整数是偶数还是奇数,并输出判断结果

第三节

问题:

 if 选择结构能够很好的实现条件判断处理,但也并非完美无瑕。有的时候我们需要处理的条件并没有那么复杂,而仅仅是一些等值判定。这样的时候,我们拥有另一种处理方式可供选择:switch选择结构 。
var userInput = prompt();

if (userInput == 0 ){
    userFlag = '石头';
} else if ( userInput == 1 ){
    userFlag = '剪刀';
} else {
    userFlag = '布';
}

switch选择结构(重点)

语法

switch( 判断条件 ){
           case expr1: 
                 // 处理代码块
                 break;
           case expr2: 
                 // 处理代码块
                 break;
           default: 
                 // 处理代码块
        } 

1、switch、case、default、break都是系统关键字
2、switch中没加break会把所有的case判断一遍
3、switc是不可以写判断一定范围内的数据(前提:当exp不为true)

根据输入的成绩,判断出属于A,B,C,D那个级别

var sum=parseInt(prompt("请输入成绩"));
        var str="";
        if(isNaN(sum) || sum>100 || sum<0){
            str="输入错误";
        }else{
            switch (parseInt(sum/10)){
                case 10:
                    str="S";
                    break;
                case 9:
                    str="A";
                    break;
                case 8:
                    str="B";
                    break;
                case 7:
                    str="C";
                    break;
                case 6:
                    str="D";
                    break;
                default:
                    str="E";
            }
        }

        console.log(str);
break的使用

如果:case后面不使用break终止代码,他就会继续往下走.最终输出错误的结果

 <script>
     var str = prompt('请输入ABCD中的任意一个');
  
      switch(str){
          case 'A':
          console.log('你输入的是A');
          break;
          
         case 'B':
         console.log('你输入的是B');
          break;

          case 'C':
          console.log('你输入的是C');
          break;

          case 'D':
          console.log('你输入的是A');
          break;
      }
    // 总结:break是防止穿越的,匹配到一个case则,停止向下执行
    
    </script>

脚下留心

使用switch就一定要用break,否则就会出现穿透效果

switch和if判断的区别

判断的用途
if常用语判断一定范围内的数据 a>10 b<5
switch常用语判断固定的数据

例:比如判断输入的是男是女var sex = ‘男’;(switch)

 switch(sex){
  case ‘男’:
     document.write(‘性别男’);
      break;
   case ‘女’:
     document.write(‘性别女’);
      break;
    default:
    document.write(‘人妖’);
}

脚下留心:如果数据是一个固定的值,用switch效率会比if判断更高

判断类型区别

if 判断是看运算符号,两个等于则判断值是否相等,三个等于则判断是否全等

switch 默认判断全等

例1: var str=1;使用if和switch的判断区别

// 判断类型的比较
  var num = '2';
//   if(num==2){
//       alert('男儿何不带吴钩');
//   }
//   // 值和类型都要相等
//   if(num===2){
//       alert('收取关山五十州');
//   }

    // switch进行匹配的时候,是完全匹配,相当于 '==='
  switch(num){
      case 2:
      alert('有意栽花花不发');
      break;

      case '2':
      alert('无心插柳柳成荫');
      break;

      default:
        alert('自古多情空余恨,此恨绵绵无绝期');
  }

三元运算符(重点)

语法1 条件 <font color="red">?</font> 值1 <font color="red" >:</font> 值2

语法2 条件 ? 表达式1 : 表达式2

  1. 三元运算符会得到一个结果,结果根据条件来确定。
  2. 如果条件的值为true,会返回表达式1的值/值1
  3. 如果条件的值为false,会返回表达式2的值/值2

例1:

 // 输出两个数的最大值
    var a=3;
    var b=5;
    // if(a>b){
    //     document.write(a);
    // }else{
    //     document.write(b);
    // }

    // 三元运算符
    var c = '';
    var c  =  a>b ? a : b;
    document.write(c);

例2:求两个值的最大值

var max = n1 > n2 ? n1 : n2;

例3:求三个数的最小值

 var n1 = 34;
      var n2 = 12;
      var n3 = 3;

     var min =    n1 < n2 ? n1 : n2;

         min =   min < n3 ? min : n3;

       console.log(min);

场景使用

//练习1:土豪的儿子, 输入ABCDE 
    //如果考了A:  买法拉利
    //如果考了B:  买宝马
    //如果考了C:  买三轮
    //如果考了D:  买摩拜自行车
    //如果考了E:  断绝父子关系
    //如果是其他值,提示代码有bug

//练习2: 买手机,输入自己的工资
   //如果超过30000:  买苹果手机
   //如果10000-30000: 买vivo手机
   //如果5000-10000 : 买魅族手机
   //如果低于5000   : 还买个锤子

//练习3: 输入自己的每月薪资
    //如果超过15000  : 高富帅
    //如果不超过      :穷矮丑

应用与练习

1 大于6岁且为男的就可以吃鸡

2.案例:输入年份,计算某一年是否为闰年

提示: 能被4整除且不能被100整除,或者能被400整除

    <script>
     // 1 弹出输入框
     var year = prompt('请输入一个年份');
      if(((year%4==0) && (year%100!=0)) || (year%400==0) ){
           document.write('这是闰年');
      }else{
        document.write('这是平年');
      }
    </script>

3.案例:输入数字,显示星期几

提示: 假设1号就是周一

 // 2 根据日期判断星期几
      var date = prompt('请输入一个日期');
      //输入的时间,除以7取余
      var num = date%7;
      //console.log(num);
      var str;
      switch(num){
          case 0:
          str = '今天是周日';
          break;

          case 1:
          str = '今天是周一';
          break;

          case 2:
          str = '今天是周二';
          break;

          case 3:
          str = '今天是周三';
          break;

          case 4:
          str = '今天是周四';
          break;

          case 5:
          str = '今天是周五';
          break;

          case 6:
          str = '今天是周六';
          break;
      }
      console.log(str);

相关文章

  • 2018-11-29

    17js流程控制switch 17js流程控制switch //js流程控制swi...

  • 2.原生js——流程控制语句

    流程控制语句在JS中是至关重要的。JS中的流程控制语句包括if条件判断语句、for循环语句、while循环语句、d...

  • web进阶之二十:JavaScript 语法之函数的流程控制

    流程控制   流程控制语句JS中的程序是从上到下一行一行执行的,通过流程控制语句可以控制程序执行流程,使程序可以根...

  • 12

    流程控制语句 /*流程控制语句- JS中的程序是从上到下一行一行执行的- ...

  • js中的流程控制

    流程控制(理解) 为什么要学习流程控制 实际项目中, 不可能都是简单的顺序结构(从上往下执行), 会出现不同的条...

  • JS流程控制语句、条件判断语句

    流程控制语句 - JS中的程序是从上到下一行一行执行的 - 通过流程控制语句可以控制程序执行流程, 使程序可以根据...

  • JS的一些 流程控制语句、多重条件判断语句、以及数组的操作方法

    流程控制语句 - JS中的程序是从上到下一行一行执行的 - 通过流程控制语句可以控制程序执行流程, 使程序可以根据...

  • 2019-06-11第十二天

    1、流程控制语句 - JS中的程序是从上到下一行一行执行的 - 通过流程控制语句可以控制程序执行流程, 使程序可以...

  • 2019-04-04第十三天

    1、流程控制语句 - JS中的程序是从上到下一行一行执行的 - 通过流程控制语句可以控制程序执行流程, 使程序可以...

  • JS条件语句_循环语句

    流程控制语句 JS中的程序是从上到下一行一行执行的 通过流程控制语句可以控制程序执行流程 使程序可以根据一定的条件...

网友评论

      本文标题:js中的流程控制

      本文链接:https://www.haomeiwen.com/subject/wxqbuhtx.html