三目（三元）运算符??::的形式

最新推荐文章于 2024-05-25 07:42:59 发布

转载最新推荐文章于 2024-05-25 07:42:59 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008939524

本文通过实验探讨了复杂的三目运算符的工作原理，并详细解释了其右结合性特点，帮助读者理解如何使用复杂的三目运算符来简化条件判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三目运算符相信大家都很熟悉了：

foo ? 'foo == true' : 'foo == false'

而三目运算符?:?:?.....的调用方式大家也不陌生, 就相当于一堆if - else if语句：

foo ? 'foo == true' : bar ? 'bar == true' : 'bar == false'

但是在zepto.js里有一段代码：

slice.call(
         isSimple && !maybeID && element.getElementsByClassName ? // DocumentFragment doesn't have getElementsByClassName/TagName
           maybeClass ? element.getElementsByClassName(nameOnly) : // If it's simple, it could be a class
           element.getElementsByTagName(selector) : // Or a tag
           element.querySelectorAll(selector) // Or it's not simple, and we need to query all
       )

这里的三目运算符用的是？？：：的形式，我搞不太懂，所以打算做个实验搞懂它：

var bool1 = true, bool2 = true, val1 = 'val1', val2 = 'val2', val3 = 'val3';
  console.log(bool1 ? bool2 ? val1 : val2 : val3);

用表格记录下4个不同点情况：

bool1    bool2    值
true     true     val1
true     false    val2
false    true     val3
false    false    val3

可以看出上面的代码等价于：

console.log(bool1 ? ( bool2 ? val1 : val2 ) : val3);

条件（三元）运算符 -mdn上说三目运算符具有右结合性，根据以上两个例子，我总结三目运算符右结合性的意思是：

从最右边取":", 然后看它左边相邻的符号，如果是"?",那么它和这个"?"结合起来，可以用一个（）把它俩包住；如果左边相邻的符号是":"，那么取左边的":"，再重复这个判断.

比如：

?:?:?:?:?:

可以取为

?:(?:(?:(?:(?:))))

而

???:::

可以取为

?(?(?:):):

然后根据你加上的括号，可以写出等价的if判断语句，这样就能理解复杂三目运算符所包含的意义了。

注意，三目运算符中"?"和":"是成对出现的，最起码数量上，有几个"?"就会有几个":".