奇怪的JS：0 ? 1 : 2 ? 3 : 4

今天在看demo的时候，看到了一个表达式

type: isActive ? 'paragraph' : isList ? 'list-item' : format,

我：？？？

这是啥奇怪的玩意，虽然大概知道他要表达的是啥意思，但是脑袋总是懵懵的。于是打算潜下心来看看这个到底是个啥

为了简单语义，我自己写了个demo

console.log(0 ? 1 : 2 ? 3 : 4 ? 5 : 6)

我第一感觉，这个表达式是根据根据bollean排序，会首先打印出非false的值，然后根据三元表达式的特性，所以应该是2？于是我敲下命令

node test.,js // 3

哦好吧，结果是3。于是我又测试了几个实例：

console.log(0 ? 1 : 2 ? 3 : 4 ? 5 : 6) //3
console.log(1 ? 1 : 2 ? 3 : 4 ? 5 : 6) // 1
console.log(10 ? 1 : 2 ? 3 : 4) // 1
console.log(0 ? 0 : 2 ? 3 : 4) // 3
console.log(0 ? 1 : 2 ? 3 : 4) // 3

有了这些例子，大概就能猜出他的逻辑了，接下来我以第一个例子为例解释：

0 ? 1 : (2 ? 3 : 4 ? 5 : 6)

首先他是一个二重三元表达式，我们先判断level-1。首先是0，是个false的值，根据三元表达式的逻辑，会跳过1然后我们来到了：

2 ? 3 : 4 ? 5 : 6

这时候，2是一个true的值，我们再把后面的看做两部分 3 : (4 ? 5 : 6)

这时候我们就得出了最终结果是3。

奇怪，那后面的4 ? 5 : 6呢？他也是一个表达式，3是true，我们是不是还要再做一次运算，得出最终结果5？

刚开始我特色这么想的，但是其实三元表达式，只要发现了true，就不会再继续下去了，所以后面的那个表达式就不会被执行了

那我非要得出456的其中一个值呢？

其实也简单，只要我们把他第一次跳转的时候，给他一个false的值，这个表达式的运算就能再跳跃一次，比如这样：

console.log(0 ? 1 : 0 ? 3 : 4 ? 5 : 6)

他的执行逻辑是：0 -> 0 -> 4 -> 5

最终就能得到比较靠后的数字了。

哦，回到主题，那为什么这个demo要写成这样呢？秀肌肉吗？

哈哈，其实好像还真是的，我们再看一次他的表达式isActive ? 'paragraph' : isList ? 'list-item' : format,

其实他要表达的意思是这样的：

if (isActive) {
  return 'paragraph'
} else {
  if (isList) return 'list-item'
  else return 'format'
}

这么一看，是不是清晰多了。一行代码的逻辑就解决了两层if嵌套。大佬果然还是大佬啊哈哈。

又是感慨自己是菜鸟的一天~