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

矫情吗；* 2021-09-11 06:20 408阅读 0赞

>   这几天弄 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 打开 [**`百度`**][Link 1]，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`。

<table> 
 <thead> 
  <tr> 
   <th>表达式1返回</th> 
   <th>表达式2返回</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>true</td> 
   <td>false</td> 
   <td>值2</td> 
  </tr> 
  <tr> 
   <td>true</td> 
   <td>true</td> 
   <td>值1</td> 
  </tr> 
  <tr> 
   <td>false</td> 
   <td>true</td> 
   <td>值3</td> 
  </tr> 
  <tr> 
   <td>false</td> 
   <td>false</td> 
   <td>值3</td> 
  </tr> 
 </tbody> 
</table>

--------------------

现在，有了这个表，我们可以轻松的写出传统 `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;
    }

[Link 1]: https://www.baidu.com/