三目运算符多条件嵌套小解

  这几天弄 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 的形式，这样容易理解一些。在调试过程中我把每个条件的返回值记录了下来，以下是操作步骤：

1. Chrome 打开 百度，F12 打开开发者工具「Mac 是 option+command+I 或 shift+command+C，Ubuntu 上是 Shift+Ctrl+I 或 Shift+Ctrl+C」。

2. 选择 Console 选项卡，先复制我上方的原 JS 代码并回车，得到 blockmarginTop 的值为 713「这个东西每个人不一样，不要在意，记一下大小即可」

3. 依次尝试执行 navigator.userAgent.indexOf("Safari") >= 0、sheight - cheight <= 0，记录返回值。改变 < 和 >，再次执行，记录返回值。

4. 依次尝试执行 sheight - cheight + 200、document.documentElement.scrollTop + 200，记录返回值。

5. 这里不用过多的文字，下表中 表达式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;
}