JavaScript之三目运算符的使用及其显著缺点

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?'存在':'不存在'

这种场景下，我们很容易就以为是判断左侧内容是否存在，特别容易产生歧义。

其次，多对于多个三目运算符的嵌套使用，虽然代码是少了很多，可具体理解起来，是相当麻烦的。

写代码，不光看整洁性，也要看可读性啊！