javascript - JS 三元运算符与 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

三元运算符(更正确地称为 conditional operator )可以替换单个 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 更具可读性，并且应该是首选。