美文网首页
09-JavaScript基础-流程控制-if

09-JavaScript基础-流程控制-if

作者: 雪妮爸爸 | 来源:发表于2018-10-16 00:59 被阅读0次

流程控制基本概念

  • 默认情况下,程序的运行流程是这样的:运行程序后,系统会按书写从上至下顺序执行程序中的每一行代码,但是这并不能满足我们所有的开发需求

  • 实际开发中, 我们需要根据不同的条件执行不同的代码或者重复执行某一段代码

  • 为了方便我们控制程序的运行流程,JavaScript提供3种流程结构,不同的流程结构可以实现不同的运行流程。这3种流程结构分别是顺序、选择、循环三种基本控制结构构造.

    • 顺序结构:默认的流程结构。按照书写顺序从上至下执行每一条语句。

    • 选择结构:对给定的条件进行判断,再根据判断结果来决定执行哪一段代码。

    • 循环结构:在给定条件成立的情况下,反复执行某一段代码。


选择结构-if基本概念

.if第一种形式

  • 表示如果条件表达式,执行语句块1,否则不执行。
if(条件表达式)
{
    语句块1
}
后续语句;

  • 示例:
if(age > 18)
{
    console.log("开网卡");
}


2.if第二种形式

  • 如果条件表达式,则执行语句块1,否则执行语句块2
if(条件表达式)
{
    语句块1
}else{
    语句块2
}

[图片上传失败...(image-e345be-1539657235761)]

  • 示例:
if(age > 18)
{
    console.log("开网卡");
}else{
    console.log("喊你妈来");
}

  • 特点:
    • if和else后面的代码块({})只有一个会被执行

3.if第三种形式

  • 如果条件表达式1,则执行语句块1,否则判断条件表达式2,如果为真执行语句块2,否则再判断条件表达式3,如果真执行语句块3, 当表达式1、2、3都不满足,会执行最后一个else语句。
if(条件表达式1)
{
    语句块1
}else if(条件表达式2){
    语句块2
}else if(条件表达式3){
    语句块3
}else{
    语句块4
}

[图片上传失败...(image-690214-1539657235761)]

  • 示例:
if(age>18)
{
    console.log("给网卡");
}else if(age>25){
    console.log("给名片");
}else if(age>40){
    console.log("给房卡");
}else{
    console.log("给好人卡");
}

  • 特点:
    • 这么多大括号中只有一个大括号中的内容会被执行
    • 当执行到后面条件的时候证明前面的条件不满足
    • else if可以只有一个, 也可以有多个, 但是都必须添加在if和else之间

选择结构-if注意点

  • 1.如果只有一条语句时if后面的大括号可以省略
if(age > 18)
    console.log("开网卡");

  • 注意点:
    • 受到if管制的只有紧跟其后的那条语句

    • 在企业开发中尽量不要省略大括号

      if(false)
          console.log("语句1");
      console.log("语句2"); // 语句2会被输出
      
      

  • 2.分号“;”也是一条语句, 空语句
if(10 > 2);
{
    console.log("10 > 2");
}
// 输出结果: 10 > 2, if管制的紧跟其后的那个分号

// 如上语句相当于
if(10 > 2)
  ;
{
    console.log("10 > 2");
}

// 如上语句相当于
if(10 > 2) {
      ;
}
// {}在JS中仅仅代表告诉系统里面的语句是一个整体, 没有别的用途,不会影响代码的执行
{
    console.log("10 > 2");
}


    1. if else是一个整体, else匹配if的时候匹配离它最近的一个if
    if(0)
        if(1)
            console.log("A");
        else // 这个else会匹配上面的 if(1)
            console.log("B");
    else // 这个else会匹配上面的 if(0)
        if (1)
            console.log("C"); // 最终输出C
        else
            console.log("D");


  • 4.对于非Boolean类型的值,会先转换为Boolean类型后再判断
    if (0) {
        console.log("123\n"); // 不会被执行
    }


  • 5.判断变量与常量问题
    • 但凡遇到比较一个变量等于或者不等于某一个常量的时候,把常量写在前面
    // if(a = 0)  // 错误写法, 但不会报错
    /*
    本来是先判断变量a存储的值是否等于0,
    但是如果不小心写成a=0,代表把0存储到a中.
    为了避免这种问题判断是否相等时把常量写前面,
    因为等号左边只能是变量, 所以如果少写一个等号会报错
    */
    if (0 == a) {
        console.log("a的值是0\n");
    }else{
       console.log("a的值不是0\n");
    }


  • 6.if语句可以嵌套使用
    var num = 8;
    if (num >= 5)
    {
        if(num <= 10)
        {
            console.log("一个5~10之间的数")
        }
    }


选择结构-if练习

  • 从键盘输入一个整数,判断其是否是偶数,如果是偶数就输出YES,否则输出NO;
//    1.定义一个变量保存用户输入的整数
    var temp;
//    2.利用window.prompt()接收用户输入数据
//     window.prompt返回给我们的是一个字符串, 需要转换为Number
    temp = +(window.prompt("请输入一个整数"));
//    3.对用户输入的数据进行安全校验
    if(isNaN(temp)){
        alert("你是SB吗?");
    }else{
//    3.判断用户输入的数据是否是偶数, 然后根据判断结果输出YES/NO
        /*
        if(temp % 2 == 0){
            alert("YES");
        }else{
            alert("NO");
        }
        */
        (temp % 2 == 0) ? alert("YES") :  alert("NO");
    }


  • 接收用户输入的1~7的整数,根据用户输入的整数,输出对应的星期几
//    1.定义变量保存用户输入的数据
    var day;
//    2.利用window.prompt()接收用户输入数据
    day = +(window.prompt("输入的1~7的整数"));
//    3.判断当前是星期几
    if(day == 1){
        console.log("星期一");
    }else if(day == 2){
        console.log("星期二");
    }else if(day == 3){
        console.log("星三");
    }else if(day == 4){
        console.log("星期四");
    }else if(day == 5){
        console.log("星期五");
    }else if(day == 6){
        console.log("星期六");
    }else if(day == 7){
        console.log("星期日");
    }else{
        console.log("滚犊子");
    }


  • 接收用户输入的一个整数month代表月份,根据月份输出对应的季节
//    1.定义变量保存用户输入的数据
    var month;
//    2.利用window.prompt()接收用户输入数据
    month = +(window.prompt("请输入一个1-12的月份"));
//    3.数据安全校验
    if(isNaN(month)){
        alert("火星SB?");
    }else{
//    4.根据输入的数据判断输出对应的月份即可
        if(month >= 3 && month <= 5){
            alert("春季 ");
        }else if(month >=6 && month <= 8){
            alert("夏季");
        }else if(month >=9 && month <= 11){
            alert("秋季");
        }else if(month == 12 || month == 1 || month == 2){
            alert("冬季");
        }else{
            alert("火星季节");
        }
  }

//    1.定义变量保存用户输入的数据
    var month;
//    2.利用window.prompt()接收用户输入数据
    month = +(window.prompt("请输入一个1-12的月份"));
//    3.数据安全校验
    if(isNaN(month)){
        alert("火星SB?");
    }else{
//    4.根据输入的数据判断输出对应的月份即可
        if(month < 1 || month > 12){
            alert("火星季节");
        }else if(month >= 3 && month <= 5){
            alert("春季 ");
        }else if(month >=6 && month <= 8){
            alert("夏季");
        }else if(month >=9 && month <= 11){
            alert("秋季");
        }else{
            alert("冬季");
        }
    }

//    1.定义变量保存用户输入的数据
    var month;
//    2.利用window.prompt()接收用户输入数据
    month = +(window.prompt("请输入一个1-12的月份"));
//    3.数据安全校验
    if(isNaN(month)){
        alert("火星SB?");
    }else{
//    4.根据输入的数据判断输出对应的月份即可
        if(month == 12 || month == 1 || month == 2){
            alert("冬季");  // 没有进入, 剩下的必然是3-11
        }else if(month >=9){ 
            alert("秋季"); // 没有进入, 剩下的必然 3-8
        }else if(month >=6){ 
            alert("夏季"); // 没有进入, 剩下的必然 3-5
        }else if(month >= 3){
            alert("春季 ");
        }else{ // 12 1 2
            alert("火星季节");
        }
    }


  • 从键盘输入2个整数,判断大小后输出较大的那个数
//    1.定义变量保存三个整数
    var a, b;
//    2.利用window.prompt接收用户输入的数据
    a =  +(window.prompt("请输入内容")); 
    b =  +(window.prompt("请输入内容")); 
//    3.利用if进行两两比较
    if(a > b){
        console.log(a);
    }else{
        console.log(b);
    }
    /*
    三元运算符好处:可以简化if else代码
    弊端                  :因为是一个运算符所以运算完必要要有一个结果。  
    简单用三元 复杂用if(阅读性好)
    */
    console.log(a > b? a: b);


  • 从键盘输入3个整数,排序后输出
    • 如下做法代码严重没有扩展性,数值越多代码越多
//    1.定义变量保存三个整数
    var a, b, c;
//    2.利用window.prompt接收用户输入的数据
    a =  +(window.prompt("请输入内容"));
    b =  +(window.prompt("请输入内容"));
    c =  +(window.prompt("请输入内容"));
    //     方式1 写出所有方式
    if (a >= b && b >=c) {
        console.log(a, b, c);
    }else if (a >= c && c >= b) {
        console.log(a, c, b);
    }else if (b >= a && a >= c) {
        console.log(b, a, c);
    }else if (b >= c && c >= a) {
        console.log(b, c, a);
    }else if (c >= a && a >= b) {
        console.log(c, a, b);
    }else if (c >= b && b >= a) {
        console.log(c, b, a);
    }

  • 如下做法将来可以利用循环结构简化代码
    冒泡排序的思想是在每一次排序过程,通过相邻元素的交换,将当前没有排好序中的最大(小)移到数组的最右(左)端。而选择排序的思想:每一次排序过程,我们获取当前没有排好序中的最大(小)的元素和数组最右(左)端的元素交换,循环这个过程即可实现对整个数组排序。

区别主要在交换的方式上

每一轮都把最大或最小的元素筛选出来放在相应的位置上
这是相同的
但是
对于每一轮
比如第一轮
要把1~n 中最大的那个放到n这个位置
冒泡法每次比较和移动相邻的两项
而选择排序每次交换当前项和第n项

  • 选择排序, 每排完一次最值出现在第一位
//    1.定义变量保存三个整数
    var a, b, c;
//    2.利用window.prompt接收用户输入的数据
    a =  +(window.prompt("请输入内容"));
    b =  +(window.prompt("请输入内容"));
    c =  +(window.prompt("请输入内容"));
//     方式2 选择排序
    var temp;
    if (a > b) {
        temp = a;
        a = b;
        b = temp;
    }
    if (a > c) {
        temp = a;
        a = c;
        c = temp;
    }
    if ( b > c) {
        temp = b;
        b = c;
        c = temp;
    }
    console.log(a, b, c);

  • 冒泡排序, 每排完一次最值出现在最后一位

[图片上传失败...(image-f34a26-1539657235761)]

[图片上传失败...(image-4d94c6-1539657235761)]

[图片上传失败...(image-ab8ae7-1539657235761)]

//    1.定义变量保存三个整数
    var a, b, c;
//    2.利用window.prompt接收用户输入的数据
    a =  +(window.prompt("请输入内容"));
    b =  +(window.prompt("请输入内容"));
    c =  +(window.prompt("请输入内容"));
//     方式3 冒泡排序
    var temp;
    if (a > b) {
        temp = a;
        a = b;
        b = temp;
    }
    if (b > c) {
        temp = b;
        b = c;
        c = temp;
    }
    if ( a > b) {
        temp = a;
        a = b;
        b = temp;
    }
    console.log(a, b, c);


  • 石头剪子布实现
    // 定义 0.剪刀 1.石头 2.布
    // 1、定义变量 玩家和电脑
    var player,computer = 0;

    // 2、让电脑先出拳
    var temp = Math.random() * 3;
    // 3、用户出拳
    var player = window.prompt("请出拳:0.剪刀 1.石头 2.布");
    // 数据合法性的校验
    if (player<0||player>2) {
        window.prompt("请重新出拳:0.剪刀 1.石头 2.布");
    }else{
        // 4、判断比较 //先判断用户赢的情况
        if((player==0&&computer==2)||
                (player==1&&computer==0)||
                (player==2&&computer==1)){
            window.alert("我靠,你赢了!\n");

        }else if((computer==0&&player==2)||
                (computer==1&&player==0)||
                (computer==2&&player==1)){
            window.alert("很遗憾,你输了!\n");

        }else{
            window.alert("平局\n");
        }
    }

作者:极客江南

相关文章

网友评论

      本文标题:09-JavaScript基础-流程控制-if

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