javascript - 理解嵌套三元运算符的简单方法？

Question

是否有一个简单的启发式方法来理解如何阅读嵌套的三元运算符？ 我在某人的源代码中遇到过这个，但无法理解。一个简单的三元组很容易:

isRed = color == 'red' ? true : false

但是您如何阅读以下内容？我可以将第一个与最后一个对齐，第二个与倒数第二个对齐，还是我必须将其解析为我脑海中的 if/else 树？

var offset =
  ( hasFrozenRows )
    ? ( options.frozenBottom )
    ? ( row >= actualFrozenRow )
    ? ( h < viewportTopH )
    ? ( actualFrozenRow * options.rowHeight )
    : h
    : 0
    : ( row >= actualFrozenRow )
    ? frozenRowsHeight
    : 0
    : 0;

重新制表后，它可以变成这样，这几乎可以理解(？)

      var offset =
        ( hasFrozenRows ) ?
          ( options frozenBottom ) ?
            ( row >= actualFrozenRow ) ?
              ( h < viewportTopH ) ?
                ( actualFrozenRow * options.rowHeight )
                :
                h
              :
              0
            :
            ( row >= actualFrozenRow ) ?
              frozenRowsHeight
              :
              0
            :
            0;

Answer 1

我认为如果您尝试将其阅读为一系列check this、if true then this、else that。

为此，将 ? 和 : 运算符放在行的开头可能更容易，并像阅读流程图上的箭头一样阅读它们，标记为"is"和“否”。例如:

cond1 
  ? cond2 
    ? cond3 
      ? res1 
      : res2
    : res3
  : res4

可以理解为:

cond1?
  yes -> is cond2 
    yes -> is cond3?
      yes -> res1 
      no -> res2
    no -> res3
  no -> res4

这仍然不能使它具有很好的可读性，我同意所有评论说这种代码真的应该被重写以提高可读性。