★文章内容学习来源：拉勾教育大前端就业集训营
本篇学习目标：
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> 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> console.log(Infinity + Infinity); console.log(Infinity - Infinity); console.log(Infinity * Infinity); console.log(Infinity / Infinity); console.log(Infinity % Infinity); </script>
<script> console.log(Infinity + 5); console.log(Infinity - 5); console.log(Infinity * 5); console.log(Infinity / 5); console.log(Infinity % 5); </script>
<script> console.log(-Infinity + 5); console.log(-Infinity - 5); console.log(-Infinity * 5); console.log(-Infinity / 5); console.log(-Infinity % 5); </script>
<script> console.log(5 / Infinity); console.log(5 % Infinity); </script>
(2)其他类型的数据参与数***算
①有字符串参与的 + 运算
②隐式转换出现的情况
- 隐式转换：除了字符串参与的 + 运算，其他情况下，所有其他数据类型参与数***算时，计算机暗中将其他数据类型先自动转换成数字类型，再参与运算，这个过程中不需要使用
parseInt()、Number() 等方法，过程是暗中进行，这就是一个隐式转换的过程。
| 其它类型数据 | 最终转换为的数字类型 |
纯数字字符串 | 对应数字（比如"123"转换为123） |
true | 转换为1 |
false、null、""空字符串、" "空白字符串 | 转换为0 |
undefined、非空非纯数字字符串 | 转换为NaN |
三、比较运算符
1.基本介绍
- 也叫作关系运算符；
- 一个比较运算符 (comparison operator)，比较它的操作数并返回一个布尔类型值；
- 运算结果：要么是
true，要么是false。
| 比较运算符/关系运算符 |
> | 大于 |
< | 小于 |
>= | 大于等于 |
<= | 小于等于 |
== | 相等，只判断值大小是否相等，不判断数据类型 |
!= | 不等，与相等完全相反 |
=== | 全等，不光判断值相等，还要判断数据类型相等 |
!== | 不全等，与全等于完全相反 |
2. 正常情况
<script> console.log(2 > 1); console.log(1 >= 2); console.log(1 < 2); console.log(2 <= 1); console.log(2 == 1); console.log(2 != 1); console.log(2 !== 2); console.log(1 === 1); </script>
3.非正常情况
(1)特殊值参与
①NaN参与：!=和!==结果是 true，其他的都得到 false
<script> console.log(NaN != 1); console.log(NaN !== 2); console.log(NaN > 2); console.log(NaN >= 1); console.log(NaN < 2); console.log(NaN <= 1); console.log(NaN == 3); console.log(NaN === 3); </script>
②Infinity参与：视情况而定
<script> console.log(Infinity > Infinity); console.log(Infinity >= Infinity); console.log(Infinity < Infinity); console.log(Infinity >= Infinity); console.log(Infinity == Infinity); console.log(Infinity != Infinity); console.log(Infinity === Infinity); console.log(Infinity !== Infinity); </script>
<script> console.log(Infinity > 5); console.log(Infinity >= 5); console.log(Infinity < 5); console.log(Infinity <= 5); console.log(Infinity == 5); console.log(Infinity != 5); console.log(Infinity === 5); console.log(Infinity !== 5); </script>
(2)字符串与字符串比较
- 不会发生隐式转换为数字;
- 而是比较两个字符串的 Unicode 编码顺序；
- 字符编码顺序：从前往后 0-9，A-Z，a-z，前面的小于后面的；
- 比较时，不关心两个字符串的长度，从第一个字符开始比较，依次往后顺延比较，直到比较出大小，就不再往后比较。
<script> console.log("0" < "9"); console.log("0" <= "9"); console.log("A" < "Z"); console.log("Z" < "a"); console.log("a" < "z"); console.log("1" > "8"); console.log("1" >= "8"); console.log("B" > "Y"); console.log("Y" > "b"); console.log("c" > "x"); console.log("01" < "98"); console.log("01" <= "98"); console.log("AB" < "ZY"); console.log("Zc" < "ab"); console.log("aB" < "zF"); console.log("14" > "87"); console.log("01" >= "98"); console.log("BB" > "YC"); console.log("Yc" > "bd"); console.log("cd" > "xe"); console.log("xx" == "xx"); console.log("xx" ==="xx"); console.log("AA" != "aa"); console.log("AAXX" !== "AAxx") </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> console.log(null < 1); console.log(0 == null); console.log(null >= 0); console.log(null <= 0); console.log(null == undefined); </script>
4.运算顺序
<script> console.log(3 > 2 > 1); </script>
- 上例中，
3 > 2 结果为true ， true > 1 结果为 false，所以最终结果为false
四、逻辑运算符
1.基本介绍
- 常用于布尔值之间;
- 当操作数都是布尔值时，返回值也是布尔值。
| 逻辑运算符符号 | 含义 | 返回值规律 |
&& | 逻辑与运算符， 且 | 两边操作数布尔值都true，返回值结果才为true；只要有一边操作数布尔值为false，返回值结果就为false |
|| | 逻辑或运算符 | 两边操作数布尔值只要有一个是true，返回值就是true；两边值都为false，返回值结果才为false |
! | 逻辑非运算符 | 返回值结果为操作数布尔值的相反值 |
2. 正常情况
<script> console.log(true && true); console.log(true && false); console.log(false && false); console.log(true || false); console.log(true || true ); console.log(false || false); console.log(! false); console.log(! true); console.log(!!!! true); console.log(!!!!! true); </script>
3.非正常情况
- 除了布尔类型的值之外，其他数据类型的值参与，会隐式转换；
- 运算过程中需要将操作数隐式转换为布尔类型的值，参与判断计算，最终运算结果还是原来的某个位置的数据；
- 并不是所有逻辑运算返回结果都是布尔值，其他数据参与得到的就是数据本身。
- 具体规律可看下方4.隐式转换为布尔值的规律。
<script> console.log(NaN && true); console.log(" " && null); console.log(23 || false); console.log(undefined || 0); console.log(!9); console.log(!0); </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); </script>
<script> var yi = !0; console.log(yi); var er = 123 && true ; console.log(er); var san = undefined && null; console.log(san); var last = san || er ; console.log(last); </script>
五、赋值运算符
1. 介绍
- 赋值运算符必须有变量参与运算；
- 赋值运算符会做两件事情：
①将变量中原始值参与对应数***算，与右侧的数据；
②将运算结果再重新赋值给变量。 - 变量位于操作符的左侧。
| 赋值运算符符号 | 含义 |
= | 等于 |
+= | 加等于 |
-= | 减等于 |
*= | 乘等于 |
/= | 除等于 |
%= | 取余等于 |
++ | 递加 |
-- | 递减 |
2.举例前6个赋值运算符
- 最后两个赋值运算符也属于一元运算符，所以会在后面举例。
<script> var a = 5; console.log(a); var b ; console.log(b); b += 6; console.log(b); var c = 9; c -= 2; console.log(c); var d = 2; d *= 7; console.log(d); var e = 9; e /= 9; console.log(e); var f = 10; f %= 4; console.log(f); </script>
六、一元运算符
1.介绍
++ 、-- 、!也叫一元运算符，因为只有一个操作数。
++ 或 -- 符号可以写在变量前和变量后面，位置不同可能导致程序运行结果不同，如下举例：
2.举例（以++符号为例）
（1） ++符号在变量之前，先自加，后参与
- 如下举例
++g，++g 在参与过程中整体就使用 g加 1 之后的新值，使用完后第二次用 g 变量时，g 用的也是加 1 的新值。
<script> var g =1; console.log(++g); console.log(g); </script>
（2） ++ 符号在变量之后，先参与，后自加
- 如下举例
h++，h++ 在参与程序过程中使用的原始没有加 1 的值，使用完后第二次用 h 变量时，h用的就是加 1 后的新值。
<script> var h =1; console.log(h++); console.log(h); </script>
（3）综合举例
<script> var a = 10, b = 20, c = 30; var num = a++ + ++b + c++ + ++a; console.log(num); </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); </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)——表达式和语句①基本介绍
京公网安备 11010502036488号