三目(三元)运算符??::的情势

三目运算符置信人人都很熟习了:

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推断语句,如许就可以明白庞杂三目运算符所包括的意义了。

注重,三目运算符中”?”和”:”是成对涌现的,最起码数目上,有几个”?”就会有几个”:”.

    原文作者:隐约雷鸣
    原文地址: https://segmentfault.com/a/1190000008939524
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞