在Javascript中,为了进行逻辑运算的判断,我们会使用很多的运算符。运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。
Javascript 常见的有下面这些运算符:
- 算数运算符
- 赋值运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 三元运算符
- 位运算符
- 空值合并运算符
- 空赋值运算符
- 可选链式运算符
- 双星号运算符
接下来,我就一一介绍它们的用法及应用场景
1.算数运算符
使用场景:算术运算使用的符号,用于执行两个变量或值的算术运算。
我们都知道在日常的生活中,我们难免会进行交易,比如 你去超市买东西,会和收银员进行物品与金钱的交易,这就会使用到算数,而程序中中同样也会使用运算。程序中常用的算数运算符有:
运算符 | 描述 | 实例 |
---|---|---|
+ | 加 | 5+10=15 |
- | 减 | 10-5=5 |
* | 乘 | 10*5=50 |
/ | 除 | 10/5=2 |
% | 取余 | 10%5=0 |
这里,我要特别强调的一点,对于 算数运算符只针对于整数型的值,而对于浮点型会出现精度问题,所以:不要直接运算两个浮点数,因为结果可能你会出乎意料。
常见的一个经典面试题:
0.1+0.2= ?
这个题,可能很多人会毫无疑问的回答0.3,可事实结果却不是0.3,这是为什么呢?
这就是因为计算机是二进制的,对于浮点型的小数来说,并不会像现实当中进行运算,存在精度问题,那么 0.1 + 0.2 到底等于多少呢?
结果是:0.30000000000000004
如果使用一个浮点型小数去和一个整数进行运算,也不会出现你想要的答案,比如:
console.log(0.08 * 100); // 结果不是 7, 而是:8.000000000000001
2.赋值运算符
赋值运算符就是进行值或变量的赋值,等号左边等于等号右边。
赋值运算符又可以分为简单和复合两种赋值运算
常见的 赋值运算符除了有 = 之外,+=、-=、*=、/=、%=也是赋值运算符。
var num1 = 66;
var num2 = num1;
var num3 = num1 + 5;
console.log(num2); // 输出:66
console.log(num3); // 输出:71
3.递增和递减运算符
使用场景:如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( – )运算符来完成。
在 JavaScript 中,递增(++)和递减( - - )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我 们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。 注意:递增和递减运算符必须和变量配合使用。
- 前置递增运算符 (先自加,后运算)
var num = 10;
console.log(++num + 5); // 16
- 后置递增运算符 (先运算,后自加)
var num = 10;
console.log(5 + num++); // 15
4.比较运算符
使用场景:两个数据进行比较,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。
运算符 | 说明 | 案例 | 结果 |
---|---|---|---|
> | 大于 | 10>5 | true |
< | 小于 | 6<3 | false |
>= | 大于等于 | 10>=6 | true |
<= | 小于等于 | 6<=20 | true |
== | 等于 (存在隐式转换,常用来判断) | 10==10 | true |
!= | 不等于 | 20!=10 | true |
=== | 全等 | 21===“21” | false |
!== | 不全等(数值跟类型必须全部相同) | 10!==“30” | true |
5.逻辑运算符
使用场景:使用布尔值进行逻辑判断,逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。
运算符 | 说明 | 案例 | 结果 |
---|---|---|---|
&& | 逻辑与 | 10>5 && 12 <10 | false |
11 | 逻辑或 | 6<3 // 10<30 | true |
& | 逻辑非(取反符) | ! true | false |
在逻辑运算符中,常见的是短路运算(逻辑中断)
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。
var num1 = 123 && 456 // 456
var num2 = 0 && 123 // 0
var num3 = 123 || 456 //123
var num4 = 0 || 456 // 456
var num5 = 123 && 234 && 345 // 345
var num6 = 123 || 234 || 345 // 123
总结:
- 逻辑与短路运算中,如果表达式1 为真,会返回表达式2的值
- 逻辑或短路运算中,如果表达式1 为真,会返回表达式1的值,如果表达式1为假,会返回表达式2的值
- 无论有多少个表达式,都会按照 上述的逻辑进行判断
这里,我说下 Javascipt中是假值的情况都有:null、undefined、""(空字符串)、+0、-0、NaN
,除此之外都是真值。
6.三元运算符
使用场景:只存在真或假的情况,常使用更加方便简洁。
var flag = true;
var text = flag ? "我是真的孙悟空":"我是假的孙悟空";
console.log(text); // 我是真的孙悟空
7.位运算符
位运算符包括 & 和 |
使用场景:基本和逻辑运算符一样,都是做逻辑判断的,结果返回为布尔值。
var num = 12 & 2 // 2
var num1 = 32 | 6 // 32
var flag = 18 > 16 | 25< 16 // true
8.空值合并运算符 (??)
使用场景:为了解决或运算符|| 而设计出来的。
或运算符的操作|| -->当左侧的数据为假值(数字 0, 布尔类型的 false,空字符串,undefined, null)时,则执行右侧的语句
空值合并运算符??–->只会在左侧为 undefined 或者 null 时,才会执行右侧的语句
var a = 0 ;
var r = undefined || null;
var b = a || 123; // 此时 b = 123
var c = r ?? 456 //此时 c = 456
9.空赋值运算符(??=)
同时,空值合并运算符还可以与=结合成为一个赋值操作,当左侧为 null 或者 undefined 时,则将右侧语句的结果赋值给左侧的变量:
let x = null
let y = 5
console.log(x ??= y) // => 5
10.可选链式运算符(?.)
使用场景:如果要访问对象的深层嵌套属性,则必须通过很长的布尔表达式去检查每个嵌套级别中的属性。必须检查每个级别中定义的每个属性,知道所需的深度嵌套的属性为止。
试想想,如果在任何级别的对象中都有undefined或null的嵌套对象,如果不进行检查,那么程序将会报错至崩溃。所以我们必须检查每个级别,确保当它遇到undefined或null对象时不崩溃。那么此时只需要使用?.来访问嵌套对象。而且如果碰到undefined或Null属性,那么它只返回undefined。
const student = {
score: {
math: [98, 67, () => {
return 99;
},
],
},
};
student?.score?.math?.[2]?.(); // 99
这样写的好处,是为了避免某一个变量出现undefined或null ,致使程序出现报错。
11.双星号运算符()**
使用场景:双星号运算符**(求幂运算符)相当于 js 中 的 Math.pow() , 他执行的是一个幂运算
1 ** 2; // 1
2 ** 4; // 2 的 4 次幂 ==》 Math.pow(2,4);
在开发中,多使用这些运算符,会使我们的代码更加简洁,可读性更好。希望通过这篇文章可以对小伙伴们有所帮助。