[TOC]

运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:运算数运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符。

一、算数运算符

1.概念:

算术运算使用的符号,用于执行两个变量或值的算术运算。

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

2.浮点数的精度问题

浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。
所以:不要直接判断两个浮点数是否相等!

 <script>
        console.log(1 + 1); // 2
        console.log(1 - 1); // 0
        console.log(1 * 1); // 1
        console.log(1 / 1); // 1
        // % 取余(取模)
        console.log(5 % 3); // 2 (5除3等于1余2,取余数为’2‘)
        // 浮点数 算数运算里面会有问题
        console.log(0.1 + 0.2); // 0.30000000000000004
        console.log(0.07 * 100); // 7.000000000000001
        // 不能直接拿浮点数来进行相比较 是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3); // false (因为浮点数算数运算中有精准度的问题存在,所以他们不相等)
    </script>

image.png

3.课程问题:

  - 问:我们怎么判断一个数能够被整除呢?
  - 答:它的余数是0就说明这个数能被整除,这就是%取余运算符的主要用途

  - 问:请问1+2*3结果是?
  - 答:结果是7,注意算术运算符优先级的,先乘除,后加减,有小括号先算小括号里面的

4.表达式和返回值

表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算符、变量等组成的式子。
表达式最终都会有一个结果,返回给我们,我们成为返回值

 <script>
    // 表达式:是由数字、运算符、变量等组成的式子  如:1+1
    cono1e .1 og(1 + 1); //2就是返回值

    //1+1=2
    //在我们程序里面2=1+1把我们的右边表达式计算完毕把返回值给左边
    var num = 1 + 1;
</script>

二、递增和递减运算符

1.概述

如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(-一)运算符来完成。
在lavaScript中,递增(++)和递减(—)既可以放在变量前面,也可以放在变量后面。
放在变量前面时,称为前置递增(递减)运算符,
放在变量后面时,称为后置递增(递减)运算符。
注意:递增和递减运算符必须和变量配合使用。

2.前置递增运算符

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

 <script>
   // 想要一个变量自己加1 num=num+1 比较麻烦
    var num = 1;
    num = num + 1;
    num = num + 1;
    console.log(num); // 3

    // 前置递增运算符  ++写在变量的前面
    var age = 10;
    ++age; //类似于age=age+1
    console.log(age); // 11  完成自加1

    // 前置递增--先自加1,后返回值
    var p = 10;
    console.log(++p + 10); //21 先自加 1(10+1=11) ,再加上10,所以等于21  
</script>

image.png

3.后置递增运算符

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

 <script>
      //后置递增运算符  ++写在变量的后面
      var num = 10;
      num++; // num=num+1
      console.log(num); // 11

      // 后置递增--先返回原值,后自加1
      var age = 10;
      console.log(age++ + 10); //20 先返回 age(10)再加上10,所以等于20 
      console.log(age); //11  这时aeg 是11
</script>

image.png
特别说明:
前置自增和后置自增单独使用,效果是一样的。他们的区别在于:
前置递增—先自加1,后返回值
后置递增—先返回原值,后自加1

4.加强理解

 <script>       
        //前(后)置自增加强理解
        var a = 10;
        ++a; //++a=11   a=11
        var b = ++a + 2; //a=12   ++a=12
        console.log(b); //14

        var c = 10;
        c++; //c++=11  c=11
        var d = c++ + 2; //c++=11  c=12
        console.log(d); //13

        var e = 10;
        var f = e++ + ++e; //  1.e++=10 e=11    2.e=12   ++e=12
        console.log(f); // 22
</script>

image.png

5.前置递增和后置递增小结

  - 前置递增和后置递增运算符可以简化代码的编写,让变量的值+1比以前写法更简单
  - 单独使用时,运行结果相同
  - 与其他代码联用时,执行结果会不同
  - 后置:先原值运算,后自加(先人后己)
  - 前置:先自加,后运算(先已后人)
  - 开发时,大多使用后置递增/减,并且代码独占一行,例如:num++:或者um-;

三、比较运算符

1.概念:

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

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

2.代码说明

 <script> 
        console.log(3 > 5); //false
        console.log(2 < 4); //true

        // 1.我们程序里面的等于符号是 == , 默认转换数据类型 , 会把字符串型的数据转换为数字型,只要求值相等就可以
        console.log(3 = 5); //false
        console.log('pink老师' = '刘德华'); //f1ase
        console.log(18 == 18); //true
        console.log(18 == '18'); //true
        console.log(18 != 18); //false

        //2.我们程序里面有全等一模一样 , 要求两侧的值还有数据类型完全一致才可以 true
        console.log(18 === 18);   //true
        console.log(18 === '18'); //false
</script>

image.png

3 扩展:关于“=”等号说明

符号 作用 用法
= 赋值 把右边的给左边的
== 判断 判断两边值是否相等(注意此时有隐式转换)
=== 全等 判断两边的值和数据是类型是否完全相同

四、逻辑运算符

1.概念:

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

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

2.代码说明:

 <script> 
        // 1. 逻辑与 && and , 两侧都为true,结果才是true,只要有一侧为false,结果就为false
        console.log(3 > 5 && 3 > 2); // false  两侧有一侧结果为假,那么结果就是假的
        console.log(3 < 5 && 3 > 2); // true  两侧结果为真,那么结果就是真的

        // 2.逻辑或 || or 两侧都为false,结果才是false,只要有一侧为true,结果就为true
        console.log(3 > 5 || 3 > 2); //true  两侧有一侧结果为真,那么结果就是真的
        console.log(3 > 5 || 3 < 2); //false 两侧结果为假,那么结果就是假的

        // 3.逻辑非 ! not
        console.log(!true);  //false  不是真的,当然就等是于假的了,所以结果是false
        console.log(!false); //true   不是假的,当然就等是于真的了,所以结果是true
</script>

image.png

3.逻辑运算符小结

  - **逻辑与 && **** 两边都是true才返回true,否则返回false。**

image.png

  - **逻辑或 ‖ **** 两边都为false才返回false,否则都为true。**

image.png

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

4.加强理解

    <script>
        var num = 7;
        var str = '我爱你~中国~';

        //             true             true
        console.log(num > 5 && str.length >= num); //true

        //              false            true
        console.log(num < 5 && str.length >= num); //false

        //         取反  true
        console.log(!(num < 10)); //false

        //          取反 true             true
        console.log(!(num < 10 || str.length == num)); //false
v

5.短路运算(逻辑中断)

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

(1)逻辑与短路运算

     - **逻辑与短路运算语法:表达式1 && 表达式2**

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

     - **逻辑与短路运算代码说明:**
    <script>
          // ==> 逻辑与短路运算 (如果有空的或者是否定的和0为假,其余的都是真的)

         // 如果表达式1结果为真 则返回表达式2
         console.log(123 && 456); //456  

         // 如果表达式1结果为假 则返还表达式1
         console.log(0 && 456); //0
         console.log('' && 456 && 1*2);  // '' null undefined NaN (在最开始‘’已确定是假的,已出现短路运算了,所以后面就不在运算了,结果就是  空‘’)
    </script>

image.png

(2)逻辑或短路运算

     - **逻辑或短路运算语法:表达式1 ‖ 表达式2**

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

     - **逻辑或短路运算代码说明:**
   <script> 
        // ==> 逻辑或短路运算 (如果有空的或者是否定的和0为假,其余的都是真的)

        // 如果表达式1结果为真 则返回表达式1
        console.log(123 || 456); //123  
        console.log(123 || 456 || 789 + 1); //123 

        // 如果表达式1结果为假 则返还表达式2
        console.log(0 || 456 || 789 + 1); //456 (0)为假,所以返还表达式2(456),再看(456)或(789+1),(456)为真,所以最终返还的值就是456。

        //逻辑中断很重要它会影响我们程序运行结果
        var unm = 0;
        console.log(123 || num++);
        console.log(num);//0 在上面运算逻辑或时,(123)已为真,已出现了逻辑中断,后面的(num++)不再进行运算了,所以这里(num)最后的结果依然是(0)
   </script>

image.png

五、赋值运算符。

1.概念:

用来把数据赋值给变量的运算

赋值运算符 说明 案例
= 直接赋值 Var usrName=’我是值’;
+= -= 加、减一个数后再赋值 Var age =10; age+=5; //5
*= /= %= 乘、除、取余后再赋值 Var age=2; age*=5 //10

2.代码说明:

  <script>     
        var num = 10;
        // num = num + 1; 自加1,可以写成num++;
        // num = num + 2; 自加2,可以写成num +=2;
        num += 2;
        console.log(num); // 12

        var num1 = 10;
        num1 -= 5; // 自减5
        console.log(num1); // 15

        var num3 = 2;
        num3 *= 3; // 每自乘3
        console.log(num3); // 6

        var num4 = 8;
        num4 /= 2; // 每自除2
        console.log(num4); // 4
 </script>

image.png

六、运算符优先级

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

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

  • 练习1:

      <script>
          //                       不相等             24不等于144
          console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true); // true 
          //            false        true                true          true    
    
          var num = 10;
          //              5=10/2          2+2*10=22   转为字符‘22’   ‘22’===‘22’
          console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); // true 
          //              true               true 
      </script>
    

    image.png
    image.png

  • 练习2: ```javascript ``` image.png
    image.png