如何将此三元运算符表达式转换为if / else块？

Question

我很难使用JS三元运算符将该表达式“翻译”为if / else语句，这有助于我更好地可视化代码中发生的事情。

mouseX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);

Answer 1

如果您缩进原始代码，则会更清楚-仅更改空格，原始代码为：

mouseX = (window.Event)
  ? e.pageX
  : event.clientX + (
    document.documentElement.scrollLeft
    ? document.documentElement.scrollLeft
    : document.body.scrollLeft
  );

将其翻译为：

if (window.Event)
  mouseX = e.pageX;
else {
  let add;
  if (document.documentElement.scrollLeft)
    add = document.documentElement.scrollLeft;
  else
    add = document.body.scrollLeft;
  mouseX = event.clientX + add;
}

Answer 2

我们可以尝试编写：

if (window.Event) {
    mouseX = e.pageX;
}
else {
    var scroll;
    if (document.documentElement.scrollLeft) {
        scroll = document.documentElement.scrollLeft;
    }
    else {
        scroll = document.body.scrollLeft;
    }
    mouseX = event.clientX + scroll;
}

我将嵌套的三元表达式取出到变量scroll中。这样可以更轻松地重写逻辑。

Answer 3

首先，我想建议您使用一些棉绒（eslint，jslint，tslint等）工具并且更漂亮。以获得更好的代码格式。从长远来看，它会有所帮助。

其他答案也有效。但是我想写一个。

if (window.Event) {
  mouseX = e.pageX;
} else {
  let scroll;
  if (document.documentElement.scrollLeft) {
    scroll = document.documentElement.scrollLeft;
  } else {
    scroll = document.body.scrollLeft;
  }
  mouseX = event.clientX + scroll;
}