WHCSRL 技术网

JavaScript学习日记2(运算符+if语句+switch语句)


前言

愉快 (痛苦) 的开始了JavaScript第二天的学习。
在这里插入图片描述


一、运算符(操作符)

1.1 算数运算符

算术运算符
代码如下(示例):

        //1.算数运算符(小括号>乘除>加减)
        //a.  + - * /
        console.log(1 + 2); //3
        console.log(8 - 5); //3
        console.log(1 * 2); //2
        console.log(10 / 5); //2
        
        //b. %%%% 取余(取模)
        console.log(4 %%%% 2); //0
        console.log(5 %%%% 3); //2
        console.log(3 %%%% 5); //3
        
        //c.浮点数 算数运算里面会有问题(精度问题)
        console.log(0.1 + 0.2); //0.30000000000000004
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

1.2 递增和递减运算符

  • 前置递增运算符

    ++num 前置递增,就是自加1,类似于 num =  num + 1,但是 ++num 写起来更简单。
    使用口诀:先自加,后返回值 
    
    • 1
    • 2

代码如下(示例):

        var fnum = 1;
        ++fnum;
        console.log(fnum); //num = num + 1
        var fp = 10;
        //先加1 后返回值
        console.log(++fp + 10);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 后置递增运算符

    num++ 后置递增,就是自加1,类似于 num =  num + 1 ,但是 num++ 写起来更简单。
    使用口诀:先返回原值,后自加 
    
    • 1
    • 2

代码如下(示例):

        var hnum = 10;
        hnum++;
        console.log(hnum);
        var hp = 10;
        //先返回值 再加1
        console.log(hp++ + 10);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

1.3 比较运算符

在这里插入图片描述
代码如下(示例):

        console.log(3 >= 5); //false
        // = 赋值 把右边给左边
        // 程序里的等于符号 ==
        // != 不等号
        // == 默认转换数据类型 会把字符串的数据类型转换为数字型   值一样就行 
        console.log(3 == 5); //false
        console.log(3 == '3'); //true
        // === 全等  要求数据类型和值完全一致
        console.log(18 === 18); //true
        console.log(18 === '18'); //false
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

1.4 逻辑运算符

在这里插入图片描述
代码如下(示例):

        // && and 逻辑与
        console.log(3 > 5 && 3 > 2); //两侧都要为true
        // || or  逻辑或
        console.log(3 > 5 || 3 > 2); //两侧至少有一个为true
        // ! not 逻辑非
        console.log(!true);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 短路运算(逻辑中断)
    短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。

代码如下(示例):

        /*逻辑与 &&
          表达式1 && 表达式2
          第1个表达式为真,返回表达式2 
          第1个表达式为假,返回表达式1 
        */
        console.log(123 && 456); //456
        console.log(0 && 456); //0
        console.log(0 && 1 + 2 && 456 + 56789); //0
        console.log('' && 1 + 2 && 456 + 56789); //

        /*逻辑或 ||
          表达式1 && 表达式2
          第1个表达式为真,返回表达式1 
          第1个表达式为假,返回表达式2 
        */
        console.log(123 || 456); //123
        console.log(0 && 456); //456
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

1.5 赋值运算符

在这里插入图片描述
代码如下(示例):

        var num = 10;
        num += 2; //num = num +2;
        console.log(num);

        var num1 = 2;
        num1 *= 3;
        console.log(num1); //num1 = num1 +2;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

1.6 运算符优先级

在这里插入图片描述

  • 一元运算符里面的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高

二、流程控制

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

在这里插入图片描述

  • 顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。
  • 由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。
  • 循环结构是指在程序中需要反复执行某个功能而设置的一种程序结构。它由循环体中的条件,判断继续执行某个功能还是退出循环。

2.1 if 语句

  • if的语法结构 如果if
      if (条件表达式) {
          //执行语句
      }
  • 1
  • 2
  • 3

2.2 if else 双分支语句 (2选1)

  • 语法结构 if 如果 else 否则 if和else里面的语句只有一个会执行
      if (条件表达式) {
          //执行语句1
      } else {
          //执行语句2
      }
  • 1
  • 2
  • 3
  • 4
  • 5

2.3 if else if 多分支语句 (多选1)

  • 适合于检查多重条件
      if (条件表达式) {
            //执行语句1;
       } else if (条件表达式) {
            //执行语句2;
       } else if (条件表达式) {
            //执行语句3;
       } else {
            //最后的语句;
       }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2.4 switch语句

  • switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch。
  • switch 开关 转换 匹配:表达式(变量)与value值比较。
  • 比较时 表达式和value 是 全等于(===)。
  • 如果当前没有break 不会退出switch,继续执行下一个case。
     switch (表达式) {
            case vlaue1:
                //执行语句1;
                break;
            case vlaue2:
                //执行语句2;
                break;
            case vlaue3:
                //执行语句3;
                break;
            default:
                //最后的语句;
     }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

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

在这里插入图片描述

2.6 三元表达式

  • 语法结构
    • 表达式1 ? 表达式2 : 表达式3;
        //表达式
        //条件表达式 ? 表达式1 :表达式2
        //如果表达式结果 真 执行 表达式1 ;假 执行表达式2
        var num = 10;
        var result = num > 5 ? '是的' : '不是的';
        console.log(result);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

总结

又是对JavaScript又爱又恨的一天,明天继续冲冲冲!
在这里插入图片描述

推荐阅读