JS三元运算符vs if / else

Question

试图更好地了解JavaScript。 我已经在该论坛上回答了一些类似的问题，但是我对此仍然感到困惑。

我在网络上有一些代码可以切换模态窗口（div）和叠加层（div）的可见性-（我知道使用jQuery可能会更好，但我想首先了解JS）：

function overlay() {
    el = document.getElementById("overlay");

    /* TERNARY */
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";

    /*
    if(el.style.visibility == "visible"){
        el.style.visibility = "hidden";
    }else if(el.style.visibility == "hidden"){
        el.style.visibility = "visible";
    }

   */   
}

我认为三元运算符只是编写if / else语句的一种更紧凑的方式。 但是，当我用if / else语句（当前在代码中注释掉）替换上面代码中的三元运算符时，该代码不起作用。

我可能出了点问题，但我不知道怎么办？ 有人可以帮忙吗？

谢谢。

Answer 1

三元运算符（更正确地称为条件运算符 ）可以替换单个if / else（仅一个比较子句），而不是if / else-if（具有两个比较）。 所以

var d = (a ? b : c);

等效于：

var d;

if (a) {
    d = b;
} else {
    d = c;
}

因此，在您的情况下，相当于条件运算符的if / else将是：

if (el.style.visibility == "visible") {
    el.style.visibility = "hidden";
} else {
    el.style.visibility = "visible";
}

同样，嵌套两个条件运算符可以产生与if / else-if等效的表达式：

el.style.visibility = (el.style.visibility == "visible") ? 
    "hidden" : (el.style.visibility == "hidden") ? 
    "visible" : el.style.visibility;

显然，在这种情况下，如果您要进行两次比较，则if / else-if更具可读性，因此应该首选。

Answer 2

这两个代码块实际上并不相同。

检查“可见”或其他任何值

/* TERNARY */
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";

检查“可见”或“隐藏”的值

if(el.style.visibility == "visible"){
    el.style.visibility = "hidden";
}else if(el.style.visibility == "hidden"){
    el.style.visibility = "visible";
}

您没有检查的第三个值

style.visibility也可以是"" ，表示默认值。

当天的免费提示：如果看似某个条件不起作用，请使用debugger或console.log进行检查，以验证值是否符合您的期望。 99.99％的时间，您会发现这些值与您认为的不一样。

Answer 3

我以为当一个函数返回另一个函数时，我会添加另一个三元示例。 代替if / else if：

function greetCurried (greeting) {
  return function (name) {
    if (typeof(greeting) !== 'string') {
      return ('Greetings!');
    } else if (typeof(name) !== 'string') {
      return (greeting)
    }
    return (`${greeting}, ${name}`);
  }
}

您可以做三元：

const greetCurried = (greeting) => {
  typeof(greeting) != 'string' ? 'Greetings' : greeting
    return (name) => {
      return typeof(name) != 'string' ? greeting : `${greeting}, ${name}`
    }
  return
}

const greetHello = greetCurried('Hello');

console.log(greetHello('Hedi'));

console.log(greetHello(5));