zoukankan      html  css  js  c++  java
  • 02 js基础 操作符 流程控制

    # 1. 运算符 #

    也称操作符,用于实现赋值、比较和执行算数运算等功能的符号

    js中常用的运算符:

    算数运算符

    递增和递减运算符

    比较运算符

    逻辑运算符

    赋值运算符

    # 2.算数运算符 ##

    ## 2.1 算数运算符概述  ##

        运算符        描述            实例
        +           加            10 + 20 = 30
        -           减            10 - 20 = -10
        *           乘            10 * 20 = 200
        /           除            10 / 20 = 0.5
        %            取余数(取模)返回除法的余数9 % 2 = 1

    浮点型运算有问题  不能直接拿着浮点数来进行相比较  是否相等

    + - * / 采用数字优先级

    # 3.递增递减运算符 #
    ## 3.1 递增递减运算符概述 ##

    如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( -- )运算符来完成。 
    在 JavaScript 中,递增(++)和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时, 我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。 

    必须搭配变量配合使用


        ++num前置自增  就是自加1 类似于 num = num + 1,但是++num写起来更简单


    前置

          

    <script>
            var num = 1;
            num = num + 1;
            num = num + 1;
            console.log(num) //3
                // 2.前置递增运算符 ++ 写在变量前面
            var age = 10;
            ++age; //类似age = age + 1 
            console.log(age)
                // 3. 先加1 然后返回值
            var c = 10;
            console.log(++c + 10)
        </script>



    后置

           

     <script>
            var num = 10;
            num++; //num = num + 1
            console.log(num);
            //1. 前置自增 和后置自增如果单独使用效果一样
            //2. 后置自增 口诀:先返回原值 后自加1
            var age = 10;
            console.log(age++ + 10)
            console.log(age)
        </script>


    #4. 比较运算符 #

    ## 4.1 比较运算符概述 ##
    概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值 (true / false)作为比较运算的结果。 

        运算符名称            说明                    案例                    结果
        <                    小于号                  1<2                    true 
        >                   大于号               1>2                   false
        >=           大于等于号(大于或者等于)      2>=                  true 
        ≤=           小于等于号(小于或者等于)     3<= 2                 false
        ==             判等号(会转型)              37 == 37              true 
        !=                     不等号              37 != 37                   false
        === !==        全等要求值和数据类型都一致     37 === '37'             false

    # 5.逻辑运算符 #
    ## 5.1 逻辑运算符概述 ##

    概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断 

        逻辑运算符                说明                案例
        &&                "逻辑与",简称"与”and        true && false
        ||                "逻辑或",简称"或”or        true | | false
        !                "逻辑非",简称"非" not    ! true

    ## 5.2 逻辑与&& ##

    两边条件都是true 才返回true , 否则返回false

    ## 5.3 逻辑与|| ##

    两边条件都是false 才返回false , 否则返回true

    ## 5.4 逻辑非! ##

    逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如 true 的相反值是 false 

        isOk = !true; 
        console.log(isOk);  // false 

    ## 5.5 短路运算(逻辑中断) ##

    短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值; 

    1.逻辑与

    语法:表达式1 && 表达式2

    如果第一个表达式的值为真,则返回表达式2

    如果第一个假,则返回表达式1

    2.逻辑或

    语法: 表达式1 || 表达式2 

    如果第一个表达式的值为真,则返回表达式1 

    如果第一个表达式的值为假,则返回表达式2 

        语法: 表达式1 || 表达式2 
        如果第一个表达式的值为真,则返回表达式1 
        如果第一个表达式的值为假,则返回表达式2 


    # 6.赋值运算符 #

        赋值运算符            说明                    案例
            =            直接赋值            var usrName =我是值';
        +=。=        加、减一个数后在赋值    var age= 10; age+=5; // 15
        *= /= %=    乘除、取模后在赋值         var age=2; age*=5;// 10



        var age = 10; 
        age += 5;  // 相当于 age = age + 5; 
        age -= 5;  // 相当于 age = age - 5; 
        age *= 10; // 相当于 age = age * 10; 


        优先级            运算符            顺序
        1                小括号            ()
        2                一元运算符        ++ -- !
        3                算数运算符        先*/%后+-
        4                关系运算符        >  >=  <  <=
        5                相等运算符        == != ===  !==
        6                逻辑运算符        先&&后||
        7                赋值运算符        =
        8                逗号运算符        ,


        
    # 7.流程控制 #

    控制代码的执行顺序
    有三种:顺序结构、分支结构、循环结构

    ## 7.1 顺序结构 ##

    按照代码的先后顺序,依次执行

    ## 7.2 分支结构 ##

    由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(多选一) 得到不同的结果

    - if语句

    - switch 语句


        // 条件成立执行代码,否则什么也不做
        if(条件表达式) {
            // 成立执行的代码语句
        }

    判断年龄是否进入网吧

        

     <script>
            var age = prompt("请输入年龄");
            if (age >= 18) {
                alert('欢迎光临')
            }
        </script>



    ## 7.3 if else语句(双分支语句) ##

        // 条件成立执行代码,否则什么也不做
        if(条件表达式) {
            // 成立执行的代码语句
        }else{
            //否则执行的代码
        }

    ## 7.4 if else if 多分支语句 ##

         

    // 适合于检查多重条件。 
        if (条件表达式1) { 
        语句1; 
        } else if (条件表达式2)  { 
        语句2; 
        } else if (条件表达式3)  {  
          语句3;  .... 
        } else { 
            // 上述条件都不成立执行此处代码 
        } 


        
    # 8. 三元表达式 #

        表达式1?表达式2:表达式3;
        如果表达式1位true,则返回表达式2的值,如果表达式1为false,则返回表达式3的值

        

      <script>
            // var age = prompt("请输入年龄");
            // if (age >= 18) {
            //     alert('欢迎光临')
            // } else {
            //     alert('走开')
            // }
            var age = prompt("请输入年龄")
            age >= 18 ? alert('欢迎') : alert('走开')
        </script>



    # 9. 分支流程switch 语句 #
    ## 9.1 语法结构 ##

    switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值 的选项时,就可以使用 switch。 

        

        switch( 表达式 ){      
        case value1:         // 表达式 等于 value1 时要执行的代码        
             break; 
        case value2:         // 表达式 等于 value2 时要执行的代码        
             break; 
        default:         // 表达式 不等于任何一个 value 时要执行的代码 
        }
     



    - switch :开关 转换  , case :小例子   选项 

    - 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量 

    - 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号 

    - switch 表达式的值会与结构中的 case 的值做比较  

    - 如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码 执行结束 

    - 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码

    - 如果case语句中 没有break,则继续执行下一个case

    switch水果查询

         

    <script>
            var fruit = prompt("输入查询的水果")
            switch (fruit) {
                case '苹果':
                    alert("苹果一斤1块")
                    break;
                case '栗子':
                    alert("LLLLL");
                default:
                    alert("查无")
            }
        </script> 




    # 10.比较switch语句 与if else if 的区别 #

    switch语句 通常处理case 比较确定值的情况,if则更加灵活

    分支较少时用if 效率高

    分支多时 用switch 结构清晰

  • 相关阅读:
    JS收集<3>:限制URL
    TSQL小收集<1>:为已经存在的表添加唯一约束
    第一个NHibernate实例 yangan
    用Javascript获取select的值 yangan
    获取页面名称语句 yangan
    asp.net中当服务器出错时显示指定的错误页面,同时把错误信息写入系统日志文件 yangan
    Log4Net使用指南 yangan
    明确自己的首要责任
    《大数据时代》摘录
    2013年3月阅读链接
  • 原文地址:https://www.cnblogs.com/xujinglog/p/12880881.html
Copyright © 2011-2022 走看看