【JavaScript速成之路】JavaScript运算符

📃个人主页：「小杨」的csdn博客
🔥系列专栏：【JavaScript速成之路】
🐳希望大家多多支持🥰一起进步呀！

---

---

前言

📜前言：小杨在上一篇带着大家一起学习了JavaScript中的数据类型转换，想必大家对JavaScript数据类型转换已经有所了解了，那么今天我们将继续带着大家学习一下JavaScript中的运算符的相关知识，希望大家收获多多！

---

运算符

1，算术运算符

运算符	运算	示例	结果
+	加	7+2	9
-	减	7-2	5
*	乘	7*2	14
/	除	7/2	3
%	取模	7%2	1

知识点:

• 使用“+”和“-”可以表示正数和负数。
• 进行四则混合运算时，运算顺序遵循“先乘除后加减”的原则。
• 在进行取模运算时，运算结果的正负取决于被模数（%左边的数）的符号，与模数（%右边的数）的符号无关。
• 在开发时尽量避免利用浮点数进行运算，因为有可能会因JavaScript的精度问题导致结果的偏差。
• 因此为避免上述问题，我们可以将参与运算的小数转换成整数，计算后再将数转换为小数即可。

---

2，递增递减运算符

运算符	运算	运算符	运算
num++	后置++	++num	前置++
num–	后置–	–num	前置–

知识点1：前置和后置的区别：前置返回的是计算后的结果，后置返回的则是计算前的结果。

为了更好地理解上述知识点，示例如下：

<script>
    var a = 1;
    var b = 1;
    //前置递增用法
    console.log(++a);  
    console.log(a);

    //后置递增用法
    console.log(b++); 
    console.log(b);
</script>

示例结果：

知识点2：递增和递减运算符的优先级高于“+”，“-”等运算符，在表达式进行计算时，应注意运算顺序。

为了更好地理解上述知识点，示例如下：

<script>
    var a = 12;
    var b = ++a + 2;       //a = 13 , b = 15
    console.log(b);
    var c = b++ + 2;       //c = 17 , b = 16
    console.log(c);
    var d = c++ + ++a;     //a = 14 , d = 31 , c = 18
    console.log(d);
</script>

示例结果：

---

3，比较运算符

运算符	运算	示例	结果
>	大于	1>1	false
<	小于	1<1	false
>=	大于或等于	1>=1	true
<=	小于或等于	1<=1	true
==	等于	1==1	true
!=	不等于	1!=1	false
===	全等	1===‘1’	false
!==	不全等	1!==‘1’	true

知识点：

• ==和 != 运算符在进行比较时，如果比较的两个数据的类型不同，系统会自动将其转换成相同的类型再进行比较。
• ===和!==运算符在进行比较时，不仅仅要比较的值是否相同，还需要比较数据的类型是否相同。

为了更好地理解上述语法，示例如下：

<script>
    console.log('13' == 13);
    console.log('13' != 13);
    console.log('13' === 13);
    console.log('13' !== 13);
    console.log('13' === '13');
</script>

示例结果：

---

4，逻辑运算符

运算符	运算	示例	结果
&&	与	a && b	a与b都为true，结果为true，否则为false
||	或	a || b	a与b中至少有一个为true，结果为true，否则为false
!	非	! a	如果a为true，结果为false，否则相反

知识点：

• 使用逻辑运算符运算时，是按照从左到右的顺序进行求值的，需特别注意是否出现“短路”的情况。
  • 使用&&连接两个表达式，语法为：表达式1&&表达式2。如果表达式1为true，则返回表达式2的值；如果表达式1为false，则返回false。
  • 使用 || 连接两个表达式，语法为：表达式1||表达式2。如果表达式1为true，则返回true；如果表达式1为false，则返回表达式2的值。

为了更好地理解上述语法，示例如下：

<script>
    //&& 短路情况演示
    console.log(123 && 456);
    console.log(0 && 456);
    //|| 短路情况演示
    console.log(123 || 456);
    console.log(0 || 456);
</script>

示例结果：

---

5，位运算符

位运算符用来对数据进行二进制运算，将参与运算的操作数视为由二进制（0和1）组成的的32位的串，运算时会将二进制数的每一位进行运算。

运算符	名称	示例	运算方式
&	按位与	a & b	只要对应二进制位都为1，运算结果为1，否则为0
|	按位或	a | b	只要对应二进制位中有1，运算结果为1，否则为0
~	按位非	a ~ b	0的取反值为1，1的取反值为0
^	按位异或	a ^ b	如果对应二进制位相同，运算结果为0，否则为1
<<	左移	a << b	将a左移b位二进制位，右边空位补0，左边被移出位舍去
>>	右移	a >> b	将a右移b位二进制位，左边空位根据原数的符号位补0或1，正数补0，负数补1
>>>	无符号右移	a >>> b	将a右移b位二进制位，左边最高位补0，右边被移出位舍去，不考虑正负数

为了更好地理解上述位运算符的使用，示例如下：

<script>
    console.log(15 & 8);        
    //  0000000000000000000000000001111 
    //& 0000000000000000000000000001000
    //= 0000000000000000000000000001000

    console.log(15 | 8);
    //  0000000000000000000000000001111 
    //| 0000000000000000000000000001000
    //= 0000000000000000000000000001111

    console.log(~ 15); 
    //~  0000000000000000000000000001111 
    //=  1111111111111111111111111110000  补码
    //   1111111111111111111111111101111  反码
    //   1000000000000000000000000010000  原码

    console.log(15 ^ 8);        
    //  0000000000000000000000000001111 
    //^ 0000000000000000000000000001000
    //= 0000000000000000000000000000111

    console.log(7 << 2);
    //  0000000000000000000000000000111 
    //= 0000000000000000000000000011100

    console.log(7 >> 2);
    //  0000000000000000000000000000111 
    //= 0000000000000000000000000000001
    
    console.log(7 >>> 2);       
    //  0000000000000000000000000000111 
    //= 0000000000000000000000000000001
</script>

示例结果：

---

6，赋值运算符

运算符	运算	示例	结果
=	赋值	a = 3	a=3
+=	加并赋值	a += 3	a = a + 3
-=	减并赋值	a -= 3	a = a - 3
*=	乘并赋值	a *= 3	a = a * 3
/=	除并赋值	a /= 3	a = a / 3
%=	求模并赋值	a %= 3	a = a % 3
+=	连接并赋值	a += ‘abc’	a = a + ‘abc’
<<=	左移并赋值	a <<= 3	a = a << 3
>>=	右移并赋值	a >>= 3	a = a >> 3
>>>=	无符号右移并赋值	a >>>= 3	a = a >>> 3
&=	按位与并赋值	a &= 3	a = a & 3
^=	按位异或并赋值	a ^= 3	a = a ^ 3
|=	按位或并赋值	a |= 3	a = a | 3

---

7，三元运算符

三元运算符是一种需要3个操作数的运算符，运算的结果根据给定条件决定。

语法：条件表达式 ？表达式1：表达式2

规则：先求条件表达式的值，若结果为true，则返回表达式1的执行结果，否则返回表达式2的执行结果。

为了更好地理解上述语法，示例如下：

<script>
    var age = 19;
    var ret = age >= 18 ? '成年' : '未成年';
    console.log(ret);
</script>

示例结果：

---

8，运算符优先级

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

为了更好地理解上述运算符优先级语法，示例如下：

<script>
    var a = 3 > 5 && 3 < 5 && 7 == 4;  //false && true && false = false
    console.log(a);

    var b = 3 > 5 || 3 < 5 || 7 == 4;  //false || true || false = true
    console.log(b);

    var c = !a || 3 < 5 && 7 === 4;   //true || true && false = true
    console.log(c);
</script>

示例结果：

---

结语

这就是本期博客的全部内容啦，想必大家已经对JavaScript运算符的相关内容有了全新地认识和理解吧，如果有什么其他的问题无法自己解决，可以在评论区留言哦！

最后，如果你觉得这篇文章写的还不错的话或者有所收获的话，麻烦小伙伴们动动你们的小手，给个三连呗（点赞👍，评论✍，收藏📖），多多支持一下！各位的支持是我最大的动力，后期不断更新优质的内容来帮助大家，一起进步。那我们下期见！

---