javascript之流程控制语句(2)

时间  2020-08-13
标签 javascript 流程 控制 语句 栏目 JavaScript 繁體版
原文   原文链接

运算符

运算符也被称为操做符，是用来实现赋值，比较和执行算数运算等功能的符号。

javascript常见的运算符

  • 算数运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

算数运算符

用来进行两个变量或值的算数运算 
<script>
        // 算数运算符包括加减乘除 取余等等
        console.log(1 + 1);
        console.log(2 - 1);
        console.log(1 * 6);
        console.log(6 / 3);
        console.log(6 % 3);

        // 在算数运算符中 浮点数的精度会产生细微的差距，不要拿两个浮点数相比较
        console.log(0.1 + 0.2);
        console.log(0.7 * 100);

        console.log(0.1 + 0.2 == 0.3)

    </script>

image.png

注意事项javascript

  • 在JS中，不能拿两个浮点数进行比较
  • 在JS的运算顺序中，先计算乘除，再计算加减，有小括号先计算小括号

思考问题

如何判断一个数是否能被整除html

余数为0 说明这个数能被整除。

表达式

简单而言，由数字 运算符 标识符组成的式子便叫 表达式

返回值

表达式最终都有一个结果返回给咱们，这个结果便叫作 返回值 
var  num = 1 + 1

上述代码中，这样的式子便叫作表达式，右边的值计算完毕后有一个返回值，这个返回值赋值给左边的numjava

一元运算符

一元运算符分为前置型和后置型，主要让变量实行自增或自减的操做，必须和变量搭配使用

前置型运算符

前置自增运算符：先自加 再进行运算c++

<script>
        //前置型运算符 先自增（自减） 再进行运算
        var num = 10;
        ++num;
        console.log('num的值：', num) //11

        var num2 = ++num + 5;
        console.log('num2的值：', num2) //17
    </script>

image.png

前置自减运算符ui

<script>
        //前置自减运算符  
        var num = 20;
        --num;
        console.log('num的值：', num); //19

        var num2 = --num + 5;
        console.log('num2的值', num2); //23
    </script>

image.png

后置自增运算符

<script>
        //后置型自增运算符  先原值运算，再自加
        var num = 2;
        num++;
        console.log('num的值：', num); //3

        var num2 = num++ + 2;
        console.log('num2的值：', num2) //5

        var num3 = num++ + 1;
        console.log('num3的值：', num3) //5
      
    </script>

image.png

后置自减运算符spa

<script>
        //后置自减运算符 进行原值计算 再自增
        var num = 6;
        num--;
        console.log('num的值:', num); //5

        var num2 = num-- + 1;
        console.log('num2的值为:', num2); //6

        var num3 = num-- + 1;
        console.log('num3的值：', num3); //5
    </script>

image.png

练习

<script>
        //第一题
        var a = 5;
        ++a;
        var b = ++a + 6;
        console.log('b的值:', b); //13


        //第二题
        var c = 10;
        c++;
        var d = c++ + 2;
        console.log('d的值:', d); //13


        // 第三题
        var e = 10;
        var f = e++ + ++e; //首先e++是10 而后自增1 因而++e变成12  因此值为22=10+12
        console.log('f的值:', f) //22
    </script>

image.png

一元运算符总结

  • 一元运算符是为了简化代码操做，主要是为了使变量实现自增或自减操做
  • 单独使用时没有任何区别
  • 前置自增运算符和前置自减运算符：先自增（自减），再运算
  • 后置自增运算符和后置自减运算符：先原值运算，再自增（自减）
  • 实际开发过程当中，使用后置运算符较多

比较运算符

比较运算符（关系运算符）是指两个数据进行比较时所使用的运算符，比较运算符会返回一个Boolean值，做为比较运算的结果

image.png

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //比较运算符 是用来进行两个数据的比较所使用的运算符 得出的结果为布尔值
        console.log(5 > 3) //true
        console.log(6 < 7) //true
        console.log(6 >= 5); //true 解析：由于6大于5  因此正确
        console.log(7 <= 8); //true 解析：由于7小于8 因此正确

        console.log(8 == '8') //true 解析：比较值而不比较数据类型
        console.log(8 != 9); //true
        console.log(8 !== 8) //false 
        console.log(8==="8") //false 解析：===要求数据类型和值都相等
    </script>
</head>

image.png

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其结果也是布尔值，在后面的实际开发中，经常使用于多个条件的判断。 
<script defer="defer">
        /* 
         *         逻辑运算符：是用来比较布尔值运算的运算符，其结果也是布尔值，开发中经常使用于多重条件的判断
         */
        console.log(5 > 3 && 3 < 5); //true 
        console.log(5 < 3 && 3 < 7); //false

        console.log(5 < 7 || 5 < 3); //true
        console.log(5 < 7 && 5 < 3) //false

        console.log(!true) //false
        console.log(!false) //true
    </script>

image.png

总结

  • &&：两边都为true,其最终结果才为true。两边只要有一侧为false,其最终结果为false
  • || :两边都有false,其最终结果为false,两边只有一侧为true,其最终结果也为true
  • ！:取反 例如：！true的结果为false

小练习

<script>
        var num = 7;
        var str = "我爱你，亲爱的中国"
        console.log(num > 5 && num <= str.length) //true
        console.log(num < 5 && num <= str.length) //false

        console.log(!(str.length > 11)) //true
        console.log(!(num > 5 || str.length == num)) //fase
    </script>

image.png

短路效果

当有多个表达式（值）的时候，左边的表达式值能肯定结果的话，就再也不运行右边表达式的值的运算3d

逻辑中断（逻辑与）

语法code

image.png

<script>
        console.log(234 && 456); //456
        console.log(0 && 440) //0
        console.log('' && 254 && 546); //""
    </script>

image.png

逻辑中断（逻辑或）

语法：表达式1 || 表达式2htm

  • 表达式1为真的话 则返回表达式1的值
  • 表达式1若是为假的话，返回表达式2的值 （能够跟逻辑与相比较记忆）
<script>
        console.log(234 || 456); //234
        console.log(0 || 440) // 440
        console.log('' || 254 || 546); //254
    </script>

image.png

赋值运算符

数据赋值给变量的运算符，简称赋值运算符

image.png

<script>
        var num = 20;
        num += 5;
        console.log(num); //25


        var num2 = 6;
        num2 *= 6;
        console.log(num2) //36

        var num4 = 20;
        num4 %= 4;
        console.log(num4) //0
    </script>

image.png

运算符顺序

image.png

  • 一元运算符中的！的优先级很高
  • 逻辑与比逻辑或等级要高

练习1blog

<script>
        console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)
            /* 
               解析： false ||true && true && true  
               结果：true
             */

        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22')
        /*

        * 解析：5==num/2&&(2+2*num).toString()==='22'
                5==num/2&&'22'==='22'
         结果：true

         */
    </script>

image.png

练习2

<script>
        var a = 3 > 5 && 2 < 7 && 3 == 4;
        console.log(a)
            /* 
            解析：a=false && true && false
            结果：a= false
             */



        var b = 3 <= 4 || 3 > 1 || 3 != 2
        console.log(b);
        /* 
            解析：b= 3 <= 4 || 3 > 1 || 3 != 2
                  b= 3 <= 4 || 3 > 1 || true
                  b= true || true || true
            结果：true
         */



        var c = 2 === "2"
        console.log(c);
        /* 
            解析：=== 用来比较数据类型和值是否相等  因此为false
         */


        var d = !c || b && a;
        console.log(d)
            /* 解析： d = !c ||b && a;
                      d = true||b && a;
                      d = true||true && false;
                      d= true
               结果为true

             */
    </script>

image.png

流程控制语句

简单而言，就是控制咱们的代码顺序按照不一样的结构顺序执行。

流程控制主要有三种结构：顺序结构 分支结构 循环结构

顺序结构

在JS中，脚本执行的顺序是从上往下的 这种执行顺序叫作顺序结构流程控制语句

分支结构

在代码从上往下执行的过程当中，按照不一样的条件，执行不一样的路径代码，从而获得不一样的结果。

image.png

js中提供两种分支结构

  • if语句
  • swith语句

if语句

语法

if(条件表达式) {
    //执行的语句
}

解释说明：条件表达式为真，就执行语句，条件表达式为假，则不执行语句

image.png

<!DOCTYPE html>

    <script>
        if (true) {
            alert("Hello")
        }

        if(false) { //条件语句为false  则不执行
            alert("你好啊 个人朋友")
        }
    </script>

image

if双分支语句

image.png

语法

if(条件表达式) {
        //执行的语句
    }else {
        //执行的语句
    }

注意事项

  • if和else里面的语句，最终只能执行一个。
  • else后面没有条件表达式，只有{}

网吧案例

要求：弹出一个输入框，用户输入本身的年龄，若是大于等于18岁，提示能够进入网吧，若是小于18，则提示用户不能进入网吧

思路

  • 弹出输入框，把用户输入的年龄保存为变量
  • 利用if语句进行判断，根据不一样的年龄执行不一样的语句
<script>
        var userName = Number(prompt("请输入年龄")); //Number（）:将字符串类型转换成Number类型
        if (userName >= 18) {
            alert("恭喜你，能够进入网吧")
        } else {
            alert("对不起，你不能进入网吧")
        }
    </script>

image

案例：判断闰年和平年（利用if双分语句）

提示：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者可以被 400 整除的就是闰年

步骤

1.弹出输入框，用户输入本身出生的年份

2.把用户输入的年份保存成变量，根据不一样的条件而弹出闰年平年

<script>
        var userName = Number(prompt("请输入月份"));
        if (userName % 4 == 0 && userName % 100 != 0 || userName % 400 == 0) {
            alert("闰年")

        } else {
        
            alert('平年')


        }
    </script>

image

if多分支语句

执行流程

语法：适用于多重条件的判断

if(条件表达式1) {
    语句1；
}else if(条件表达式2) {
    语句2；
}else if(条件表达式3) {
    语句3；
    .....
}else {
    //以上代码不成立执行此处代码
}

注意事项

  • 利用多个条件表达式而执行不一样的语句，最终获得不一样的结果，是个多选一的过程

  • else if后面能够跟上条件表达式 else后面没有条件表达式

    成绩案例

image.png

<script>
        var source = Number(prompt("请输入分数"))
        if (source >= 90) {
            alert('A')
        } else if (source >= 80) {
            alert('B')
        } else if (source >= 70) {
            alert('C')
        } else if (source >= 60) {
            alert("D")
        } else {
            alert('E')
        }
    </script>

image

三元表达式

三元表达式能够作一些简单的条件判断，由三元运算符组成的式子叫作三元表达式

语法

条件表达式？表达式1：表达式2 表达式1为真，则返回表达式1的值，表达式1为假 则返回表达式2的值

<script>
        var mum = 6;
        var result = mum < 7 ? '正确' : "不正确";
        alert(result)
    </script>

image.png

案例：补0

要求：必须使用三元表达式

思路

  • 弹出一个输入框，用户输入0~59之间的数字
  • 0~9之间的数字前面补0，大于10的数字不作任何操做
  • 用变量接受一个返回值，输出（程序内部处理）
<script>
        var userName = Number(prompt("请输入1~59之间的数字"))

        var result = userName <= 9 ? '0' + userName : userName;
        alert(result)
    </script>

image

switch语句

switch语句属于多分支语句，执行不一样的条件语句获得不一样的结果，是多选一的过程。

注意事项

  • if多分支语句只要用于判断，而switch语句主要适用于特定值匹配
  • switch：开关。 case：选项。 switch语句后面的值匹配上相对应case后面的值且是全等的关系，则执行case后面的语句
  • 匹配不上值，则执行default后面的语句
  • switch语句后面的表达式是变量。
  • 不要忘记写break,不然会一直执行。

水果案例

要求：用户输入本身须要的水果，则屏幕弹出水果的价格是多少钱一斤

思路

  • 弹出一个输入框，用户须要本身的想要的水果
  • 把用户输入的值用变量的形式保存起来，当switch后面的条件表达式的值匹配上case后面的值，则弹出相对应的水果价格
  • 不要忘记break,不然程序会一直执行下去。
<script>
        var fruit = prompt('请输入须要的水果');
        switch (fruit) {
            case "苹果":
                alert("苹果3.5/斤");
                break;
            case "香蕉":
                alert("香蕉5.5/斤");
                break;
            case "榴莲":
                alert("榴莲10.5/斤");
                break;
            default:
                alert("找不到此水果")
        }
    </script>

image

switch语句和if else if语句的区别

  • switch用于特定值匹配，而if else语句用于条件判断
  • switch肯定值后直接执行到程序内部，而if语句还要依次判断（执行效率稍低）
  • 分支比较少的状况下，用if else效率较高
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程