这几天弄 Padavan 的时候,看到一段 JS 写的三目运算代码,左边过来就是 3 个问号,有点懵逼,翻了下没找到资料,就自己动手理解了一番。
原 JS 代码:
var blockmarginTop;
var sheight = document.documentElement.scrollHeight;
var cheight = document.documentElement.clientHeight;
/* 原代码第二个问号后数值为 200
* 因为最后 document.documentElement.scrollTop + 200 结果也可能为 200
* 为了区分故改成 222 解释
*/
blockmarginTop = (navigator.userAgent.indexOf("Safari") >= 0) ? (sheight - cheight <= 0) ? 222 : sheight - cheight + 200 : document.documentElement.scrollTop + 200;
为此,我还专门在 Chrome 上一直调试,把它写成 if else 的形式,这样容易理解一些。在调试过程中我把每个条件的返回值记录了下来,以下是操作步骤:
-
Chrome 打开
百度
,F12 打开开发者工具「Mac 是 option+command+I 或 shift+command+C,Ubuntu 上是 Shift+Ctrl+I 或 Shift+Ctrl+C」。 -
选择
Console
选项卡,先复制我上方的原 JS 代码并回车,得到blockmarginTop
的值为713
「这个东西每个人不一样,不要在意,记一下大小即可」 -
依次尝试执行
navigator.userAgent.indexOf("Safari") >= 0
、sheight - cheight <= 0
,记录返回值。改变<
和>
,再次执行,记录返回值。 -
依次尝试执行
sheight - cheight + 200
、document.documentElement.scrollTop + 200
,记录返回值。 -
这里不用过多的文字,下表中
表达式1
对应navigator.userAgent.indexOf("Safari") >= 0
;表达式2
对应sheight - cheight <= 0
;值1
对应222
;值2
对应sheight - cheight + 200
;值3
对应document.documentElement.scrollTop + 200
。
表达式1返回 | 表达式2返回 | 返回值 |
---|---|---|
true | false | 值2 |
true | true | 值1 |
false | true | 值3 |
false | false | 值3 |
现在,有了这个表,我们可以轻松的写出传统 if else
代码了,看起来就是这么清爽:
if (navigator.userAgent.indexOf("Safari") >= 0) {
if (sheight - cheight <= 0){
blockmarginTop = 222;
} else {
blockmarginTop = sheight - cheight + 200;
}
} else {
blockmarginTop = document.documentElement.scrollTop + 200;
}