JavaScript | 运算符 + 流程控制-分支

目录

运算符

算数运算符

        前置递增运算符

        后置递增运算符

比较运算符

逻辑运算符

        短路运算(逻辑中断)

逻辑与(表达式1 && 表达式2)

逻辑或( 表达式1 || 表达式2)

赋值运算符

运算符优先级

流程控制-分支

顺序流程控制

分支流程控制

        if 语句

案例1: 进入网吧

        if else语句(双分支语句)

案例 2:判断闰年

        if else if 语句(多分支语句)

案例: 判断成绩级别

三元表达式

案例: 数字补0

分支流程控制 switch 语句

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


运算符

运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。

算数运算符

JavaScript | 运算符 + 流程控制-分支_第1张图片

  • %  取余运算符的主要用途 :它的余数是0 就说明这个数能被整除
  • 算术运算符优先级的,先乘除,后加减,有小括号先算小括号里面的
  • 浮点数值的最高精度是 17 位小数,不要直接判断两个浮点数是否相等 

表达式:是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果,返回给我们,我们成为返回值

        // 表达式 由 数字 运算符 变量组成的式子
        console.log(1 + 1);// 2  就是返回值

        前置递增运算符

++num 前置递增,就是自加1,类似于 num =  num + 1,

先自加,后返回值

        var p = 10;
        console.log(++p + 10);//21

        后置递增运算符

num++ 后置递增,就是自加1

先返回原值,后自加

        var age = 10;
        console.log(age++ + 10);//20
        console.log(age);//11

练习题:

        var e = 10;
        var f = e++ + ++e;//e++ 10 ;e=11;++e=12
        console.log(f);//22

比较运算符

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

JavaScript | 运算符 + 流程控制-分支_第2张图片

        // 默认转换数据类型  会把字符串的数据转换成数字型
        console.log(18 == '18');
        // 全等 要求 数值和数据类型一模一样!
        console.log(18 === '18');//false

JavaScript | 运算符 + 流程控制-分支_第3张图片

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。

JavaScript | 运算符 + 流程控制-分支_第4张图片

  • &&  有一个false 结果是 false
  • ||   有一个为true  结果是true
  •   取反符,用来取一个布尔值相反的值

        短路运算(逻辑中断)

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

逻辑与(表达式1 && 表达式2)

  • 如果第一个表达式的值为真,则返回表达式2  
  • 如果第一个表达式的值为假,则返回表达式1
        console.log(213 && 412);//412
        console.log(0 && 14); //0  除了数字0是false,其余数字都是true

        如果有空的或者否定的 为 false, 其余是true  。 false:0 ‘’ null undefined

逻辑或( 表达式1 || 表达式2)

  •  如果第一个表达式的值为真,则返回表达式1  
  •  如果第一个表达式的值为假,则返回表达式2
        console.log(213 || 431);//213
        console.log(0 || '413' || 21);//'413'

                逻辑中断很重要,会影响我们程序运行结果!!!

        var num = 0;
        console.log(123 || num++);//123   写完123就中断了
        console.log(num);//0

赋值运算符

JavaScript | 运算符 + 流程控制-分支_第5张图片

        var num = 10;
        num += 2;//num=num+2
        console.log(num);//12
        console.log('--------------------');
        var age = 21;
        age /= 3;
        console.log(age);//7

运算符优先级

JavaScript | 运算符 + 流程控制-分支_第6张图片

 练习题:

        console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true);//true
        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');//true


流程控制-分支

        流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

JavaScript | 运算符 + 流程控制-分支_第7张图片

顺序流程控制

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

分支流程控制

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

        if 语句

        // 1.if的语法结构
        if (条件表达式) {
            //执行语句
        }
        // 2.执行思路:条件成立执行代码,否则什么也不做

案例1: 进入网吧

弹出一个输入框,要求用户输入年龄,如果年龄大于等于 18 岁,允许进网吧。

    

        if else语句(双分支语句)

        // 1.语法结构
        if (条件表达式) {
            //执行语句1
        } else {
            //执行语句2
        }
        //条件表达式为真 执行语句1  否则 执行语句2

案例 2:判断闰年

接收用户输入的年份,如果是闰年就弹出闰年,否则弹出是平年

    

        if else if 语句(多分支语句)

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

案例: 判断成绩级别

    

三元表达式

        由三元运算符组成的式子称为三元表达式

        条件表达式 ? 表达式1: 表达式2;

如果条件表达式为 true ,则返回表达式1的值,如果条件表达式为 false,则返回表达式2的值

        var num = 10;
        var result = num > 5 ? 'yes' : 'no';
        alert(result);//yes

案例: 数字补0

        用户输入数字,如果数字小于10,则在前面补 0 ,比如01,09 ,如果数字大于10,则不需要补,比如 20。

    

分支流程控制 switch 语句

当要针对变量设置一系列的特定值的选项时,就可以使用 switch

        switch (表达式) {
            case value1:
                执行语句;
                break;
            case value2:
                执行语句;
                break;
            default:
                执行最后的语句;
        }
  •  一定要有break;!!!
  • 表达式和value是全等关系!!!
  • 如果当前的case里面没有break  则不会退出case  继续执行下一个case

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

  • 一般情况下,它们两个语句可以相互替换
  • switch...case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)
  • switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。
  • 而if…else 语句有几种条件,就得判断多少次。
  • 当分支比较少时,if… else语句的执行效率比 switch语句高。
  • 当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。

你可能感兴趣的:(JavaScript,前端,javascript)