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

三目運算符相信你們都很熟悉了：

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判斷語句，這樣就能理解複雜三目運算符所包含的意義了。

注意，三目運算符中"?"和":"是成對出現的，最起碼數量上，有幾個"?"就會有幾個":".