JavaScript之三目运算符的使用及其显著缺点
在代码中,我们经常会用到三目运算符,使用起来倒也简单,可以替换一个if-else语句,代码也因此变得简洁起来。
首先写一些它的用法,举两个简单的例子
1 === 0? 2:3 // 3
1 === 0?2:3===3?5:6 // 5
如果?左侧为true则输出:前面的内容,如果为false,则输出后面的内容。如果有多个三目运算的话,从右往左,先计算表达式的值,再一层层得到最终结果。
这里我要特别再举几个例子,顺便解释下两个等于号和三个等于号的区别
1 == '1' // true
0 == '0' //true
0 == '' //true
0 === '' // false
0 == null // false
NaN == '' //false
null == undefined // true
具体规则
先说 ===(等同符),这个比较简单,具体比较规则如下:
1、如果类型不同,就[不相等]
2、如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断)
3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。
4、如果两个值都是true,或者都是false,那么[相等]。
5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。
6、如果两个值都是null,或者都是undefined,那么[相等]。
再说 == (等值符),具体比较规则如下:
1、如果两个值类型相同,进行 === 比较,比较规则同上
2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
a、如果一个是null、一个是undefined,那么[相等]。
b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。非js核心的对象,令说(比较麻烦,我也不大懂)
e、任何其他组合(array数组等),都[不相等]。
接下来再说说它最大的缺点
我们都知道当左边的运算结果返回true的时候,最终值采取冒号左侧的,返回false时,最终值取冒号右侧内容。
可关键就在这个左边的运算结果,有时候恰恰就是我们想要的,可它偏偏等值于 ‘false’
这时候,我们就不能很方便地使用简单三目运算符了。
例如:
let str1 = 0
str1?‘存在’:‘不存在’
这种场景下,我们很容易就以为是判断左侧内容是否存在,特别容易产生歧义。
其次,多对于多个三目运算符的嵌套使用,虽然代码是少了很多,可具体理解起来,是相当麻烦的。
写代码,不光看整洁性,也要看可读性啊!