【66】JS(3)——操作符

本篇学习目标：
1.掌握各种操作符的用法及相关特点；
2.掌握综合运算顺序。

---

---

一、基本概念

1.操作符

• 也叫运算符(operator)，是JS中发起运算最简单的方式。

---

2. 表达式

• 表达式（expression） 的组成包含操作数和操作符；
• 例如：5 + 6 。
• 表达式会得到一个结果，然后用结果参与程序。

---

二、算术运算符

1.基本介绍

算术运算符
+	与数学意义的加号一致
-	与数学意义的减号一致
*	与数学意义的乘号一致
/	与数学意义的除法一致
%	取余，取模；a / b = c 余 d，就说明a % b = d
()	与数学意义的小括号一致

• 运算顺序：先算乘除取余、再算加减，有小括号先算小括号。

---

2.正常情况

(1) 数字与数字之间的运算

<script>
    console.log(1 + 2);
    console.log(1 * 2);
    console.log(8 - 2);
    console.log(7 / 2);
    console.log(4 * (2 + 1) );
    console.log(6 % 4);
</script>

---

3.非正常情况

(1) 有特殊值字面量参与的运算

• 工作中并不会使用特殊值运算，没有实际应用的意义，但是要了解，以防面试遇到。

①NaN参与的运算得到的结果都是NaN

<script>
    //非正常情况:有NaN参与的，最后结果都是NaN
    console.log(NaN + 1);
    console.log(NaN - 1);
    console.log(NaN * 1);
    console.log(NaN / 1);
    console.log(NaN % 6);
    console.log(NaN / (1 + 9) );
</script>

② Infinity参与的运算，视情况而定

<script>
    //非正常情况:有Infinity参与的，最后结果视情况而定
    console.log(Infinity + Infinity); //Infinity
    console.log(Infinity - Infinity); //NaN
    console.log(Infinity * Infinity);//Infinity
    console.log(Infinity / Infinity);//NaN
    console.log(Infinity % Infinity);//NaN
</script>

<script>
    console.log(Infinity + 5); //Infinity
    console.log(Infinity - 5); //Infinity
    console.log(Infinity * 5); //Infinity
    console.log(Infinity / 5); //Infinity
    console.log(Infinity % 5);   //NaN
</script>

 <script>
    console.log(-Infinity + 5);  //Infinity
    console.log(-Infinity - 5);  //Infinity
    console.log(-Infinity * 5);  //Infinity
    console.log(-Infinity / 5);   //Infinity
    console.log(-Infinity % 5); //NaN
 </script>

<script>
    console.log(5 / Infinity); //0
    console.log(5 % Infinity);  //5
</script>

(2)其他类型的数据参与数学运算

①有字符串参与的 + 运算

• + 号变为连字符将前后连接成整体字符串。
• 具体可点击查看上篇文章中：
  三、数据类型3.数据类型转换(1)转成字符串③+ 号拼接字符串方式

②隐式转换出现的情况

• 隐式转换：除了字符串参与的 + 运算，其他情况下，所有其他数据类型参与数学运算时，计算机暗中将其他数据类型先自动转换成数字类型，再参与运算，这个过程中不需要使用parseInt()、Number() 等方法，过程是暗中进行，这就是一个隐式转换的过程。

其它类型数据	最终转换为的数字类型
纯数字字符串	对应数字（比如"123"转换为123）
true	转换为1
false、null、""空字符串、" "空白字符串	转换为0
undefined、非空非纯数字字符串	转换为NaN

---

三、比较运算符

1.基本介绍

• 也叫作关系运算符；
• 一个比较运算符 (comparison operator)，比较它的操作数并返回一个布尔类型值；
• 运算结果：要么是true，要么是false。

比较运算符/关系运算符
>	大于
<	小于
>=	大于等于
<=	小于等于
==	相等，只判断值大小是否相等，不判断数据类型
!=	不等，与相等完全相反
===	全等，不光判断值相等，还要判断数据类型相等
!==	不全等，与全等于完全相反

---

2. 正常情况

• 数字与数字比较

<script>
    //比较运算符_正常情况
    console.log(2 > 1); //true
    console.log(1 >= 2);//false
    console.log(1 < 2); //true
    console.log(2 <= 1);//false
    console.log(2 == 1);//false
    console.log(2 != 1);//true
    console.log(2 !== 2);  //false
    console.log(1 === 1);//true
</script>

---

3.非正常情况

(1)特殊值参与

①NaN参与：!=和!==结果是 true，其他的都得到 false

<script>
//比较运算符_特殊情况_特殊值NaN参与,!=和!==结果是 true，其他的都得到 false
//以下是NaN和数比较的情况，NaN与自己的比较情况与下一致
    console.log(NaN != 1);//true
    console.log(NaN !== 2);//true
    console.log(NaN > 2);//false
    console.log(NaN >= 1);//false
    console.log(NaN < 2);//false
    console.log(NaN <= 1);//false
    console.log(NaN == 3);//false
    console.log(NaN === 3);//false
</script>

②Infinity参与：视情况而定

<script>
    //Infinity和自己比较  
    console.log(Infinity > Infinity);//false
    console.log(Infinity >= Infinity);//true
    console.log(Infinity < Infinity);//false
    console.log(Infinity >= Infinity);//true
    console.log(Infinity == Infinity);//true
    console.log(Infinity != Infinity);//false
    console.log(Infinity === Infinity);//true
    console.log(Infinity !== Infinity);//false
</script>

<script>
    //Infinity和数字比较
    console.log(Infinity > 5); //true
    console.log(Infinity >= 5);//true
    console.log(Infinity < 5);//false
    console.log(Infinity <= 5);//false
    console.log(Infinity == 5);//false
    console.log(Infinity != 5); //true
    console.log(Infinity === 5);//false
    console.log(Infinity !== 5); //true
</script>

(2)字符串与字符串比较

• 不会发生隐式转换为数字;
• 而是比较两个字符串的 Unicode 编码顺序；
• 字符编码顺序：从前往后 0-9，A-Z，a-z，前面的小于后面的；
• 比较时，不关心两个字符串的长度，从第一个字符开始比较，依次往后顺延比较，直到比较出大小，就不再往后比较。

<script>
//比较运算符_特殊情况_字符串和字符串比较unicode编码
     console.log("0" < "9");//true
     console.log("0" <= "9");//true
     console.log("A" < "Z");//true
     console.log("Z" < "a");//true
     console.log("a" < "z");//true
     
     console.log("1" > "8");//false
     console.log("1" >= "8");//false
     console.log("B" > "Y");//false
     console.log("Y" > "b");//false
     console.log("c" > "x");//false

     console.log("01" < "98");//true
     console.log("01" <= "98");//true
     console.log("AB" < "ZY");//true
     console.log("Zc" < "ab");//true
     console.log("aB" < "zF");//true

     console.log("14" > "87");//false
     console.log("01" >= "98");//false
     console.log("BB" > "YC");//false
     console.log("Yc" > "bd");//false
     console.log("cd" > "xe");//false

     console.log("xx" == "xx");//true
     console.log("xx" ==="xx");//true
     console.log("AA" != "aa");//true
     console.log("AAXX" !== "AAxx")//true
</script>

(3) 其他数据类型参与（排除字符串与字符串的比较）

• 会隐式转换为数字参与比较；

其它数据类型	会隐式转换为数字
字符串	纯数字字符串转为对应数字；空字符串和空白字符串转为 0；非空非纯数字字符串转为 NaN。
布尔值	true 转为 1；false 转为 0
undefined	转为 NaN
null	转为 0

• 但是null 的判断比较特殊
• null 与除了0之外的其它数据比较时，会认为null隐式转换为了 0；
• 但是 null 与 0 判断时，==判断为 false； >= 和 <= 判断为 true；
• null == undefined（因为undefined是空指针对象中派生的）

<script>
   //特殊的null__null与除了0之外的其它数据比较时，会认为null隐式转换为了 0；
   console.log(null < 1);//true
    //但是 null 与 0 判断时
   console.log(0 == null); //false
   console.log(null >= 0);//true
   console.log(null <= 0);//true
    //且 null 与 undefined 判断时
   console.log(null == undefined);//true
</script>

---

4.运算顺序

• 从前往后比较，前面的结果与后面的进行比较。

<script> 
   //运算顺序：前面的结果与后面比较
    console.log(3 > 2 > 1); // false
</script> 

• 上例中， 3 > 2 结果为true ， true > 1 结果为 false，所以最终结果为false

---

四、逻辑运算符

1.基本介绍

• 常用于布尔值之间;
• 当操作数都是布尔值时，返回值也是布尔值。

逻辑运算符符号	含义	返回值规律
&&	逻辑与运算符， 且	两边操作数布尔值都true，返回值结果才为true；只要有一边操作数布尔值为false，返回值结果就为false
`		`
!	逻辑非运算符	返回值结果为操作数布尔值的相反值

---

2. 正常情况

• 布尔类型的值参与运算，返回值为布尔值。

<script>
    console.log(true && true);//true
    console.log(true && false); //false
    console.log(false && false); //false

    console.log(true || false);//true
    console.log(true || true );//true
    console.log(false || false);//false

    console.log(! false);//true
    console.log(! true);//false
    console.log(!!!! true);//true
    console.log(!!!!! true);//false
</script> 

---

3.非正常情况

• 除了布尔类型的值之外，其他数据类型的值参与，会隐式转换；
• 运算过程中需要将操作数隐式转换为布尔类型的值，参与判断计算，最终运算结果还是原来的某个位置的数据；
• 并不是所有逻辑运算返回结果都是布尔值，其他数据参与得到的就是数据本身。
• 具体规律可看下方4.隐式转换为布尔值的规律。

<script>
      //逻辑运算符_非正常情况
      console.log(NaN && true);//NaN(NaN能被转换为false，所以返回NaN)
      console.log(" " && null); //null("  "不能被转换为false，所以返回null)

      console.log(23 || false); //23 (23能转换为true，所以返回23)
      console.log(undefined || 0);  //0(undefined不能转换为true，所以返回0)
      
      console.log(!9);//false //如果非运算，则返回值还是布尔值
      console.log(!0); //true
</script> 

---

4.隐式转换为布尔值的规律

数据类型	转为布尔类型的值
NaN、0、""空字符串、null、undefined	false
非0非NaN数字、非空字符串	true

• 当这些非布尔值类型数据参与了逻辑运算时候，返回值可能是非布尔值，规律如下：
• a && b ，如果a能被转换为false，那么返回a；否则，返回b。 （一假即假）
• a || b ， 如果a能被转换为true，那么返回a；否则，返回b。（一真则真）
• 其实这个规律还是与正常情况的规律一样，只不过不返回布尔值，而是返回数据本身。

---

5.运算顺序

• 同种运算符从前往后运算。
• 综合运算顺序：非、与、或。
• 如下举例：

<script>
    //逻辑运算符_运算顺序（同种从左往右；综合：非→与→或）
    var n = undefined && null || 123 && !0;
    console.log(n); //true
</script> 

• 分步解析如下:

<script>
    var yi = !0;
    console.log(yi); //true
    var er = 123 && true ;
    console.log(er); //true
    var san = undefined && null;
    console.log(san); //undedined
    var last = san || er ;
    console.log(last); // true
</script> 

---

五、赋值运算符

1. 介绍

• 赋值运算符必须有变量参与运算；
• 赋值运算符会做两件事情：
  ①将变量中原始值参与对应数学运算，与右侧的数据；
  ②将运算结果再重新赋值给变量。
• 变量位于操作符的左侧。

赋值运算符符号	含义
=	等于
+=	加等于
-=	减等于
*=	乘等于
/=	除等于
%=	取余等于
++	递加
--	递减

---

2.举例前6个赋值运算符

• 最后两个赋值运算符也属于一元运算符，所以会在后面举例。

<script>
    //赋值运算符
    var a = 5;
    console.log(a); //5

    var b ;
    console.log(b); //undedined
    b += 6; //b = b+6 = undefined+6 = NaN+6 = NaN
    console.log(b); //NaN
    
    var c = 9;
    c -= 2; //c = c-2 = 9-2 = 7
    console.log(c); //7

    var d = 2;
    d *= 7;  //d = d*7 = 2*7= 14 
    console.log(d);//14

    var e = 9;
    e /= 9; //e= e/9 = 9/9 = 1
    console.log(e); //1
  

    var f = 10;
    f %= 4; //f = 10%4 = 2
    console.log(f);//2
 </script>

---

六、一元运算符

1.介绍

• ++ 、-- 、!也叫一元运算符，因为只有一个操作数。

• ++ 或 -- 符号可以写在变量前和变量后面，位置不同可能导致程序运行结果不同，如下举例：

---

2.举例（以++符号为例）

（1） ++符号在变量之前，先自加，后参与

• 如下举例++g，++g 在参与过程中整体就使用 g加 1 之后的新值，使用完后第二次用 g 变量时，g 用的也是加 1 的新值。

<script>
    //一元运算符 
    //++在前，举例,（先自加，后参与）
    var g =1;
    console.log(++g);//2
    console.log(g); //2
</script>

（2） ++ 符号在变量之后，先参与，后自加

• 如下举例 h++，h++ 在参与程序过程中使用的原始没有加 1 的值，使用完后第二次用 h 变量时，h用的就是加 1 后的新值。

<script> 
    //++在后，举例（先参与，后自加）
    var h =1;
    console.log(h++);//1
    console.log(h); //2
</script> 

（3）综合举例

<script> 
      var a = 10,
          b = 20,
          c = 30;
      var num = a++ + ++b + c++ + ++a;
      //num=10+21+30+12
      console.log(num);//73
</script> 

---

七、运算优先级/综合运算顺序

1.介绍

优先级从先到后	运算符种类	具体符号
1	算术运算符（部分）	()
2	一元运算符（部分赋值运算符/逻辑运算符）	++ 、--、 !
3	算数运算符（部分）	先* 、/ 、% 、后 + 、-
4	关系运算符（部分）	先> 、>= 、< 、<=
5	关系运算符（部分）	后 ==、 != 、=== 、!==
6	逻辑运算符（部分)	先&& 后`
7	赋值运算符（部分）	= 、 +=、-=、*=、/=、%=

---

2. 举例

• 下例就是按照以上运算优先级/综合运算顺序来计算的：

<script> 
     var a = 4;
     var num = 1* (2 + 3) && ++a || 5 > 6 && 7 < 8 || ! 9 ;
     console.log(num);  //5
</script> 

• 如下详细过程：

<script> 
    //①() ②一元运算符++ 、--、 !
    var num = 1 * 5 && 5 || 5 >6 && 7 < 8 || false;
    // ③算术运算符（部分）先*/% 、后+-
    var num = 5 && 5 || 5 > 6 && 7 < 8 || false;
    // ④关系运算符，先>、>=、<、<= ；⑤关系运算符 后==、 != 、=== 、!==
    var num = 5 && 5 || false && true || false;
   //⑥逻辑运算符（部分) ，先&&
    var num = 5 || false || false;
    //⑥逻辑运算符（部分) ，后||
     var num =  5 || false ;
     var num =  5 ;   
</script> 

---

下篇继续：【67】JS(4)——表达式和语句①基本介绍