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 结构清晰

posted @ 2020-05-13 10:31  xujing123  阅读(146)  评论(0编辑  收藏  举报