【JavaScript速成之路】JavaScript运算符
📃个人主页：「小杨」的csdn博客
🔥系列专栏：【JavaScript速成之路】
🐳希望大家多多支持🥰一起进步呀！
文章目录
- 前言
-
- 运算符
-
- 1，算术运算符
- 2，递增递减运算符
- 3，比较运算符
- 4，逻辑运算符
- 5，位运算符
- 6，赋值运算符
- 7，三元运算符
- 8，运算符优先级
- 结语
前言
📜前言：小杨在上一篇带着大家一起学习了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 = 15console.log(b);var c = b++ + 2; //c = 17 , b = 16console.log(c);var d = c++ + ++a; //a = 14 , d = 31 , c = 18console.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//= 0000000000000000000000000001000console.log(15 | 8);// 0000000000000000000000000001111 //| 0000000000000000000000000001000//= 0000000000000000000000000001111console.log(~ 15); //~ 0000000000000000000000000001111 //= 1111111111111111111111111110000 补码// 1111111111111111111111111101111 反码// 1000000000000000000000000010000 原码console.log(15 ^ 8); // 0000000000000000000000000001111 //^ 0000000000000000000000000001000//= 0000000000000000000000000000111console.log(7 << 2);// 0000000000000000000000000000111 //= 0000000000000000000000000011100console.log(7 >> 2);// 0000000000000000000000000000111 //= 0000000000000000000000000000001console.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 = falseconsole.log(a);var b = 3 > 5 || 3 < 5 || 7 == 4; //false || true || false = trueconsole.log(b);var c = !a || 3 < 5 && 7 === 4; //true || true && false = trueconsole.log(c);
</script>
示例结果：
结语
这就是本期博客的全部内容啦，想必大家已经对JavaScript运算符的相关内容有了全新地认识和理解吧，如果有什么其他的问题无法自己解决，可以在评论区留言哦！
最后，如果你觉得这篇文章写的还不错的话或者有所收获的话，麻烦小伙伴们动动你们的小手，给个三连呗（点赞👍，评论✍，收藏📖），多多支持一下！各位的支持是我最大的动力，后期不断更新优质的内容来帮助大家，一起进步。那我们下期见！
