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

Question

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

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

Answer 1

It'll be clearer if you indent your original code - changing only whitespace, your original code is:

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

Translating that, you get:

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

We can try writing:

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;
}

I pulled out the nested ternary expression into a variable scroll . This makes it much easier to rewrite the logic.

Answer 3

First of all I want to suggest you to use some linting (eslint, jslint, tslint etc) tool and prettier. To have better code formatting. It helps in long run.

The other answers are also valid. But I want to write one.

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;
}